웹 앱을 통해 Excel을 Google 스프레드 시트로 가져 오는 방법

debugcn 에 게시 Dev

피모

Excel 파일을 가져 와서 Google 시트로 전달하는 웹 앱을 만들려고합니다. 아이디어는 다른 사람들이 웹 앱을 통해 자신의 테이블 (형식이 동일 함)을 내 스프레드 시트에 업로드하여 나머지 작업을 수행한다는 것입니다.

지금 나는 이것을 얻었다 :

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>

Excel에서 데이터를 읽고 Google 시트로 가져 오지만 테이블이 아닌 배열을 얻습니다.

이것은 내가 Google 시트로 가져 오는 것입니다.

[{"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"}]

내 질문은 어떻게 그것을 테이블로 변환 할 수 있습니까? html 쪽에서해야합니까? 또한 저는 프로그래밍 세계의 초보자라고 말하고 싶습니다. 이걸로 무엇을해야하는지 가장 간단한 방법으로 알려주세요.

친애하는!

Tanaike

나는 당신의 목표를 다음과 같이 믿습니다.

로컬 PC에서 XLSX 파일을 선택하면 XLSX 데이터를 검색하고 textareaJavascript 및 xlsx.js.
하단 버튼을 클릭하면 값 textarea을 Google Apps Script 측으로 보내고 값을 Google 스프레드 시트에 넣기를 원합니다.
에서 Excel file has only one sheet with one simple tableXLSX 데이터에 시트가 하나만 있다는 것을 이해했습니다.

수정 지점 :

스크립트에서 XLSX 데이터에 여러 시트가있는 경우 마지막 시트의 값만 Google Apps Script로 전송됩니다. 다른 시트의 값은 workbook.SheetNames.forEach().
- 그러나 귀하의 회신에서 XLSX 데이터에 시트가 하나만 있다고 가정하는 것을 이해할 수 있습니다. 따라서이 경우 스크립트가 더 간단 해집니다.
스크립트에서 오류가 발생합니다 document.getElementById('upload').addEventListener('click', handleFileSelect).value.
스프레드 시트에 값을 입력하기 위해 setValues대신 을 사용하도록 제안하고 싶습니다 appendRow. setValues를 사용 하면 한 번의 호출로 여러 행과 열의 값을 넣을 수 있습니다.
- 이 경우 값은 2 차원 배열이어야합니다.

위의 사항이 스크립트에 반영되면 다음과 같이됩니다.

수정 된 스크립트 :

Google Apps Script 측 :

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);
}

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>
  <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>

노트 :

Web Apps의 스크립트를 수정 한 경우 Web Apps를 새 버전으로 재배포하십시오. 이를 통해 최신 스크립트가 웹 앱에 반영됩니다. 조심하세요.

참조 :

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사