JSを使用してテーブルデータをExcelにエクスポートする（2つの方法）

最近開発されたプロジェクトはExcelをオンラインでエクスポートする機能を使用する必要があるため、インターネットで多くの例を見つけました。次に、ExcelをオンラインでエクスポートするJSの2つのケースを共有します。Tableで表示されるデータがプロジェクトで使用されているため、表に従って、ケースもExcelにエクスポートされます。（ナンセンスな話をしないでください、ただコードに行ってください！）

ケースナンバーワン：

パブリック呼び出しメソッド：

//导出Excel公共方法
var tablesToExcel = (function() {
  var uri = 'data:application/vnd.ms-excel;base64,'
  , tmplWorkbookXML = '<?xml version="1.0"?><?mso-application progid="Excel.Sheet"?><Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">'
  + '<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"><Author>Axel Richter</Author><Created>{created}</Created></DocumentProperties>'
  + '<Styles>'
  + '<Style ss:ID="Currency"><NumberFormat ss:Format="Currency"></NumberFormat></Style>'
  + '<Style ss:ID="Date"><NumberFormat ss:Format="Medium Date"></NumberFormat></Style>'
  + '</Styles>'
  + '{worksheets}</Workbook>'
  , tmplWorksheetXML = '<Worksheet ss:Name="{nameWS}"><Table>{rows}</Table></Worksheet>'
  , tmplCellXML = '<Cell{attributeStyleID}{attributeFormula}><Data ss:Type="{nameType}">{data}</Data></Cell>'
  , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s)));}
  , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) ;};
  return function(tables, wsnames, wbname, appname) {
    var ctx = "";
    var workbookXML = "";
    var worksheetsXML = "";
    var rowsXML = "";

    for (var i = 0; i < tables.length; i++) {
      if (!tables[i].nodeType) tables[i] = document.getElementById(tables[i]);

// 控制要导出的行数
      for (var j = 0; j < tables[i].rows.length; j++) {
        rowsXML += '<Row>';

//  控制导出的列数
        for (var k = 0; k < tables[i].rows[j].cells.length; k++) {
          var dataType = tables[i].rows[j].cells[k].getAttribute("data-type");
          var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style");
          var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value");
          dataValue = (dataValue)?dataValue:tables[i].rows[j].cells[k].innerHTML;
          var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula");
          dataFormula = (dataFormula)?dataFormula:(appname=='Calc' && dataType=='DateTime')?dataValue:null;
          ctx = {  attributeStyleID: (dataStyle=='Currency' || dataStyle=='Date')?' ss:StyleID="'+dataStyle+'"':''
                 , nameType: (dataType=='Number' || dataType=='DateTime' || dataType=='Boolean' || dataType=='Error')?dataType:'String'
                 , data: (dataFormula)?'':dataValue
                 , attributeFormula: (dataFormula)?' ss:Formula="'+dataFormula+'"':''
                };
          rowsXML += format(tmplCellXML, ctx);
        }
        rowsXML += '</Row>';
      }
      ctx = {rows: rowsXML, nameWS: wsnames[i] || 'Sheet' + i};
      worksheetsXML += format(tmplWorksheetXML, ctx);
      rowsXML = "";
    }

    ctx = {created: (new Date()).getTime(), worksheets: worksheetsXML};
    workbookXML = format(tmplWorkbookXML, ctx);

	// 查看后台的打印输出
    //console.log(workbookXML);
    var link = document.createElement("A");
    link.href = uri + base64(workbookXML);
    link.download = wbname || 'Workbook.xls';
    link.target = '_blank';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };
})();

電話：ボタンケースの時間を書いて彼をトリガーすることができます、私のものはこのようなものです

最初のパラメータはテーブルのIDです。バインドしない場合、
2番目のパラメータはデフォルトでこれになり、他の
パラメータに変更できます。変更せずにインターネットから直接コピーしました。3番目のパラメータはエクスポートされたExcel名です。変更できます。
4番目のパラメータがExcelタイプです

//导出Excel按钮
function BtnToExcel_onclick(){
    //第一个参数是Table的id，如果没有要绑定一个
    //第二个参数默认这样，改成其他也可以，我直接复制的网上的，没有修改
    //第三个参数是导出的Excel名称，可以修改你想要的
    //第四个参数是Excel类型
	tablesToExcel(['TableID'], ['ProductDay1'], 'Demo.xls', 'Excel');
}

概要：最初はこれを探していました。参照はExcelに正常にエクスポートできます。テストの結果、エクスポートされたデータにはMicrosoft Office Excelで開いたときにデータが含まれていますが、WPSでExcelを開いたときにデータがないことがわかりました。それから私はオンラインで理由を見つけました、しかし解決策はありません。これは私にインターネットから他の例を探させなければなりません。アドバイスを解決するための偉大な神々へようこそ！

ケース2：

パブリック呼び出しメソッド：

var tableToExcel = (function() {
  var uri = 'data:application/vnd.ms-excel;base64,',
      template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
      base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) ;},
      format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }); };
  
  return function(table, name, filename) {
    if (!table.nodeType) table = document.getElementById(table);
    console.log(table.innerHTML);
    var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML };//此时的innerHTML数据可以自己自定义 比如json转化 只要值要数据符合即可
    
    var link = document.createElement("A");
    link.href = uri + base64(format(template, ctx));
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };
});

電話：ボタンケースの時間を書いて彼をトリガーすることができます、私のものはこのようなものです

    最初のパラメータはテーブルのIDです
    。2番目のパラメータをバインドしない場合はデフォルトです
    。3番目のパラメータはエクスポートされたExcel名であるため、変更する必要はありません。必要に応じて変更できます。

//导出Excel按钮
function toExcel_onclick(){
    var download = tableToExcel();
    //第一个参数是Table的id，如果没有要绑定一个
    //第二个参数默认这样，不用修改
    //第三个参数是导出的Excel名称，可以修改你想要的
    download("TableID", 'sheet',  "Demo.xls");
}

概要：最初に見つけたものはOfficeおよびWPSと互換性がないため、このプロテストは互換性を持って使用できます。誰でも同じテストを行うことができ、同様のより優れたテストと共有したいと考えています。

上記のコードソースはオンラインであり、プロジェクトの要件に応じて対応する変更を加えた後に取得されます。ブログは長い間更新されていません！

記録、要約、共有！学習は常に進行中です！