javascript?實現(xiàn)純前端將數(shù)據(jù)導(dǎo)出excel兩種方式

更新時間：2022年07月14日 08:32:13 作者：??camellia???

這篇文章主要介紹了javascript?實現(xiàn)純前端將數(shù)據(jù)導(dǎo)出excel兩種方式，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參一下

前言

修改之前項目代碼的時候，發(fā)現(xiàn)前人導(dǎo)出excel是用純javascript實現(xiàn)的。并沒有調(diào)用后臺接口。

之前從來沒這么用過，記錄一下。以備不時之需。

方法一

將table標(biāo)簽，包括tr、td等對json數(shù)據(jù)進行拼接，將table輸出到表格上實現(xiàn)，這種方法的弊端在于輸出的是偽excel，雖說生成xls為后綴的文件，但文件形式上還是html，

代碼如下：

<html>
<head>
????<p?style="font-size:?20px;color:?red;">使用table標(biāo)簽方式將json導(dǎo)出xls文件</p>
????<button?onclick='tableToExcel()'>導(dǎo)出</button>
</head>
<body>
????<script>?
????const?tableToExcel?=?()?=>?{
????????//?要導(dǎo)出的json數(shù)據(jù)
????????const?jsonData?=?[
????????????{
????????????????name:'路人甲',
????????????????phone:'123456',
????????????????email:'123@123456.com'
????????????},
????????????{
????????????????name:'炮灰乙',
????????????????phone:'123456',
????????????????email:'123@123456.com'
????????????},
????????????{
????????????????name:'土匪丙',
????????????????phone:'123456',
????????????????email:'123@123456.com'
????????????},
????????????{
????????????????name:'流氓丁',
????????????????phone:'123456',
????????????????email:'123@123456.com'
????????????},
????????]
????????//?列標(biāo)題
????????let?str?=?'<tr><td>姓名</td><td>電話</td><td>郵箱</td></tr>';
????????//?循環(huán)遍歷，每行加入tr標(biāo)簽，每個單元格加td標(biāo)簽
????????for(let?i?=?0?;?i?<?jsonData.length?;?i++?){
????????????str+='<tr>';
????????????for(const?key?in?jsonData[i]){
????????????????//?增加	為了不讓表格顯示科學(xué)計數(shù)法或者其他格式
????????????????str+=`<td>${?jsonData[i][key]?+?'	'}</td>`;????
????????????}
????????????str+='</tr>';
????????}
????????//?Worksheet名
????????const?worksheet?=?'Sheet1'
????????const?uri?=?'data:application/vnd.ms-excel;base64,';
?
????????//?下載的表格模板數(shù)據(jù)
????????const?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]-->
????????</head><body><table>${str}</table></body></html>`;
????????//?下載模板
????????window.location.href?=?uri?+?base64(template);
????};
?
????//?輸出base64編碼
????const?base64?=?s?=>?window.btoa(unescape(encodeURIComponent(s)));
????</script>
</body>
</html>

導(dǎo)出的文件后綴是xls，用office打開的時候不太友好。

然后，我發(fā)現(xiàn)了第二個方法

方法二

通過將json遍歷進行字符串拼接，將字符串輸出到csv文件，代碼如下：

<html>
<head>
????<p?style="font-size:?20px;color:?red;">使用a標(biāo)簽方式將json導(dǎo)出csv文件</p>
????<button?onclick='tableToExcel()'>導(dǎo)出</button>
</head>
<body>
????<script>
????const?tableToExcel?=?()?=>?{
????????//?要導(dǎo)出的json數(shù)據(jù)
????????const?jsonData?=?[
????????????{
????????????????name:'路人甲',
????????????????phone:'123456789',
????????????????email:'000@123456.com'
????????????},
????????????{
????????????????name:'炮灰乙',
????????????????phone:'123456789',
????????????????email:'000@123456.com'
????????????},
????????????{
????????????????name:'土匪丙',
????????????????phone:'123456789',
????????????????email:'000@123456.com'
????????????},
????????????{
????????????????name:'流氓丁',
????????????????phone:'123456789',
????????????????email:'000@123456.com'
????????????},
????????];
????????//?列標(biāo)題，逗號隔開，每一個逗號就是隔開一個單元格
????????let?str?=?`姓名,電話,郵箱
`;
????????//?增加	為了不讓表格顯示科學(xué)計數(shù)法或者其他格式
????????for(let?i?=?0?;?i?<?jsonData.length?;?i++?){
????????????for(const?key?in?jsonData[i]){
????????????????str+=`${jsonData[i][key]?+?'	'},`;????
????????????}
????????????str+='
';
????????}
????????//?encodeURIComponent解決中文亂碼
????????const?uri?=?'data:text/csv;charset=utf-8,ufeff'?+?encodeURIComponent(str);
????????//?通過創(chuàng)建a標(biāo)簽實現(xiàn)
????????const?link?=?document.createElement("a");
????????link.href?=?uri;
????????//?對下載的文件命名
????????link.download?=??"json數(shù)據(jù)表.csv";
????????link.click();
????}
????</script>
</body>
</html>

上邊的兩段代碼復(fù)制即可用。

到此這篇關(guān)于javascript 實現(xiàn)純前端將數(shù)據(jù)導(dǎo)出excel兩種方式的文章就介紹到這了,更多相關(guān)javascript 數(shù)據(jù)導(dǎo)出excel內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: