引入包
npm install xlsx -S // 发文时间是 0.16.9 这个版本
新建excel.js
src文件夹下新建一个libs文件夹,新建一个excel.js
import XLSX from 'xlsx'
function autoWidthFunc (ws, data) {
// set worksheet max width per col
const colWidth = data.map(row => row.map(val => {
var reg = new RegExp("[\\u4E00-\\u9FFF]+","g");//检测字符串是否包含汉字
if (val == null) {
return { wch: 10 }
} else if (reg.test(val)) {
return { wch: val.toString().length * 2 }
} else {
return { wch: val.toString().length }
}
}))
// start in the first row
const result = colWidth[0]
for (let i = 1; i < colWidth.length; i++) {
for (let j = 0; j < colWidth[i].length; j++) {
if (result[j].wch < colWidth[i][j].wch) {
result[j].wch = colWidth[i][j].wch
}
}
}
ws['!cols'] = result
}
function jsonToArray (key, jsonData) {
return jsonData.map(v => key.map(j => { return v[j] }))
}
const exportArrayToExcel = ({ key, data, title, filename, autoWidth }) => {
const wb = XLSX.utils.book_new()
const arr = jsonToArray(key, data)
arr.unshift(title)
const ws = XLSX.utils.aoa_to_sheet(arr)
if (autoWidth) {
autoWidthFunc(ws, arr)
}
XLSX.utils.book_append_sheet(wb, ws, filename)
XLSX.writeFile(wb, filename + '.xlsx')
}
export default {
exportArrayToExcel
}
vue页面
import excel from '@/libs/excel'
export default {
data () {
return {
dataList: [{ // dataList中的字段 title,key 需要一一对应
'app_id': '1',
'app_source': '淘宝',
'cars': '666666'
},
{
'app_id': '2',
'app_source': '京东',
'cars': '666667'
}]
}
},
methods: {
// 页面上有个按钮 点击调用exportExcel
exportExcel () {
const params = {
title: ['订单号', '订单来源', '车牌号'],
key: ['app_id', 'app_source', 'cars'],
data: this.dataList, // 数据源
autoWidth: true, //autoWidth等于true,那么列的宽度会适应那一列最长的值
filename: '清单'
}
excel.exportArrayToExcel(params)
}
}
}
效果展示
参考文档
总结
通过上述简单的步骤就可以实现纯前端导出excel. 有需要的小伙伴可以先马后看