美文网首页
纯前端读取生成EXCEL文件

纯前端读取生成EXCEL文件

作者: 十年之后_b94a | 来源:发表于2020-02-14 10:49 被阅读0次

    利用js-xlsx纯前端操作excel文件

    由于最近公司项目考虑后端性能问题,而且数据量不是很大,考虑使用前端来下载导出excel文件。ps:后端同学太懒...
    js-xlsl github地址

    文件下载

    1、直接下载zip文件,找到dist目录中

    image.png
    xlsx.core.min.js此文件是精简版,能够满足大部分开发需求
    xlsx.full.min.js此文件是完整版
    2、使用npm下载包
    npm install xlsx

    使用该包

    第一种方式导入的:全局对象XLSX
    第二种:let xlsx = require(XLSX);

    数据导出:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>demo</title>
        <script src="./xlsx.core.min.js"></script> 
    </head>
    
    <body>
        <script>
            var data = [{ 主页: "111", 名称: "6800", 数量: "6800", 昵称: "广告主网" }, { 主页: "433", 名称: "6800", 数量: "6800", 昵称: "广告主网" }, { 名称: "22", 商家: "6800", 数量: "6800", 昵称: "广告主网", }, { 名称: "43", 商家: "6800", 数量: "6800", 昵称: "广告主网", }, { 店家: "43", 价格: "6800", 数量: "6800", 昵称: "广告主网", }];
        </script>
        <button id="down" onclick="exportExcel('asd')">导出</button>
        <script>
            function exportExcel(excelname){
    
        var self = this;
    
        var _data = [
    
            [ "id",    "name", "value" ],
    
            [    1, "sheetjs",    7262 ],
    
            [    2, "js-xlsx",    6969 ]
    
        ];
    
        var worksheet = XLSX.utils.aoa_to_sheet(_data);
    
        var new_workbook = XLSX.utils.book_new();
    
        XLSX.utils.book_append_sheet(new_workbook, worksheet, excelname?excelname:"SheetJS");
    
        XLSX.writeFile(new_workbook, excelname?(excelname+'.xlsx'):"sheetjs.xlsx");
    
    }
        </script>
    </body>
    
    </html>
    

    导出Excel加上遮罩层

    在js-xslx中读写操作是同步,不是异步的,那么直接在writeFile之前加上遮罩层 之后取消遮罩层

    showMask();
     XLSX.writeFile(new_workbook, excelname?(excelname+'.xlsx'):"sheetjs.xlsx");
    unMask();
    

    相关文章

      网友评论

          本文标题:纯前端读取生成EXCEL文件

          本文链接:https://www.haomeiwen.com/subject/qlczoctx.html