纯前端导出export，复杂表格表头合并，表头数据部分动态，

需求，这样的页面有多个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) => ({投标人名称: item.companyname,综合得分: 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
},
// 将字符串转ArrayBuffer
s2ab(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)
},
最后导出的效果如下

完美结束！！

纯前端导出export，复杂表格表头合并，表头数据部分动态，相关推荐

VUE纯前端导出excel表格功能《转载》
插件:使用vue-json-excel插件实现Vue纯前端导出简单的Excel表格功能. 使用方法 1. 安装依赖 npm install vue-json-excel 2. 引入组件 a. 全局引入 ...
vue element ui 利用xslx导出文档表格功能（纯前端导出下载文档）
目录前言步骤: 1.下载xslx 2.导入xslx 3.template中给个点击事件 4.methods中定义函数实现导出前言本篇文章记录纯前端导出下载文档功能. 若想查看从后端接收文件流, ...
纯前端导出word、pdf、excel、txt、svg文档方法与技巧（附带问题总结）
文章目录导出pdf **实现思路:** **问题总结:** **具体代码** **封装好的导出函数,记得引入js插件** 封装方法一: 封装方法二: 封装方法三: 纯前端导出word文档方法与技巧 ...
Vue+ElementUI纯前端技术实现对表格数据的增删改查
Vue+ElementUI纯前端技术实现对表格数据的增删改查页面展示效果一.页面结构分为三个部分 head body 以及script 一般我个人是在head中引入一些组件库 , 还有一些样式 ...
Vue导出word附表部分横向显示(承接上一篇Vue纯前端导出word)
Vue纯前端导出word直通车 1. 引入js import htmlDocx from "@/utils/html-docx"; 2. page-break-before:alw ...
vue 前端导出Excel表格（基础版 + 多级标题）纯前端导出
先看效果纯前端基础导出的Excel表格纯前端多级表头导出的Excel表格基础导出下面赋源代码 1.安装依赖 npm install vue-json-excel 2.在项目的入口 main.js ...
纯前端导出 wordexcel表格
首先导出这些文件一个word/excel模板是必须的,表格还好说直接在需要的页面中找出相应字段组成表格头list 即可如下: 设置导出表格的表头: 表头设置格式为列名 :源数据属性名. ...
不用任何 js 库，纯前端导出数据到 Excel / CSV 文件就这么简单几行代码
最近实现的导出数据为表格的需求,不需要工具库,也不要后端实现,mark 一下. js 导出 excel 表格最近工作中又遇到了将表格数据导出为 excel 表格的需求,我第一时间想到的是之前我的网站 ...
element-ui 表格(table)合并表头下面合并列且可以收缩展开
百度了一大堆,发现了首行不能合并,想到了用dom做,找到了下面这个链接要点记录: 1.表头合并 -- 给table添加属性:header-cell-style="headerStyle&q ...

纯前端导出export，复杂表格表头合并，表头数据部分动态，

纯前端导出export，复杂表格表头合并，表头数据部分动态，相关推荐

最新文章

热门文章