vue导出数据为excel且设置样式

关注

VIP免费原创 2022-02-22 16:44:25 3.6k 阅读 AI 写同款· GEO 优化 ›

Vue表格导出Excel数据，自定义表头，使用xlsx-style修饰 ue表格导出Excel数据，自定义表头，使用xlsx-style修饰结合网上好多案例，也有好多不一样的方法。适合自己的才是最好的阅读详情

1. 首先安装以下三个安装包

npm install --save xlsx(修改样式需要下载npm install --save xlsx-style)
npm install -S file-saver
npm install -D script-loader

在项目中新建一个文件夹（一般在src下新建，文件名自取，在这里命名为excel），在文件夹中放入Blob.js 和 export2Excel.js （这两个文件可在gitup上进行下载）

Blob.js ，export2Excel.js下载地址网盘提取：链接: https://pan.baidu.com/s/18dgiu-ISnHS32N8B3yNZRQ 提取码: cxia

4. 在vue文件中添加下载功能（其中downloadExcel为下载事件，及按钮触发下载事件）

这里记得要与data里面的list名称对应

       //列表下载
        downloadExcel() {
   
   
          this.$confirm('确定下载列表文件?', '提示', {
   
   
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
   
   
            this.excelData = this.selectData //你要导出的数据list。
            this.export2Excel()
          }).catch(() => {
   
   
 
          });
        },
     //数据写入excel
        export2Excel() {
   
   
          require.ensure(