1. Primero importa el paquete
npm install xlsx -S
2. Después de crear la carpeta de exportación en src, cree una carpeta libs en la carpeta de exportación, luego agregue el archivo libs para crear un archivo excel.js y complete el código
import * as 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
}
3. Cree el archivo exportXls.vue
<template>
<div>
<button @click="exportExcel">导出</button>
</div>
</template>
<script>
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)
}
}
}
</script>
<style>
</style>