1、在vue中使用导入导出，需要下载3个依赖包和2个js包：
使用npm安装：
npm install -S file-saver xlsx
npm install -D script-loader
npm install xlsx
使用yarn安装：
yarn add file-saver
yarn add xlsx
yarn add script-loader --dev
2.在src目录下新建一个excel文件夹引入Blob.js和expor2Excal.js
这是获取这两个文件的百度网盘网址
3.在main.js中全局引用
import XLSX from 'xlsx'
Vue.use(XLSX)
4. 页面数据导出
4.1 在方法中加入这两个方法
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../../vendor/Export2Excel');// 这里 require 写你的Export2Excel.js的绝对地址
const tHeader = ['序号', 'IMSI', 'MSISDN', '证件号码', '姓名']; //对应表格输出的title
const filterVal = ['ID', 'imsi', 'msisdn', 'address', 'name']; // 对应表格输出的数据
const list = this.tableData;
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '列表excel'); //对应下载文件的名字
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
4.2 按钮导出调用export2Excel方法
<el-button type="primary" size="small" @click="export2Excel()">导出</el-button>
5. 数据导入
5.1 data中加入一个 outdata 数组
5.2 在methods中加入这个方法
importfxx (obj) {
let _this = this
// eslint-disable-next-line no-unused-vars
let inputDOM = this.$refs.inputer
// 通过DOM取文件数据
this.file = event.currentTarget.files[0]
var rABS = false // 是否将文件读取为二进制字符串
var f = this.file
var reader = new FileReader()
// if (!FileReader.prototype.readAsBinaryString) {
FileReader.prototype.readAsBinaryString = function (f) {
var binary = ''
var rABS = false // 是否将文件读取为二进制字符串
// eslint-disable-next-line no-unused-vars
var pt = this
var wb // 读取完成的数据
var reader = new FileReader()
reader.onload = function (e) {
var bytes = new Uint8Array(reader.result)
var length = bytes.byteLength
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i])
}
var XLSX = require('xlsx')
if (rABS) {
// eslint-disable-next-line no-undef
wb = XLSX.read(btoa(fixdata(binary)), { // 手动转化
type: 'base64'
})
} else {
wb = XLSX.read(binary, {
type: 'binary'
})
}
_this.outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])// outdata 数组里面 这里面就是你想要的数据
console.log(_this.outdata)
_this.$message({
message: '请耐心等待导入成功',
type: 'success'
})
}
reader.readAsArrayBuffer(f)
}
if (rABS) {
reader.readAsArrayBuffer(f)
} else {
reader.readAsBinaryString(f)
}
},
5.3 在页面上加入这个 a 标签
<a href="javascript:;" class="file">
<input id="upload" type="file" @change="importfxx(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
</a>
