一,安装
npm install -S file-saver xlsx
npm install -D script-loader
二,导入Excel
1,Element 上传控件
<el-uploadaction="/":on-change="onChange":auto-upload="false":show-file-list="false"accept=".xls, .xlsx":style="{'float': 'left'}"><el-button size="small" type="primary">选择文件</el-button></el-upload>
onChange(file, fileList) {// 调用读取数据的方法let res = this.TableDatalet num = this.totalreadExcel(file, res, num)setTimeout(res => {this.total = this.TableData.length }, 300) },
import XLSX from 'xlsx'
//读取文件数据
// 参数:读取的文件, 已有数据列表, 已有数据的数量
export function readExcel(files, outputs, num) {if (!files) {//如果没有文件return false;} else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {this.$message.error("上传格式不正确,请上传xls或者xlsx格式");return false;}let number = 0const fileReader = new FileReader();fileReader.onload = ev => {try {const data = ev.target.result;const workbook = XLSX.read(data, {type: "binary"});//导入的文件名称const wsname = workbook.SheetNames[0]; //取第一张表const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容number = num + ws.length// 存放表头字段let tableHeader = []for (let val in outputs[0]) {tableHeader.push(val)}// 追加文件内的内容到 outputsfor (let i = 0; i < ws.length; i++) {var sheetData = {}for (let j=0; j<tableHeader.length; j++) {sheetData[tableHeader[j]] = ws[i][tableHeader[j]];}outputs.push(sheetData);}// console.log("outputs", outputs) }catch (e) {console.log(e);return false;}};// 如果为原生 input 则应是 files[0]fileReader.readAsBinaryString(files.raw);setTimeout(res => {return number},10)}
三,导出Excel
1,将其中的2个JS文件放入到自己的工程中。
这几个文件不支持import引入,所以需要script-loader来将他们挂载到全局环境下
2,导出函数
export function getExcel(res) {// res 是需要导出的列表[{},{}]require.ensure([], () => {const { export_json_to_excel } = require('./Export2Excel')// 获取全部字段名 作为表头const filterVal = []const tHeader = []for(let key in res[0]){filterVal.push(key)tHeader.push(key)}// tHeader为导出Excel表头名称const data = res.map(v => filterVal.map(j => v[j]))// TableData 即为导出Excel名称export_json_to_excel(tHeader, data, 'TableData')})
}
这里的引用请根据自己的层级关系和文件夹命名require(’…/…/introduce/Export2Excel.js’)
res为传入的数组,格式如:res =[{name:‘小白’,age:‘18’},{name:‘小黑’,age:‘16’}]
tHeader为导出Excel表头名称,导出列表名称即为导出Excel名称
下载的Excel位置根据浏览器设置的下载位置而定