交互式网站app南宁网站优化
首先在根目录下建一个文件夹export用来存储export.js
import * as XLSX from 'xlsx'function autoWidthFunc(ws, data) {// 设置每列的最大宽度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 }}}))// 初始化第一行的列宽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 => v[j]))
}// 新增：按指定字段分组
function groupByField(data, field) {const groupedData = {}data.forEach(item => {const fieldValue = item[field] || '未分类' // 如果字段值为空，默认归为 "未分类"if (!groupedData[fieldValue]) {groupedData[fieldValue] = []}groupedData[fieldValue].push(item)})return groupedData
}const exportArrayToExcel = ({ key, data, title, filename, autoWidth, groupBy }) => {const wb = XLSX.utils.book_new()// 按指定字段分组const groupedData = groupByField(data, groupBy)// 遍历分组数据，为每个分组创建一个 sheetObject.keys(groupedData).forEach(groupName => {const arr = jsonToArray(key, groupedData[groupName])arr.unshift(title) // 添加标题行const ws = XLSX.utils.aoa_to_sheet(arr)if (autoWidth) {autoWidthFunc(ws, arr)}// 将 sheet 添加到工作簿中，sheet 名称为分组字段值XLSX.utils.book_append_sheet(wb, ws, groupName)})// 导出 Excel 文件XLSX.writeFile(wb, filename + '.xlsx')
}export default {exportArrayToExcel
}
在页面中引入使用
import excel from '../../export/export'exportExcel() {const params = {title: ['入库单号', '物料编码', '物料名称', '供应商代码', '生产日期', '批次信息', '单托重量', '入库时间'], // 表格titlekey: ['WarehouseEntryNnumber', 'MaterialCode', 'MaterialName', 'SupplierCode', 'DateofManufacture', 'DatchInformation', 'SingleTowingWeight', 'StorageTime'], // prop绑定的键值data: this.tableData, // 数据源autoWidth: true, // autoWidth等于true，那么列的宽度会适应那一列最长的值filename: '入库管理',groupBy: 'MaterialName' // 指定分组字段 根据MaterialName来区分sheet}excel.exportArrayToExcel(params)this.$message({message: '请稍等,正在导出为excel表格',type: 'success'})},导出结果：
