vue前端怎么导出图片-ag凯发k8国际

首先安装两个依赖

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]))

},

}

总结

以上是ag凯发k8国际为你收集整理的vue前端怎么导出图片_vue前端实现导出表格的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错，欢迎将ag凯发k8国际推荐给好友。