vue前端怎么导出图片_vue前端实现导出表格

首先安装两个依赖

1.npm install -S file-saver xlsx

2.npm install -D script-loader

将这两个文件加入项目中，新建一个文件夹，我这里叫vendor

image.png

在项目目录下的build下的 webpack.base/conf.js这个webpack的配置文件中的

resolve的alias中加入：

'vendor':path.resolve(__dirname,'../src/views/account/vendor'), 此处路径写你自己真实的文件路径

vue3.0以上的项目放在

image.png

image.png

路径一定要正确，不然等会儿启动项目会报错

接下来写点击事件 在导出的按钮上绑定个点击事件

首先要去调后台接口获取这些数据，这个事件就不写了。

下面是生成表格的方法，在拿到后台数据后调用此方法即可

methods: {

export2Excel() {

require.ensure([], () => {

const { export_json_to_excel } = require('vendor/Export2Excel');

const tHeader =

['账单名称', '订单编号', '交易编号','交易类型',

'交易方式','交易金额','交易前金额', '交易后金额'

]; //创建表头

const filterVal =

['transactionName', 'orderNum','transactionNum','transactionTypeName',

'payType','payPrice', 'transactionFrontPrice', 'transactionAftertPrice',

]; //这里是和表头对应的内容的字段，要和后台返回的数据的字段对应上

const list = this.exportList; //这是从后台拿到的数据

const data = this.formatJson(filterVal, list);

export_json_to_excel(tHeader, data, '**报表'); //三个参数，表头，经过排序后的数据，表格的名字

})

},

formatJson(filterVal, jsonData) {

return jsonData.map(v => filterVal.map(j => v[j]))

},

}