快捷導(dǎo)航

JS實(shí)現(xiàn)將數(shù)據(jù)導(dǎo)出到Excel的方法詳解

更新時(shí)間：2022年06月07日 09:17:37 作者：camellia

這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)將數(shù)據(jù)導(dǎo)出到Excel的兩種方法詳解，文中的示例代碼簡(jiǎn)潔易懂，感興趣的小伙伴可以動(dòng)手嘗試一下

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

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

方法一：

將table標(biāo)簽，包括tr、td等對(duì)json數(shù)據(jù)進(jìn)行拼接，將table輸出到表格上實(shí)現(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)簽，每個(gè)單元格加td標(biāo)簽
????????for(let?i?=?0?;?i?<?jsonData.length?;?i++?){
????????????str+='<tr>';
????????????for(const?key?in?jsonData[i]){
????????????????//?增加	為了不讓表格顯示科學(xué)計(jì)數(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打開的時(shí)候不太友好。

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

方法二

通過將json遍歷進(jìn)行字符串拼接，將字符串輸出到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)題，逗號(hào)隔開，每一個(gè)逗號(hào)就是隔開一個(gè)單元格
????????let?str?=?`姓名,電話,郵箱
`;
????????//?增加	為了不讓表格顯示科學(xué)計(jì)數(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)簽實(shí)現(xiàn)
????????const?link?=?document.createElement("a");
????????link.href?=?uri;
????????//?對(duì)下載的文件命名
????????link.download?=??"json數(shù)據(jù)表.csv";
????????link.click();
????}
????</script>
</body>
</html>

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

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

您可能感興趣的文章: