【vue】导出excel

文章目录

vue导出excel表格
- 方式一：前端导出
- 方式二：后端导出

vue导出excel表格

前端导出excel：就用 vue+XLSX（npm 包）

后端导出excel：就用 vue+POI（maven 包）

对比
前端导出excel 相对来说简单一点，XLSX是前端 npm 包，但是如果数据量大的话，会卡顿，处理时间慢；当数据量多的时候使用后端导出会好一点
后端导出excel 相对来说麻烦一点，但是时间短、速度快；具体操作都放在后端，也节省了前端的操作。用户效果好。

方式一：前端导出

安装

npm install vue-json-excel -S

main.js中引入

js 复制代码

    import JsonExcel from 'vue-json-excel'
    Vue.component('downloadExcel', JsonExcel)

在代码中使用
js 复制代码
```
     <template>
```

导出

```

修改配置参数

js 复制代码

    title: "xx公司表格",
    json_fields: {
            "排查日期":'date',
            "整改隐患内容":'details',
            "整改措施":'measure',
            "整改时限":'timeLimit',
            "应急措施和预案":'plan',
            "整改责任人":'personInCharge',
            "填表人":'preparer',
            "整改资金":'fund',
            "整改完成情况":'complete',
            "备注":'remark',
        },
        DetailsForm: [
            {
            date: "2022-3-10",
            details: "卸油区过路灯损坏",
            measure: "更换灯泡",
            timeLimit: "2022-3-21",
            plan: "先使用充电灯代替,贴好安全提醒告示",
            personInCharge: "王xx",
            preparer: "王xx",
            fund: "20元",
            complete: "已完成整改",
            remark: "重新更换了灯泡",
            },
   
  ],

方式二：后端导出

后端写好的 excel就直接write到 response里面
1.按钮事件

html 复制代码

<el-button size="small" type="primary" @click="exportAllExcel">导出全部</el-button>

2.网络请求封装

// 导出全部

javascript 复制代码

export function exportExcelForMatchUser(data) {
  return fetch({
    url: '/xfx/matchUser/web/exportExcelForMatchUser',
    method: 'post',
    timeout: '120000',
    responseType: 'blob',
    data
  });
}

3.js方法：导出全部exportAllExcel

javascript 复制代码

      // 导出 所有
  exportAllExcel() {
    this.$confirm("是否确认导出全部参赛人员数据?", "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(response => {
      exportExcelForMatchUser().then(response => {
        const data = "参赛人员web.xlsx";
        console.log('1111111111111111111111111', JSON.stringify(response))
        let blob = new Blob([response.data], {type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8"});
        console.log('333333333333333333333333', JSON.stringify(blob))
        // for IE
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveOrOpenBlob(blob, data);
        } else {
          console.log('chrome go here ')
          let downloadElement = document.createElement('a');
          let href = window.URL.createObjectURL(blob); // 创建下载的链接
          downloadElement.href = href;
          downloadElement.download = data; // 下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); // 点击下载
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
        }
      }).catch(err => {
        console.log(err)
        this.loading = false;
        this.$message.warning("对不起，下载失败");
      });
    })
  },

参考博客