Vue 导出功能

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

一种是在现有table表格通过纯前端手段导出，但只能导出当前页面的数据；
另一种是后台导出，分两种形式：{
A: get导出，后台给一个链接，前端直接window.location.href=“xxcvcvcvcvcvcvc?xc=1&id=23”
B: post导出，后台给一个bob文件流，前端接收之后处理完导出
}

HTML部分：导出按钮

导出Excel

---

一、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: '导出失败'
	     })
	   }
	 })
}