美文网首页
前端导出excel 表格

前端导出excel 表格

作者: Gaochengxin | 来源:发表于2022-03-09 17:50 被阅读0次

    <meta charset="utf-8">

    1、场景

    一般开发中,下载excel是后端这边放到服务器上,然后读取文件流,然后给接口前端,前端直接下载的
    不过下载excel,给前端excel模板,让前端来实现也可行

    2、bug

    一开始,我通过vue实现下载cexel表格俩种方式来实现,前端下载都ok的,不过有以下缺点
    (1)后端读取时,发现前端下载下来的这些excel都是有加密的,所以后端读取不到
    (2)设置excel的宽度时,通过'/t'来设置,笨重还没有生效
    还是搞个插件方便多了,搞起

    3、js-export-excel

    npm插件网址如下:
    npm

    1、安装

    (1)引入js方式(dist目录下JsonExportExcel.min.js)

      <script src="https://cuikangjie.github.io/JsonExportExcel/dist/JsonExportExcel.min.js"></script>
    

    (2)npm安装

     npm install -save js-export-excel
    import ExportJsonExcel from 'js-export-excel'
    

    2、使用

    var option={};
    
    option.fileName = 'excel' //文件名
    option.datas=[
      {
       //第一个sheet(第一个excel表格)
        sheetData:[{one:'一行一列',two:'一行二列'},{one:'二行一列',two:'二行二列'}],//数据
        sheetName:'sheet',
        sheetFilter:['two','one'],   //表头数据对应的sheetData数据
        sheetHeader:['第一列','第二列']  //表头数据
        columnWidths: ['8','4'], // 列宽
      },
      {
        //第二个sheet(第二个excel)
        sheetData:[{one:'一行一列',two:'一行二列'},{one:'二行一列',two:'二行二列'}]
      }
    ];
    var toExcel=new ExportJsonExcel(option);
    toExcel.saveExcel();
    

    非常好用
    采纳请点赞谢谢!!

    相关文章

      网友评论

          本文标题:前端导出excel 表格

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