Fatal编程技术网
  • javascript/
  • Javascript 如何通过web app将Excel导入Google工作表

Javascript 如何通过web app将Excel导入Google工作表

javascript arrays excel google-apps-script google-sheets

Javascript 如何通过web app将Excel导入Google工作表,javascript,arrays,excel,google-apps-script,google-sheets,Javascript,Arrays,Excel,Google Apps Script,Google Sheets,我正在尝试制作一个web应用程序，它将导入excel文件并将其传递给google sheets。其想法是，不同的人将通过web应用程序将他们的表格（格式相同）上传到我的电子表格中，我将在那里完成其余的工作 现在我得到了这个： js代码 function doGet(e) { Logger.log(e.parameter); return HtmlService.createHtmlOutputFromFile("index"); } func

我正在尝试制作一个web应用程序，它将导入excel文件并将其传递给google sheets。其想法是，不同的人将通过web应用程序将他们的表格（格式相同）上传到我的电子表格中，我将在那里完成其余的工作

现在我得到了这个：

js代码

    function doGet(e) {
 
  Logger.log(e.parameter);
  return HtmlService.createHtmlOutputFromFile("index");
     
}

function toroku(userInfo){

 var url = "https://docs.google.com/spreadsheets/d/1gCMXhBTba-8PNeN5lk5wrumUGe_f4xNdip1DPCpaRSw/edit#gid=0";
 var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("upload");
 
  ws.appendRow([userInfo.table]);
        
 }
和html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script>
    var ExcelToJSON = function() {

      this.parseExcel = function(file) {
        var reader = new FileReader();

        reader.onload = function(e) {
          var data = e.target.result;
          var workbook = XLSX.read(data, {
            type: 'binary'
          });
          workbook.SheetNames.forEach(function(sheetName) {
            // Here is your object
            var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
            var json_object = JSON.stringify(XL_row_object);
            console.log(JSON.parse(json_object));
            jQuery( '#xlx_json' ).val( json_object );
          })
        };

        reader.onerror = function(ex) {
          console.log(ex);
        };

        reader.readAsBinaryString(file);
      };
  };

  function handleFileSelect(evt) {
    
    var files = evt.target.files; // FileList object
    var xl2json = new ExcelToJSON();
    xl2json.parseExcel(files[0]);
  }


 
</script>

<form enctype="multipart/form-data">
    <input id="upload" type=file  name="files[]">
</form>

    <textarea class="form-control" rows=35 cols=120 id="xlx_json"></textarea>

    <script>
        document.getElementById('upload').addEventListener('change', handleFileSelect, false);
        document.getElementById('upload').addEventListener('click', handleFileSelect).value
        
        google.script.run.toroku(handleFileSelect);
        document.getElementById("upload").value = "";

    </script>
    
    <div class="form-row">
    <button id="btn">登録！</button>
    </div>
   
    <script>
   
    document.getElementById("btn").addEventListener("click",doStuff);
   
    function doStuff(){
   
    var userInfo = {};
   
   
    userInfo.table = document.getElementById("xlx_json").value;

    
     google.script.run.toroku(userInfo);
    document.getElementById("xlx_json").value = "";

   
    }
   
    </script>
    
  </body>
</html>
我的问题是如何将其转换为表？ 应该在html端完成吗？ 另外，我想说，我是编程界的新手，所以请用最简单的方式告诉我该怎么做

致以最良好的祝愿

我相信你的目标如下

  • 选择本地PC上的XLSX文件后，您希望检索XLSX数据，并使用Javascript和
    XLSX.js
    将其放入
    textarea
  • 单击底部按钮时，您希望将
    textarea
    中的值发送到Google Apps脚本端，并将这些值放入Google电子表格
  • 从
    Excel文件只有一张表和一个简单的表
    ，我了解到XLSX数据只有一张表
