javascript 實現純前端將數據導出excel兩種方式

Posted on by

前言

修改之前項目代碼的時候，發現前人導出excel是用純javascript實現的。並沒有調用後臺接口。

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

方法一

將table標簽，包括tr、td等對json數據進行拼接，將table輸出到表格上實現，這種方法的弊端在於輸出的是偽excel，雖說生成xls為後綴的文件，但文件形式上還是html，

代碼如下：

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

導出的文件後綴是xls，用office打開的時候不太友好。

然後，我發現瞭第二個方法

方法二

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

<html>
<head>
    <p style="font-size: 20px;color: red;">使用a標簽方式將json導出csv文件</p>
    <button onclick='tableToExcel()'>導出</button>
</head>
<body>
    <script>
    const tableToExcel = () => {
        // 要導出的json數據
        const jsonData = [
            {
                name:'路人甲',
                phone:'123456789',
                email:'[email protected]'
            },
            {
                name:'炮灰乙',
                phone:'123456789',
                email:'[email protected]'
            },
            {
                name:'土匪丙',
                phone:'123456789',
                email:'[email protected]'
            },
            {
                name:'流氓丁',
                phone:'123456789',
                email:'[email protected]'
            },
        ];
        // 列標題，逗號隔開，每一個逗號就是隔開一個單元格
        let str = `姓名,電話,郵箱
`;
        // 增加	為瞭不讓表格顯示科學計數法或者其他格式
        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);
        // 通過創建a標簽實現
        const link = document.createElement("a");
        link.href = uri;
        // 對下載的文件命名
        link.download =  "json數據表.csv";
        link.click();
    }
    </script>
</body>
</html>

上邊的兩段代碼復制即可用。

到此這篇關於javascript 實現純前端將數據導出excel兩種方式的文章就介紹到這瞭,更多相關javascript 數據導出excel內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：