vue中上传读取及下载excel文件
准备工作1、安装依赖包npm install -S file-saver (-S用于生产环境)npm install -S xlsxnpm install -D script-loader (-D用于开发环境)2、引入文件导出excel需要两个文件:Blob.js和Export2Excel.js链接:https://pan.baidu.com/s/137U5xaym8...
准备工作
1、安装依赖包
npm install -S file-saver (-S用于生产环境)
npm install -S xlsx
npm install -D script-loader (-D用于开发环境)
2、引入文件
导出excel需要两个文件:Blob.js和Export2Excel.js
链接:https://pan.baidu.com/s/137U5xaym8htX_q2AaVt6Mw 提取码:xue9
在src下新建目录vendor,将Blob.js和Export2Excel.js放进去,修改Export2Excel.js文件内容,下列语句表示引入Blob.js,注意修改为自己工程中Blob.js对应的路径,
require('script-loader!vendor/Blob')
或者,在webpack.base.conf.js中指定vendor的路径,
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'vendor': path.resolve(__dirname, '../src/vendor')
}
下载
下载使用Export2Excel.js的export_json_to_excel函数实现
先写一个按钮,给一个click事件
<template>
<div class="excelDiv">
<el-button @click="download">下载</el-button>
<div id="fileselect">
<el-input style="margin-top: 16px" type="file"></el-input>
</div>
</div>
</template>
准备表格数据
table: [{
id: 1,
name: '测试1',
age: 21
}, {
id: 2,
name: '测试2',
age: 22
}, {
id: 3,
name: '测试3',
age: 23
}],
download函数
download: function () {
var tHeader = ['id', '姓名', '年龄'] // excel的表头标题
var filterVal = ['id', 'name', 'age'] // 需要导出对应自己列表中的每项数据
var list = this.table // 列表数据
var data = this.formatJson(filterVal, list)
export_json_to_excel(tHeader, data, 'excelname')
}
其中export_json_to_excel(tHeader, data, ' excelname')是简写形式,对应的参数是
excel.export_json_to_excel({
header: tHeader,
data,
filename: 'excelname' // 文件名称,若不写导出文件可能不识别
})
formatJson函数
// 在整个列表的数据中过滤导出自己需要的数据
formatJson (filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
上传读取
上传用input的type=”file”实现,读取用FileReader,用xlsx的utils.sheet_to_json方法将读取到的内容转换成json数据,我们就可以就行下一步处理了。
mounted: function () {
this.$nextTick(function () {
this.readFile()
})
},
// 导入设备,监听上传文件并读取
readFile: function () {
let fileselect = document.querySelector('#fileselect')
fileselect.addEventListener('change', function (e) {
event.preventDefault()
let file = e.target.files
if (file.length <= 0) { // 如果没有文件名
return
} else if (!/\.(xls|xlsx)$/.test(file[0].name.toLowerCase())) {
this.$message({
type: 'info',
message: '上传格式不正确,请上传xls或者xlsx格式'
})
return
}
let reader = new FileReader()
if (typeof FileReader === 'undefined') {
this.$message({
type: 'info',
message: '您的浏览器不支持FileReader接口'
})
return
}
reader.readAsBinaryString(file[0])
reader.onload = function (e) {
try {
var data = e.target.result
var workbook = XLSX.read(data, { type: 'binary' })
var wsname = workbook.SheetNames[0] // 取第一张表
var ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) // 生成json表格内容 }
catch (e) {
return false
}
}
}.bind(this))
}
注意XLSX需要引入
import XLSX from 'xlsx'
在读取上传文件之前先判断是不是excel文件,主要通过后缀是否为‘xls’或者‘xlsx’来判断,判断方法有多种,我列出了三种方式以供参考,首先通过e.target.files[0].name获取上传文件的名称然后判断
1、分割字符串
let arr = e.target.files[0].name.split('.')
if (arr[1] !== 'xls' && arr[1] !== 'xlsx') {
this.$message('上传格式不正确,请上传xls或者xlsx格式')
return
}
2、正则校验
!/\.(xls|xlsx)$/.test(e.target.files[0].name.toLowerCase())
3、lastIndexOf() 方法检索字符串
e.target.files[0].name.lastIndexOf(".xls") > 0 || e.target.files[0].name.lastIndexOf(".xlsx") > 0
需要注意
ESLint语法会报错Identifier 'export_json_to_excel' is not in camel case,不影响功能。
更多推荐
所有评论(0)