修改点：
  • 在脚本中，当XLSX数据中有多个工作表时，只有最后一个工作表的值才会发送到Google Apps脚本。因为其他工作表的值在
    workbook.SheetNames.forEach（）
    中被覆盖。
    • 但从您的回复中，我可以理解您假设XLSX数据只有一张表。因此，在本例中，脚本变得更加简单
  • 在脚本中，
    document.getElementById（'upload'）.addEventListener（'click'，handleFileSelect'）.value出现错误
  • 为了将值放入电子表格，我建议使用
    setValues
    而不是
    appendRow
    。当使用
    setValues
    时，可以通过一次调用输入多个行和列的值。
    • 在这种情况下，值必须是二维数组
当上述各点反映到脚本中时，它将变成如下所示

修改脚本： 谷歌应用程序脚本端： HTML和Javascript端： 

登録！
document.getElementById（'upload'）。addEventListener（'change'，handleFileSelect，false）；
document.getElementById（“btn”）。addEventListener（“单击”，doStuff）；
var ExcelToJSON=function（）{
this.parseExcel=函数（文件）{
var reader=new FileReader（）；
reader.onload=函数（e）{
var数据=e.target.result；
var workbook=XLSX.read（数据，{type:'binary'}）；
jQuery（'#xlx_json'）.val（json.stringify（XLSX.utils.sheet_to_json（workbook.SheetNames[0]]，{header:1}））；
};
reader.onerror=函数（ex）{
控制台日志（ex）；
};
reader.readAsBinaryString（文件）；
};
};
功能手柄文件选择（evt）{
var files=evt.target.files；//文件列表对象
var xl2json=new ExcelToJSON（）；
xl2json.parseExcel（文件[0]）；
}
函数doStuff（）{
var userInfo={}；
userInfo.table=document.getElementById（“xlx_json”）.value；
google.script.run.toroku（userInfo）；
document.getElementById（“xlx_json”）.value=“”；
}
注:
  • 修改Web应用脚本时，请将Web应用重新部署为新版本。这样，最新的脚本就会反映到Web应用程序中。请注意这一点。
参考资料：
    • 我相信你的目标如下

      • 选择本地PC上的XLSX文件后，您希望检索XLSX数据，并使用Javascript和
        XLSX.js
        将其放入
        textarea
      • 单击底部按钮时，您希望将
        textarea
        中的值发送到Google Apps脚本端，并将这些值放入Google电子表格
      • 从
        Excel文件只有一张表和一个简单的表
        ，我了解到XLSX数据只有一张表
      修改点：
      • 在脚本中，当XLSX数据中有多个工作表时，只有最后一个工作表的值才会发送到Google Apps脚本。因为其他工作表的值在
        workbook.SheetNames.forEach（）
        中被覆盖。
        • 但从您的回复中，我可以理解您假设XLSX数据只有一张表。因此，在本例中，脚本变得更加简单
      • 在脚本中，
        document.getElementById（'upload'）.addEventListener（'click'，handleFileSelect'）.value出现错误
      • 为了将值放入电子表格，我建议使用
        setValues
        而不是
        appendRow
        。当使用
        setValues
        时，可以通过一次调用输入多个行和列的值。
        • 在这种情况下，值必须是二维数组
      当上述各点反映到脚本中时，它将变成如下所示

      修改脚本： 谷歌应用程序脚本端： HTML和Javascript端： 
      
