Excel文件导出成功图片

依赖安装 ​

1
2
3
npm install -S file-saver
npm install -S xlsx
npm install -D script-loader

-S、-D具体意义如下：

-S => --save
-D => --save-dev

这里具体使用什么方法安装依赖，请以实际的开发环境为准

创建(下载) Export2Excel 文件 ​

这个文件没在npm、github等开源社区很难找到，所以在其它社区上找的文件引入项目中(亲测可用)。 Export2Excel.js (复制demo中的Export2Excel.js代码保存到项目static文件夹下，可根据自己的习惯保存路径) 在这里我已经整理出 Export2Excel.js和Blob.js

项目中使用 ​

一下Demo片段为我演示的项目，其路径以实际项目环境为准
在项目components文件夹下新建excel文件夹，放入前边下载好的Export2Excel.js和Blob.js两个文件。如果Export2Excel.js和Blob.js文件不在同一文件夹类，请记得修改Export2Excel.js中引入的Blob.js文件路径。 在项目中的公共方法文件(util.js)中添加一下代码片段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 导出的方法  tHeader => 设置Excel的表格第一行的标题  filterVal => 对象的属性key值 被导出listData => 导出数据  => 导出(文件)名称

export function outExportExcel(tHeader = [], filterVal = [], listData = [], exportName = new Date().getTime()) {
    require.ensure([], () => {
        // 注意这个Export2Excel路径
        const { export_json_to_excel } = require('@/components/excel/Export2Excel');
        const data = formatJson(filterVal, listData);
        export_json_to_excel(tHeader, data, exportName);
    });
}

function formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]))
}

需要导出表格页面中添加一下代码片段

HTML

1
<button @click="handeleOutExportExcel" class="export-btn" size="mini" type="primary">导出数据</button>

VUE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 引入上文中公众文件方法中的导出功能，注意文件路径
import { outExportExcel } from '@/common/util';
export default {
    data() {
        return {
           tableData: []
        }
    },
    created() {
      // ..... 从后端请求表格数据
    },
    methods: {
        handeleOutExportExcel() {
            const { tableData } = this;
            const tableHeader = ['学号', '姓名', '语文成绩'];
            const tableKey = ['number', 'name', 'grade'];

            // 这里是业务逻辑
        }
    }
};

在这里我们赶紧点击页面中的导出按钮吧，见证奇迹的时刻就要到来。 导出后的文件如下图所示，说明前端使用Export2Excel导出Excel文件成功，不然就从头再来一遍

Excel文件导出成功图片

更多详细请阅读 https://www.lancema.com/life-category/study/3