正文
纯前端实现数据导出excel文件
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一 安装依赖
npm install -S file-saver xlsx
npm install -D script-loader
二 新建文件夹
在网上百度引入即可
三 在main.js中引入
import Blob from './vendor/Blob.js'
import Export2Excel from './vendor/Export2Excel.js'
（pass：注意路径和文件名是否一致）
四 webpack.base.conf.js做如下修改：
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'scss_vars': '@/styles/vars.scss',
'excel': path.resolve(__dirname, '../src/excel'),//新增加一行***
}
},
五 项目中使用
html：
<el-button type="primary" @click="outexcel">导出Excel</el-button>
js：
outexcel(){
this.$confirm('此操作将导出excel文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// this.excelData = this.canhuiList //你要导出的数据list。
console.log(this.canhuiList)
this.export2Excel()
}).catch(() => { });
}, formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../../vendor/Export2Excel');
const tHeader = ['会议标题','大区中心','客户名称','姓名','设备型号','版本','加入时间','离开时间','参会时长',];
const filterVal = ['meetingTitle', 'areaName', 'customName', 'name', 'deviceModel', 'deviceAppVersion','joinTime','leaveTime','joinTimeLong', ];
const list = this.canhuiList;
const data = this.formatJson(filterVal, list);
const autoWidth=true
export_json_to_excel(tHeader, data, '参会记录Excel');
})
},
pass：list是你的数据数组，
tHeader 是你的表头
filterVal 是你对应的参数名（一一对应）
祝你好运QWQ
