javascript怎么實(shí)現(xiàn)純前端將數(shù)據(jù)導(dǎo)出excel

發(fā)布時(shí)間：2022-07-14 10:22:55 來(lái)源：億速云閱讀：161 作者：iii 欄目：開(kāi)發(fā)技術(shù)

這篇文章主要介紹了javascript怎么實(shí)現(xiàn)純前端將數(shù)據(jù)導(dǎo)出excel的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇javascript怎么實(shí)現(xiàn)純前端將數(shù)據(jù)導(dǎo)出excel文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

方法一

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

代碼如下：

<html>
<head>
    <p >使用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打開(kāi)的時(shí)候不太友好。

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

方法二

通過(guò)將json遍歷進(jìn)行字符串拼接，將字符串輸出到csv文件，代碼如下：

<html>
<head>
    <p >使用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)隔開(kāi)，每一個(gè)逗號(hào)就是隔開(kāi)一個(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);
        // 通過(guò)創(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>

關(guān)于“javascript怎么實(shí)現(xiàn)純前端將數(shù)據(jù)導(dǎo)出excel”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“javascript怎么實(shí)現(xiàn)純前端將數(shù)據(jù)導(dǎo)出excel”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

javascript怎么實(shí)現(xiàn)純前端將數(shù)據(jù)導(dǎo)出excel

方法一

方法二

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