Vue+Element对Excel表导入和导出
1.安装依赖包
npm install -S file-saver xlsx
npm install -D script-loader
2.引入js文件Blob.js和Export2Excel.js
可以将Blob.js和Export2Excel.js两个文件放入src/assests/js中如图所示,(注:这两个js文件在文章末尾)
3.导出
(1)导出按钮
<el-button type="success" icon="el-icon-download" @click="exportToExcel">导出</el-button>
(2)导出方法
// 导出
// 定义导出Excel表格事件
exportToExcel () {
/* 从表生成工作簿对象 */
// var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
// /* 获取二进制字符串作为输出 */
// var wbout = XLSX.write(wb, {
// bookType: "xlsx",
// bookSST: true,
// type: "array"
// });
// try {
// FileSaver.saveAs(
// //Blob 对象表示一个不可变、原始数据的类文件对象。
// //Blob 表示的不一定是JavaScript原生格式的数据。
// //File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
// //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
// new Blob([wbout], { type: "application/octet-stream" }),
// //设置导出文件名称
// "导出表格.xlsx"
// );
// console.log("wbout:", wbout);
// } catch (e) {
// if (typeof console !== "undefined")
// console.log(e, wbout);
// }
// return wbout;
this.$confirm('确定下载列表文件?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.excelData = this.tableData // 你要导出的数据list。
this.export2Excel()
}).catch(() => {})
},
export2Excel () {
var that = this
require.ensure([], () => {
const { export_json_to_excel } = require('@/assets/js/Export2Excel.js')// js文件的位置
const tHeader = ['序号', '姓名', '成绩']
const filterVal = ['index', 'name', 'score'] // 导出的表头字段名,需要导出表格字段名
const list = that.tableData
const data = that.formatJson(filterVal, list)
export_json_to_excel(tHeader, data, '成绩表')// 导出的表格名称,根据需要自己命名
})
},
formatJson (filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
4.导入
(1)导入按钮
<el-button type="warning" icon="el-icon-upload2" @click="uploadDialog=true">导入</el-button>
(2)导入的对话框
<el-dialog title="上传文件" :visible.sync="uploadDialog" class="eldialog" width="30%" @close="closeDialog">
<el-form id="addForm" ref="addForm" class="eldialogForm">
<el-form-item label>
<el-upload
ref="upload"
class="upload-demo"
drag
action=""
:on-change="handleChange"
:on-exceed="handleExceed"
:on-remove="handleRemove"
:file-list="fileListUpload"
:limit="limitUpload"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
:auto-upload="false"
>
<i class="el-icon-upload" />
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传</em>
</div>
<!-- <div slot="tip" class="el-upload__tip">只能上传Excel文件,且不超过500