时间戳

首页 > 解决方案 > 电子签名困境

google-apps-script - 电子签名困境

问题描述

我有一个表格，需要通过手机收集电子签名。我需要它是免费的，有无限的回应。我有一个jSignature适用于 Google 表格的 HTML 代码，但我无法让它在移动设备上运行。

理想情况下，我想坚持使用 Google，尽管我一直在尝试使用 Wix（不完全符合我的需要）或 Android Studio（超出我的能力）之类的东西。除此之外，我的能力无论如何都不是很好，所以我不确定从哪里开始，尽管我怀疑这不是我能做什么，而是谷歌表格能做什么，比如，我已经阅读一些关于脚本如何在移动设备上无法正常工作的信息。

HTML

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/willowsystems/jSignature/master/libs/jSignature.min.js"></script>
<body>
<form id="customerForm">
Please sign your name in the pad below: <br>
Full Name: <input type="text" name="username"><br>
Employee Number: <input type="employeenumber" name="useremployeenumber"><br><br>
Signature:
<div id="signature"></div><br>
<img id="rendered" src="" style="display:none">
<input type="button" value="Save" onclick="renderSignature();saveImage();"/>
</form>
</body>
<script>
  document.getElementById("signature").style.border = "1px solid black";
  
  $("#signature").jSignature({
    'background-color': 'transparent',
    'decor-color': 'transparent'
  });

  function renderSignature(){
    $("img#rendered").attr("src",$('#signature').jSignature('getData','default'));
  }

  function saveImage(e){ //This sends the image src to saveImages function
    var bytes = document.getElementById('rendered').src;
    console.log(bytes);
    var sign = {
      username: document.getElementsByName('username')[0].value,
      useremployeenumber: document.getElementsByName('useremployeenumber')[0].value
    };
    google.script.run.saveImage(bytes, sign);
    return
  } 
  window.onload=function(){
  google.script.run
.withSuccessHandler(function(){google.script.host.close();})
.saveImage(bytes, sign);
}

</script>



</html>

代码.GS

function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('jSignature')
    .setWidth(400)
    .setHeight(300);
   SpreadsheetApp.getUi()
  .showModalDialog(html, 'Your Signature is Required');
}

function doGet() {
  return HtmlService
      .createTemplateFromFile('jSignature')
      .evaluate();
}


function saveImage(bytes, sign){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('my page name');
  var dateObj = Date.now();
  var bytes = bytes.split(",")
  var blob = Utilities.newBlob(Utilities.base64Decode(bytes[1]), 'image/png');
  var fileName = blob.setName("Signature "+dateObj).getName();
  var sigFolder = DriveApp.getFolderById("my folder id");
  var url = sigFolder.createFile(blob).getId();
  Logger.log(url)
  var ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Register');
  var name = sign.username;
  var employeenumber = sign.useremployeenumber;
  var signature = ss.insertImage(blob,4,ss.getLastRow()+1);
  signature.setWidth(500);
  signature.setHeight(20);
  signature
  var imageCell = ss.getRange(ss.getLastRow()+1, 1, 1, 3).setValues([[Date(), name,employeenumber]]);
}

我一直在考虑让用户首先打开表单响应谷歌表，然后打开一个带有表单链接的页面。他们将点击该链接，填写表格，然后返回到 google 表格表格，其中 onFormSubmit 触发器将调出 jSignature 垫。他们将签名，所有信息将收集在表单响应的一行中。

如何使 jSignature 适用于 Google 表格移动版？甚至可能吗？

标签： google-apps-scriptgoogle-sheetsmobilejsignature

解决方案

推荐阅读