需求，这样的页面 有多个table,如投标人名单结果那一列，返回的是1就是通过，返回的不是1就是不通过。如资格评审的横表头，评分说明后面的公司即都是数据接口返的，需要处理后才能放在表头这里的。如详细评审汇总 表头有合并，并且公司下面的专家人数也是不确定的。这样的页面，需要纯前端做单个table的导出，还要做所有table的导出即一键导出，导出后的内容在一个excel里面，有多个sheet页，这里主要记录一键导出。
上面三张图是需求，接下来是代码部分
oneClickExport是一键导出的点击事件
async oneClickExport() {
// 投标人名单
const sheetData1 = this.dataSourceBidder.map((item) => ({
投标人名称: item.tenderApplyName,
评审结果: item.result == ‘1’ ? ‘通过’ : ‘不通过’,
}))
// 评标委员会名单const sheetData2 = this.dataSourceCommittee.map((item) => ({评标委员会: item.ismain == '1' ? '主任委员' : '专家',姓名: item.expertname,工作单位: item.workplace,联系方式: item.phone,}))// // 资格评审const sheetData3 = this.dataSourceEligibility.map((item) => {let obj = {审查内容: item.trialname,评分说明: item.trialstandard,}// 单独拿出投标人信息const itemObj = { ...item }delete itemObj.trialnamedelete itemObj.trialstandard// 匹配投标人信息并获取其结果Object.keys(itemObj).forEach((key) => {let temporaryObj = this.columnsEligibility.filter((columnItem) => columnItem.dataIndex == key)[0]obj[temporaryObj.title] = item[temporaryObj.dataIndex].children[0].text})return { ...obj }})// // 形式评审与响应性评审const sheetData4 = this.dataSourcePreliminaryReview.map((item) => {let obj = {审查内容: item.trialname,评分说明: item.trialstandard,}// 单独拿出投标人信息const itemObj = { ...item }delete itemObj.trialnamedelete itemObj.trialstandard// 匹配投标人信息并获取其结果Object.keys(itemObj).forEach((key) => {let temporaryObj = this.columnsPreliminaryReview.filter((columnItem) => columnItem.dataIndex == key)[0]obj[temporaryObj.title] = item[temporaryObj.dataIndex].children[0].text})return { ...obj }})// 详细评审汇总(调用子组件方法获取处理后的数据)let sheetData5, mergesXXPS//（补充： 这里是取子页面pbGradeSum的子页面xxpsSum的方法来获取数据）await this.$refs.pbGradeSum.$refs.xxpsSum.handleExportData('xxps').then((res) => {sheetData5 = res.arrayDatamergesXXPS = res.mergesAry})// // 技术标汇总let sheetData6, mergesJSPSawait this.$refs.pbGradeSum.$refs.xxpsSum.handleExportData('jsps').then((res) => {sheetData6 = res.arrayDatamergesJSPS = res.mergesAry})// // 商务标汇总let sheetData7, mergesSWPSawait this.$refs.pbGradeSum.$refs.xxpsSum.handleExportData('swps').then((res) => {sheetData7 = res.arrayDatamergesSWPS = res.mergesAry// 此处为了解决一键导出后，tabs页数据不正确，重新回滚至tab1并加载数据this.$refs.pbGradeSum.activeKey = '1'this.$nextTick(() => {this.$refs.pbGradeSum.getPsStatus().then((res) => {this.$refs.pbGradeSum.$refs.xxpsSum.listUrl ='这里是接口----'this.$refs.pbGradeSum.$refs.xxpsSum.scoreType = res.result.statisticTypethis.$refs.pbGradeSum.$refs.xxpsSum.psProcess = 'xxps'this.$refs.pbGradeSum.$refs.xxpsSum.dataSource = []this.$refs.pbGradeSum.$refs.xxpsSum.getCbpsData('xxps')})})})// 修正报价const sheetData8 = this.dataSourceRevisedQuotation.map((item) => ({投标人名称: item.tenderApplyName,投标报价: item.oldBidPrice,评标价: item.bidPrice,评标基准价: item.standardprice,}))// 评标价计算评审表const sheetData9 = this.dataSourceEvaluationPrice.map((item) => ({投标人名称: item.tenderApplyName,投标报价: item.oldBidPrice,评标价: item.bidPrice,投标控制价上限: item.bidpricelimit,评标基准价: item.standardprice,偏差率: item.deviationRate,评标价得分: item.priceGrade,}))// 综合得分汇总const sheetData10 = this.dataSourceComprehensiveSummary.map((item) => ({投标人名称: panyname,综合得分: item.point,排序: item.sort,预期中标价: item.bidPrice,}))//这里就比较好理解 把每一个table数据分别塞入每个sheet里const sheet1 = XLSX.utils.json_to_sheet(sheetData1)const sheet2 = XLSX.utils.json_to_sheet(sheetData2)const sheet3 = XLSX.utils.json_to_sheet(sheetData3)const sheet4 = XLSX.utils.json_to_sheet(sheetData4)const sheet5 = XLSX.utils.aoa_to_sheet(sheetData5)const sheet6 = XLSX.utils.json_to_sheet(sheetData6)const sheet7 = XLSX.utils.json_to_sheet(sheetData7)const sheet8 = XLSX.utils.json_to_sheet(sheetData8)const sheet9 = XLSX.utils.json_to_sheet(sheetData9)const sheet10 = XLSX.utils.json_to_sheet(sheetData10)const wb = XLSX.utils.book_new()// 这里是给每一个sheet设置对应的名称XLSX.utils.book_append_sheet(wb, sheet1, '投标人名单')XLSX.utils.book_append_sheet(wb, sheet2, '评标委员会名单')XLSX.utils.book_append_sheet(wb, sheet3, '资格评审')XLSX.utils.book_append_sheet(wb, sheet4, '形式评审与响应性评审')XLSX.utils.book_append_sheet(wb, sheet5, '详细评审汇总')XLSX.utils.book_append_sheet(wb, sheet6, '技术标汇总')XLSX.utils.book_append_sheet(wb, sheet7, '商务标汇总')XLSX.utils.book_append_sheet(wb, sheet8, '修正报价')XLSX.utils.book_append_sheet(wb, sheet9, '评标价计算评审表')XLSX.utils.book_append_sheet(wb, sheet10, '综合得分汇总')//#region 对多级表头进行单元格合并wb.Sheets['详细评审汇总']['!merges'] = mergesXXPSwb.Sheets['技术标汇总']['!merges'] = mergesJSPSwb.Sheets['商务标汇总']['!merges'] = mergesSWPS//#endregionconst workbookBlob = this.workbook2blob(wb)// 这里是给这个文件设置一个总的名称this.openDownloadDialog(workbookBlob, '汇总.xlsx')},上面的代码是争对表格的数据的处理下面的都是导出内部的处理 可直接复制粘贴去用// 将workbook装化成blob对象workbook2blob(workbook) {// 生成excel的配置项var wopts = {// 要生成的文件类型bookType: 'xlsx',// 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性bookSST: false,// 二进制类型type: 'binary',}var wbout = XLSX.write(workbook, wopts)var blob = new Blob([this.s2ab(wbout)], {type: 'application/octet-stream',})return blob},// 将字符串转ArrayBuffers2ab(s) {var buf = new ArrayBuffer(s.length)var view = new Uint8Array(buf)for (var i = 0; i != s.length; ++i) {view[i] = s.charCodeAt(i) & 0xff}return buf},// 将blob对象创建bloburl，然后用a标签实现弹出下载框openDownloadDialog(blob, fileName) {if (typeof blob == 'object' && blob instanceof Blob) {blob = URL.createObjectURL(blob) // 创建blob地址}var aLink = document.createElement('a')aLink.href = blob// HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效aLink.download = fileName || ''var eventif (window.MouseEvent) event = new MouseEvent('click')// 移动端else {event = document.createEvent('MouseEvents')event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)}aLink.dispatchEvent(event)URL.revokeObjectURL(blob)},最后导出的效果如下
完美结束！！
