Javascript Angular2-将表格导出到html excel并给出文件名_Javascript_Angular

Javascript Angular2-将表格导出到html excel并给出文件名

javascript angular

Javascript Angular2-将表格导出到html excel并给出文件名,javascript,angular,Javascript,Angular,我有一个Angular2应用程序，现在它要求我实现一个basic excel导出表我正在使用的函数可以工作，但我不知道如何设置生成的excel的文件名这是功能： tableToExcel(e,table, name) { console.log(e); let uri = 'data:application/vnd.ms-excel;base64,', template = '<html xmlns:o="urn:schemas-microsoft-com:offi

我有一个Angular2应用程序，现在它要求我实现一个basic excel导出表

我正在使用的函数可以工作，但我不知道如何设置生成的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>

tableToExcel（e，table，name）{
控制台日志（e）；
让uri='data:application/vnd.ms excel；base64'，
模板=
'
{table}
',
base64=函数{
返回窗口.btoa（decodeURI（decodeURIComponent）））
},
格式=函数（s，c）{
返回s.replace（/{（\w+）}/g，
函数（m，p）{返回c[p]；
}) 
}
if（！table.nodeType）
table=document.getElementById（表）
var ctx={
工作表：名称| |“工作表”，表：table.innerHTML
}
//window.location.href=uri+base64（格式（模板，ctx））
log（uri+base64（格式（模板，ctx））；
open（uri+base64（格式（模板，ctx）），“_blank”，“top=0，left=0，height=100%，width=auto”）；
返回false；
}

这是按钮：

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文件，但文件名是完全随机的

多亏了支持

您可以创建一个假

标签，将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;
}

您可以创建一个假标记，uri为href，文件名为download属性，然后调用并单击它，这样应该可以：
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;
}

试试这个代码。您可以指定所需的文件名来代替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');
}
}

tableToExcel（表，名称）{
模板=
'
（试试这段代码。您可以指定所需的文件名来代替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');
}
}

tableToExcel（表，名称）{
模板=
'
（您可以使用JQuery插件“table2excel”
1-将这些文件添加到资产中的js目录中
=>jquery.table2excel.js
=>表2CSV.js
=>jquery.table2excel.min.js
您可以在这里找到它们=>
2-将id添加到HTML文件中的表中
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
  }); }

您可以使用JQuery插件“table2excel”
1-将这些文件添加到资产中的js目录中
=>jquery.table2excel.js
=>表2CSV.js
=>jquery.table2excel.min.js
您可以在这里找到它们=>
2-将id添加到HTML文件中的表中
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
  }); }

在我的场景中，您可能必须将uri作为href，将filename作为下载
参数的值在我的场景中，链接上的建议不适用…无论如何，谢谢您可能必须将uri作为href，将filename作为下载
参数的值在我的场景中，链接上的建议不适用…无论如何，谢谢我不喜欢他的解决方案是因为msSaveBlob不受Chrome支持，它只适用于IE。我不喜欢这个解决方案，因为msSaveBlob不受Chrome支持，它只适用于IE