Vue 导出功能
vue 导出excel表功能1.需要安装三个依赖:npm install -S file-saver xlsxnpm install -D script-loader2.项目中新建一个文件夹:(vendor—名字任取)里面放置两个文件Blob.js和 Export2Excel.js。下载点击Blob.js和 Export2Excel.js文件3.HTML部分:增加导出按钮<el-butto
·
导出分为两种情况的导出:
一种是在现有table表格通过纯前端手段导出,但只能导出当前页面的数据;
另一种是后台导出,分两种形式:{
A: get导出,后台给一个链接,前端直接window.location.href=“xxcvcvcvcvcvcvc?xc=1&id=23”
B: post导出,后台给一个bob文件流,前端接收之后处理完导出
}
HTML部分:导出按钮
<el-button type="primary" @click="exportTable()">导出Excel</el-button>
一、table表格导出当前页,纯前端实现
1.需要安装三个依赖:
npm install -S file-saver xlsx
npm install -D script-loader
2.项目中新建一个文件夹:(vendor—名字任取)
里面放置两个文件Blob.js和 Export2Excel.js。
下载点击Blob.js和 Export2Excel.js文件
4.methods里面:
exportTable() {
require.ensure([], () => {
const { export_json_to_excel } = require('../../../vendor/Export2Excel');
const tHeader = ['供应商编号', '供应商名称', '输入代码', '税务代码'];
const filterVal = ['num', 'name', 'words', 'shuiwu_num'];
const list = this.tableData;
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '供应商名称列表');
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
5.按钮导出调用export2Excel方法
注:如果webpack报解析错误:
在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor'),
即可解决
另:alias是配置别名
二、后台功能导出
A: get导出:
exportTable(){
window.location.href=config.getExcel+"?id=1&word='hello'"
}
B:post导出:
1、接口封装(index.js):
// 接收后台返回的文档流(下载功能接口)
export const export_salerCustomers = (data) => {
return axios.post(config.export_salerCustomers, createPostParams(data),{responseType:'blob'})
}
2、使用的页面直接使用:
exportTable(){
var _this = this;
export_salerCustomers(this.params).then(function (res) {
if(res.status == 200){
const content = res.data
const blob = new Blob([content])
const fileName = '销售客户清单.xlsx' //导出文件名称自定义
if ('download' in document.createElement('a')) { // 非IE下载
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
} else { // IE10+下载
navigator.msSaveBlob(blob, fileName)
}
}else{
_this.$message({
type: 'warning',
message: '导出失败'
})
}
})
}
更多推荐
已为社区贡献8条内容
所有评论(0)