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和給文件名

回答

相關問題