Angular2 - 导出表到HTML Excel和给文件名

我有一个Angular2应用程序，现在有人问我实现一个基本表格Excel导出。Angular2 - 导出表到HTML 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>

在这一刻我可以下载文件Excel文件，但文件名是完全随机的 。

谢谢支持

来源

2017-06-15 DarioN1

https://stackoverflow.com/questions/283956/is-there-any-way-to-specify-a-suggested-filename-给你想要的文件名when-using-data-uri您可能不得不提供uri作为href和文件名作为'download'参数值 – Skeptor

在我的情况下，您的链接上的建议不适用...谢谢 – DarioN1

试试这个代码。您可以将测试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'); 
} 
}

来源

2018-02-02 21:23:34

可以制造假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; 
}

来源

2017-08-02 09:11:43 jcubic

Angular2 - 导出表到HTML Excel和给文件名

回答

相关问题