前言
👨💻👨🌾📝记录学习成果,以便温故而知新
链接: xlsx官网
讲实话,文档可能不是专门针对VUE写的,所以只能说一般般
一、安装组件
cnpm install xlsx
用上面的安装方法,安装的版本如文档所说:
The latest version on that registry is 0.18.5
npm rm --save xlsx
npm i --save https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz
文档中介绍的安装方法,貌似安装的是现在写文章时的最新版本。不过没有试过文档中的安装方法。
二、导出
1.引入组件
import { utils, writeFile } from 'xlsx';
2.导出代码
(1)导出数组
代码:
onExportArray(){
const data = [
['姓名', '年龄'],
['Alice', 20],
['Bob', 25],
['Charlie', 30]
]
const ws = utils.aoa_to_sheet(data)
const wb = utils.book_new()
utils.book_append_sheet(wb, ws, 'Sheet1')
writeFile(wb, 'data.xlsx')
},
Excel效果:
(2)导出JSON
代码:
data () {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
}
},
onExportJson(){
const ws = utils.aoa_to_sheet([['日期', '姓名', '地址']])
utils.sheet_add_json(ws, this.tableData, {skipHeader: true, origin: "A2"});
const wb = utils.book_new()
utils.book_append_sheet(wb, ws, 'Sheet1')
writeFile(wb, 'data.xlsx')
}
Excel效果:
三、导入
1.引入组件
import { read, utils } from 'xlsx';
2.导入代码
代码:
<div>
<el-upload
class="upload-demo"
action=""
:before-upload="upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</div>
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }?`);
},
upload(file, fileList) {
let files = { 0: file };
this.readExcel1(files);
},
readExcel1(files) {
// 如果没有文件名
if (files[0].name.length <= 0) {
return;
}
if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
this.$message.error('上传格式不正确,请上传xls或者xlsx格式');
return;
}
const fileReader = new FileReader();
fileReader.onload = ev => {
try {
const data = ev.target.result;
const workbook = read(data, {
type: 'binary',
});
// 取第一张表
const wsname = workbook.SheetNames[0];
// 生成json表格内容
const ws = utils.sheet_to_json(workbook.Sheets[wsname]);
console.log(ws);
// 后续数据的处理
} catch (e) {
return false;
}
};
fileReader.readAsBinaryString(files[0]);
}
}
控制台打印导入效果: