Question

我有一个 Angular2 应用程序，现在它被要求我实现基本 table to excel export 。

我使用的功能有效，但我不知道如何设置生成的Excel的文件名。

这是功能：

tableToExcel(e,table, name) {
  console.log(e);

  let 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>
         <!--[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]-->

        <meta http-equiv="content-type" content="text/plain; charset=UTF-8"/>
   </head>

  <body>
       <table>{table}</table>
  </body>
</html>',

base64 = function (s) { 
     return window.btoa(decodeURI(decodeURIComponent(s))) 
     },
format = function (s, c) {
     return s.replace(/{(\w+)}/g, 
        function (m, p) { return c[p]; 
      }) 
     }
if (!table.nodeType) 
     table = document.getElementById(table)
var ctx = { 
      worksheet: name || 'Worksheet', table: table.innerHTML 
}
//window.location.href = uri + base64(format(template, ctx))  
console.log(uri + base64(format(template, ctx)));
window.open(uri + base64(format(template, ctx)), '_blank', 'top=0,left=0,height=100%,width=auto');

  return false;
 }

这是按钮：

<a type="button" href="#" (click)="tableToExcel($event,'testTable', 'W3C Example Table')" download="Schede.xlsx" class="btn btn-warning"> Excel </a>

此时我可以下载excel文件，但文件名是完全随机的。

感谢支持

Answer 1

您可以创建假的a标记，并将您的uri作为href和文件名作为下载属性，然后调用点击它，这应该有效：

function tableToExcel(e,table, filename) {
  console.log(e);
  // your variables here
  let link = document.createElement('a');
  link.setAttribute('href', uri + base64(format(template, ctx)));
  link.setAttribute('download', filename);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  return false;
}

Answer 2

试试这段代码。您可以提供所需的文件名来代替Test file.xls

tableToExcel(table, name) {
template = 
'<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"e
xmlns="http://www.w3.org/TR/REC-html40">
 <head>
     <!--[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]-->

    <meta http-equiv="content-type" content="text/plain; charset=UTF-8"/>
 </head>

<body>
   <table>
(<HTMLScriptElementdocument.getElementById(table)).innerHTML</table>
</body>
</html>',

if (window.navigator.msSaveBlob) {
var blob = new Blob([templete], {type: "application/csv;charset=utf-8;"});
navigator.msSaveBlob(blob, 'Test file.xls');
}
}

Answer 3

您可以使用JQuery插件“table2excel”。

1-将这些文件添加到资产中的js目录

=＆GT; jquery.table2excel.js

=＆GT; table2csv.js

=＆GT; jquery.table2excel.min.js

你可以在这里找到它们=＆gt; https://github.com/rainabba/jquery-table2excel

2-在HTML文件中为您的表添加ID。

3-在component.ts中创建您的函数以导出表格：

exportToExcel(){

  $("#YourTableId").table2excel({
    exclude: ".noExl",
    name: "Worksheet Name",
    filename: "SomeFile", //do not include extension
    fileext: ".xls",
    exclude_img: true,
    exclude_links: true,
    exclude_inputs: true
  }); }

Angular2 - 将表导出为html excel并提供文件名

3 个答案: