导出分为两种情况的导出:

一种是在现有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: '导出失败'
	     })
	   }
	 })
}
Logo

前往低代码交流专区

更多推荐