Vue + ElementUI 导出Excel表格数据

Author： JiuyeXD
发布时间：April 1, 2021
476 views
No comments
1092 words
Categories：技术杂谈

1. 安装两个依赖

```javascript has-numbering
npm install --save xlsx file-saver
```

2.给需要导出的表格添加

```javascript has-numbering
id="out-table"
```

![image.png](https://old.qwq.ro/usr/uploads/2021/04/1738399783.png)

3.组件里头引入插件

```javascript has-numbering
import FileSaver from "file-saver";
import XLSX from "xlsx";
```

![image.png](https://old.qwq.ro/usr/uploads/2021/04/4190954049.png)

4.编写导出方法

```javascript
    /** 导出为Excel */
    exportExcel() {
      /* 导出时使用原始格式，解决身份证手机号导出时变为科学计数法 */
      let xlsxParam = {raw:true}
      /* out-table关联表生成工作簿对象  */
      let wb = XLSX.utils.table_to_book(document.querySelector("#out-table"),xlsxParam);
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb,
        { bookType: 'xlsx',
          bookSST: true,
          type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }),
          //设置导出文件名称
          '卸点统计结算.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    },
```

Last modification：May 28, 2021