登録！
document.getElementById（'upload'）。addEventListener（'change'，handleFileSelect，false）；
document.getElementById（“btn”）。addEventListener（“单击”，doStuff）；
var ExcelToJSON=function（）{
this.parseExcel=函数（文件）{
var reader=new FileReader（）；
reader.onload=函数（e）{
var数据=e.target.result；
var workbook=XLSX.read（数据，{type:'binary'}）；
jQuery（'#xlx_json'）.val（json.stringify（XLSX.utils.sheet_to_json（workbook.SheetNames[0]]，{header:1}））；
};
reader.onerror=函数（ex）{
控制台日志（ex）；
};
reader.readAsBinaryString（文件）；
};
};
功能手柄文件选择（evt）{
var files=evt.target.files

      [{"Product":"2132030501430 ","Customer":"A","Units":"1","Deliver":"1"},{"Product":"2188130546030 ","Customer":"B","Units":"2","Deliver":"3"},{"Product":"2132650259800 ","Customer":"A","Units":"1","Deliver":"5"},{"Product":"2138512138000 ","Customer":"B","Units":"0","Deliver":"6"},{"Product":"2132032500270 ","Customer":"A","Units":"-10","Deliver":"7"},{"Product":"2116104013159 ","Customer":"B","Units":"200","Deliver":"8"},{"Product":"2116102039910 ","Customer":"A","Deliver":"9"},{"Product":"2145710030310 ","Customer":"B","Deliver":"10"},{"Product":"2132630164760 ","Customer":"A","Deliver":"9"},{"Product":"2116105051990 ","Customer":"B","Units":"0","Deliver":"5"},{"Product":"2145721006510 ","Customer":"A","Units":"0","Deliver":"4"},{"Product":"2132030900430 ","Customer":"B","Units":"7","Deliver":"3"},{"Product":"2132031500270 ","Customer":"A","Units":"5","Deliver":"2"},{"Product":"2138506049100 ","Customer":"B","Units":"6","Deliver":"1"},{"Product":"2132042501730 ","Customer":"C","Units":"31","Deliver":"9"},{"Product":"2132030901470 ","Customer":"D","Units":"20","Deliver":"8"},{"Product":"2116101050089 ","Customer":"F","Units":"126","Deliver":"7"},{"Product":"2116104051870 ","Customer":"C","Units":"3","Deliver":"6"},{"Product":"2188131528030 ","Customer":"D","Units":"82","Deliver":"4"},{"Product":"2145718013050 ","Customer":"F","Deliver":"4"},{"Product":"2188140578030 ","Customer":"C","Units":"20","Deliver":"4"},{"Product":"2132640087170 ","Customer":"D","Deliver":"4"},{"Product":"2138506026000 ","Customer":"F","Units":"0","Deliver":"4"},{"Product":"2132042501770 ","Customer":"C","Units":"15","Deliver":"4"},{"Product":"2187106025940 ","Customer":"D","Units":"90","Deliver":"4"}]

      

      function doGet(e) {
  Logger.log(e.parameter);
  return HtmlService.createHtmlOutputFromFile("index");
}

function toroku(userInfo){
  var values = JSON.parse(userInfo.table);
  var url = "https://docs.google.com/spreadsheets/d/1gCMXhBTba-8PNeN5lk5wrumUGe_f4xNdip1DPCpaRSw/edit#gid=0";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("upload");
  ws.getRange(ws.getLastRow() + 1, 1, values.length, values[0].length).setValues(values);
}

      

      <!DOCTYPE html>
<html>

<head>
  <base target="_top">
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
  <form enctype="multipart/form-data">
    <input id="upload" type=file name="files[]">
  </form>
  <textarea class="form-control" rows=35 cols=120 id="xlx_json"></textarea>
  <div class="form-row">
    <button id="btn">登録！</button>
  </div>

  <script>
    document.getElementById('upload').addEventListener('change', handleFileSelect, false);
    document.getElementById("btn").addEventListener("click", doStuff);
  
    var ExcelToJSON = function() {
      this.parseExcel = function(file) {
        var reader = new FileReader();
        reader.onload = function(e) {
          var data = e.target.result;
          var workbook = XLSX.read(data, {type: 'binary'});
          jQuery('#xlx_json').val(JSON.stringify(XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], {header: 1})));
        };
        reader.onerror = function(ex) {
          console.log(ex);
        };
        reader.readAsBinaryString(file);
      };
    };

    function handleFileSelect(evt) {
      var files = evt.target.files; // FileList object
      var xl2json = new ExcelToJSON();
      xl2json.parseExcel(files[0]);
    }

    function doStuff() {
      var userInfo = {};
      userInfo.table = document.getElementById("xlx_json").value;
      google.script.run.toroku(userInfo);
      document.getElementById("xlx_json").value = "";
    }
  </script>
</body>
</html>