1 前言
1.1 业务场景
由前台导入 Excel 表格, 获取批量数据.
根据一个数组导出 Excel 表格.
2 实现原理
2.1 引入工具库
- file-saver,xlsx,script-loader
- NPM install -S file-saver xlsx
- NPM install -D script-loader
2.2 导入 Excel
2.2.1 Element 上传控件
image
- <el-upload
- class="upload-demo"
- 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">
- <el-button size="small" type="primary"> 点击上传 </el-button>
- <div slot="tip" class="el-upload__tip"> 只 能 上 传 xlsx / xls 文 件 </div>
- </el-upload>
limitUpload = 1 限制只能上传 1 个文件
accept 为默认打开的可上传的文件格式
- handleChange(file, fileList){
- this.fileTemp = file.raw
- },
- handleRemove(file,fileList){
- this.fileTemp = null
- },
fileTemp 这里定义了一下变量, 指向最新上传的附件, 起始定义为 null.
这里发现控件 file.raw 是我们要用的 File 类型.
2.2.2 导入判断
- if(this.fileTemp){
- if((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') || (this.fileTemp.type == 'application/vnd.ms-excel')){
- this.importfxx(this.fileTemp)
- } else {
- this.$message({
- type:'warning',
- message:'附件格式错误, 请删除后重新上传!'
- })
- }
- } else {
- this.$message({
- type:'warning',
- message:'请上传附件!'
- })
- }
2.2.3 导入函数
- importfxx(obj) {
- let _this = this;
- // 通过 DOM 取文件数据
- this.file = obj
- 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; // 是否将文件读取为二进制字符串
- var pt = this;
- var wb; // 读取完成的数据
- var outdata;
- 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) {
- wb = XLSX.read(btoa(fixdata(binary)), { // 手动转化
- type: 'base64'
- });
- } else {
- wb = XLSX.read(binary, {
- type: 'binary'
- });
- }
- outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//outdata 就是你想要的东西
- this.da = [...outdata]
- let arr = []
- this.da.map(v => {
- let obj = {}
- obj.code = v['设备 ID']
- obj.type = v['设备型号']
- arr.push(obj)
- })
- return arr
- }
- reader.readAsArrayBuffer(f);
- }
- if(rABS) {
- reader.readAsArrayBuffer(f);
- } else {
- reader.readAsBinaryString(f);
- }
- },
arr 就是我们要的结果, 是一个数组. 每一个值是个对象, 包含了 code type 两个属性.
Excel 中格式为横向 设备 ID 和 设备型号.
2.3 导出 Excel
2.3.1 引入 JS 文件
可参考下载地址:- GitHub
将其中的 2 个 JS 文件放入到自己的工程中.
2.3.2 修改 JS 文件中地址
image
打开 Export2Excel.JS, 会出现如上图所示. 由于本人将 Blob.JS 和 Export2Excel.JS 放到了同一级, 这里引入是这样的.
这几个文件不支持 import 引入, 所以需要 script-loader 来将他们挂载到全局环境下.
2.3.3 导出函数
- getExcel(res) {
- require.ensure([], () => {
- const { export_json_to_excel } = require('../../introduce/Export2Excel.js')
- const tHeader = ['姓名', '年龄']
- const filterVal = ['name', 'age']
- const list = res
- const data = this.formatJson(filterVal, list)
- export_json_to_excel(tHeader, data, '导出列表名称')
- })
- },
- formatJson(filterVal, jsonData) {
- return jsonData.map(v => filterVal.map(j => v[j]))
- },
这里的引用请根据自己的层级关系和文件夹命名 require('../../introduce/Export2Excel.js')
res 为传入的数组, 格式如: res =[{name:'小白',age:'18'},{name:'小黑',age:'16'}]
tHeader 为导出 Excel 表头名称, 导出列表名称即为导出 Excel 名称
下载的 Excel 位置根据浏览器设置的下载位置而定
3 后记
感谢支持. 若不足之处, 欢迎大家指出, 共勉.
如果觉得不错, 记得 点赞 , 谢谢大家
- www.cnblogs.com/liguiwang..
- www.cnblogs.com/qiu...
来源: http://www.jianshu.com/p/331c0e8164e9