vue2导出excel，合并单元格的表格

1.先引入一个js文件，作为主要导出函数

/* eslint-disable */
import fileSaver from 'file-saver'
// import Blob from '@/vendor/Blob'
import xlsxDist from 'script-loader!xlsx/dist/xlsx.core.min'
require('script-loader!file-saver');
import XLSX from 'xlsx-style'function generateArray(table) {var out = [];var rows = table.querySelectorAll('tr');var ranges = [];for (var R = 0; R < rows.length; ++R) {var outRow = [];var row = rows[R];var columns = row.querySelectorAll('td');for (var C = 0; C < columns.length; ++C) {var cell = columns[C];var colspan = cell.getAttribute('colspan');var rowspan = cell.getAttribute('rowspan');var cellValue = cell.innerText;if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;//Skip rangesranges.forEach(function (range) {if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);}});//Handle Row Spanif (rowspan || colspan) {rowspan = rowspan || 1;colspan = colspan || 1;ranges.push({s: {r: R, c: outRow.length}, e: {r: R + rowspan - 1, c: outRow.length + colspan - 1}});};//Handle ValueoutRow.push(cellValue !== "" ? cellValue : null);//Handle Colspanif (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);}out.push(outRow);}return [out, ranges];
};function datenum(v, date1904) {if (date1904) v += 1462;var epoch = Date.parse(v);return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}function sheet_from_array_of_arrays(data, opts) {var ws = {};var range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}};for (var R = 0; R != data.length; ++R) {for (var C = 0; C != data[R].length; ++C) {if (range.s.r > R) range.s.r = R;if (range.s.c > C) range.s.c = C;if (range.e.r < R) range.e.r = R;if (range.e.c < C) range.e.c = C;var cell = {v: data[R][C]};if (cell.v == null) continue;var cell_ref = XLSX.utils.encode_cell({c: C, r: R});if (typeof cell.v === 'number') cell.t = 'n';else if (typeof cell.v === 'boolean') cell.t = 'b';else if (cell.v instanceof Date) {cell.t = 'n';cell.z = XLSX.SSF._table[14];cell.v = datenum(cell.v);}else cell.t = 's';ws[cell_ref] = cell;}}if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);return ws;
}function Workbook() {if (!(this instanceof Workbook)) return new Workbook();this.SheetNames = [];this.Sheets = {};
}function 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;
}export function export_table_to_excel(id) {var theTable = document.getElementById(id);// console.log('a')var oo = generateArray(theTable);var ranges = oo[1];/* original data */var data = oo[0];var ws_name = "SheetJS";// console.log(data);var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);/* add ranges to worksheet */// ws['!cols'] = ['apple', 'banan'];ws['!merges'] = ranges;/* add worksheet to workbook */wb.SheetNames.push(ws_name);wb.Sheets[ws_name] = ws;var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
}// function formatJson(jsonData) {
//   console.log(jsonData)
// }// export function export_json_to_excel({
//   multiHeader2 = [],	// 第一行表头
//   multiHeader = [], // 第二行表头
//   header,	// 第三行表头
//   data,
//   filename, //文件名
//   merges = [], // 合并
//   autoWidth = true,
//   bookType = 'xlsx'
// } = {}) {
//   /* original data */
//   filename = filename || '列表';
//   data = [...data]
//   data.unshift(header);//   for (let i = multiHeader2.length - 1; i > -1; i--) {
//     data.unshift(multiHeader2[i])
//   }//   for (let i = multiHeader.length - 1; i > -1; i--) {
//     data.unshift(multiHeader[i])
//   }//   var ws_name = "SheetJS";
//   var wb = new Workbook(),
//   ws = sheet_from_array_of_arrays(data);//   if (merges.length > 0) {
//     if (!ws['!merges']) ws['!merges'] = [];
//       merges.forEach(item => {
//       ws['!merges'].push(XLSX.utils.decode_range(item))
//     })
//   }//   if (autoWidth) {
//     /*设置worksheet每列的最大宽度*/
//     const colWidth = data.map(row => row.map(val => {
//     /*先判断是否为null/undefined*/
//       if (val == null) {
//         return {
//           'wch': 10
//         };
//       }
//       /*再判断是否为中文*/
//       else if (val.toString().charCodeAt(0) > 255) {
//         return {
//           'wch': val.toString().length * 2
//         };
//       } else {
//         return {
//           'wch': val.toString().length
//         };
//       }
//     }))
//     /*以第一行为初始值*/
//     let 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;
//   }//   /* add worksheet to workbook */
//   wb.SheetNames.push(ws_name);
//   wb.Sheets[ws_name] = ws;//   var wbout = XLSX.write(wb, { bookType: bookType, bookSST: false, type: 'binary' });
//   saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), `${filename}.${bookType}`);
// }export function export_json_to_excel({title,multiHeader = [],header,data,filename,merges = [],autoWidth = true,bookType = 'xlsx',myRowFont = '1',multiHeader1,multiHeader2,
} = {}) {/* original data */filename = filename || 'excel-list'data = [...data]data.unshift(header);data.unshift(multiHeader2);data.unshift(multiHeader1);data.unshift(title);for (let i = multiHeader.length - 1; i > -1; i--) {data.unshift(multiHeader[i])}var ws_name = "SheetJS";var wb = new Workbook(),ws = sheet_from_array_of_arrays(data);if (merges.length > 0) {if (!ws['!merges']) ws['!merges'] = [];merges.forEach(item => {ws['!merges'].push(XLSX.utils.decode_range(item))})}if (autoWidth) {/*设置worksheet每列的最大宽度*/const colWidth = data.map(row => row.map(val => {/*先判断是否为null/undefined*/if (val == null) {return {'wch': 10};}/*再判断是否为中文*/else if (val.toString().charCodeAt(0) > 255) {return {'wch': val.toString().length>30?30:val.toString().length*2};} else {return {'wch': val.toString().length>50?50:val.toString().length};}}))/*以第一行为初始值*/let 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;// ws['!rows'] = [{hpx: 120}]  // 设置表格第一行高度为120}/* add worksheet to workbook */wb.SheetNames.push(ws_name);wb.Sheets[ws_name] = ws;var dataInfo = wb.Sheets[wb.SheetNames[0]];const borderAll = {  //单元格外侧框线top: {style: 'thin'},bottom: {style: 'thin'},left: {style: 'thin'},right: {style: 'thin'}};//给所以单元格加上边框for (var i in dataInfo) {if (i == '!ref' || i == '!merges' || i == '!cols' || i == 'A1') {} else {dataInfo[i + ''].s = {border: borderAll}}}// 去掉标题边框let arr = ["A1", "B1", "C1", "D1", "E1", "F1", "G1","H1","I1","J1","K1","L1"];arr.some(v => {// console.log(v)let a = merges[0].split(':')// console.log(a)if (v == a[1]) {// console.log(dataInfo[v])dataInfo[v].s = {}return true;} else {// console.log(dataInfo[v])dataInfo[v]dataInfo[v].s = {}}})//设置某单元格的样式dataInfo["A1"].s = {font: {// name: '宋体',    // 字体sz: 20, // 字体大小color: { rgb: "000000" },   // 字体颜色// color: { rgb: "00A06E" },   // 字体颜色bold: true, // 粗体italic: false,  // 斜体underline: false    // 下划线},alignment: {horizontal: "center",  // 水平垂直vertical: "center",wrapText:1  // 自动换行，换行字符："\r\n"},fill: {// fgColor: { rgb: "008000" },fgColor: { rgb: "DEDEE0" },},};//给结尾加上样式
console.log(2222222222222222222222222,data.length);dataInfo[`A${data.length}`].s = {alignment: {vertical: "center",wrapText:1  // 自动换行，换行字符："\r\n"},};// 这是表头行的样式var tableTitleFont = {font: {name: '宋体',sz: 18,color: { rgb: "000000" },bold: true,italic: false,underline: false},border: borderAll,alignment: {horizontal: "center",vertical: "center"},fill: {fgColor: { rgb: "DEDEE0" }  //表头的背景颜色},};for (var b in dataInfo) {// console.log(b)// console.log(myRowFont)// console.log(b.indexOf(myRowFont))// if (b.indexOf(myRowFont) > -1) {//   if(dataInfo[b].v){//     dataInfo[b].s = tableTitleFont//   }// }}// console.log(merges);// console.log(dataInfo);var wbout = XLSX.write(wb, {bookType: bookType,bookSST: false,type: 'binary'});saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), `${filename}.${bookType}`);
}

2. 在vue中定义导出函数

 exportExcelSmt() {const exportList = [];//处理数据为一维数组require.ensure([], () => {const {export_json_to_excel} = require("../../vendor/inspectionFormExcel");const tHeader = [];//导出列表内容字段名称 例如：['姓名','性别']const title = [];//导出表头可合并 例如：['信息表','']const multiHeader1 = [];//第一行内容，可自行调整 例如：['姓名','name']const multiHeader2 = [];//第二行内容const filterVal = [];//导出列表字段 例如：['name','sex']var list = exportList;//合并相同单元格函数function findConsistentProductSNRanges(inputArray) {let result = [];let startIdx = 0;for (let i = 1; i <= inputArray.length; i++) {if (i === inputArray.length ||inputArray[i].ItemCode !== inputArray[startIdx].ItemCode) {let range = `A${startIdx + 4}:A${i + 3}`;let SNrange = `B${startIdx + 4}:B${i + 3}`;let Userrange = `C${startIdx + 4}:C${i + 3}`;let Timerange = `D${startIdx + 4}:D${i + 3}`;result.push(range);result.push(SNrange);result.push(Userrange);result.push(Timerange);if (i < inputArray.length) {startIdx = i;}}}return result;}const hebingList = findConsistentProductSNRanges(list);const merges = ["A1:L1", "A3:F3", "G3:L3", ...hebingList]; //合并单元格const data = this.formatJson(filterVal, list);export_json_to_excel({title: title,header: tHeader,data,merges,filename: this.getNowTime(),autoWidth: true,bookType: "xlsx",multiHeader1: multiHeader1,multiHeader2: multiHeader2});});}

3.其余函数 

formatJson(filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => v[j]));},
getNowTime() {var now = new Date();var year = now.getFullYear(); //得到年份var month = now.getMonth(); //得到月份var date = now.getDate(); //得到日期var hh = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();var mm =now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();var ss =now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();month = month + 1;month = month.toString().padStart(2, "0");date = date.toString().padStart(2, "0");var defaultDate = `${year}-${month}-${date} ${hh}:${mm}:${ss}`;return defaultDate;},

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/606622.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

MySQL8快速安装以及配置小技巧

MySQL8快速安装以及配置小技巧

安装 首先去官网下载&#xff0c;地址是这个 我选择的是Windows (x86, 64-bit), ZIP Archive。解压到一个目录&#xff0c;然后按照下面的命令执行 cd /d/mysql-8.2.0-winx64/bin ./mysqld --initialize --console # 上面这个命令执行完成之后控制台会输出临时密码&#xff0…
阅读更多...
TS 36.211 V12.0.0-下行(6)-同步信号

TS 36.211 V12.0.0-下行(6)-同步信号

本文的内容主要涉及TS 36.211&#xff0c;版本是C00&#xff0c;也就是V12.0.0。
阅读更多...
腾讯云服务器（免费1个月）申请流程

腾讯云服务器（免费1个月）申请流程

腾讯云免费服务器申请入口 https://curl.qcloud.com/FJhqoVDP 免费服务器可选轻量应用服务器和云服务器CVM&#xff0c;轻量配置可选2核2G3M、2核8G7M和4核8G12M&#xff0c;CVM云服务器可选2核2G3M和2核4G3M配置&#xff0c;腾讯云百科txybk.com分享2024年最新腾讯云免费服务器…
阅读更多...
数据结构与算法Python版：计数排序

数据结构与算法Python版：计数排序

简介&#xff1a;计数排序是一个非基于比较的排序算法&#xff0c;该算法于1954年由 Harold H. Seward 提出。它的优势在于在对一定范围内的整数排序时&#xff0c;它的复杂度为Ο(nk)&#xff08;其中k是整数的范围&#xff09;&#xff0c;快于任何比较排序算法。当然这是一种…
阅读更多...
如何利用ssh将手机连接电脑

如何利用ssh将手机连接电脑

首先我们需要下载ssh&#xff0c;因为我们没有安装 sshd 命令意思是开启ssh 下载完以后要设置密码&#xff0c;我设置得是 123456 开启服务&#xff0c;查看ip 电脑连接 ssh 刚刚得ip -p 8022 后面就连接上了 我可以在这里启动我手机上的vnc
阅读更多...
UG装配-爆炸图

UG装配-爆炸图

当我们将零件装配成总成的时候&#xff0c;通常需要绘制爆炸图来说明总成零件组成&#xff0c;需要用到爆炸图命令&#xff0c;首先点击新建爆炸&#xff0c;然后为爆炸图命名 然后我们可以选择编辑爆炸或者自动爆炸&#xff1a; 编辑爆炸是通过手动的方式选择部件&#xff0c…
阅读更多...
计算机网络学习笔记(四)

计算机网络学习笔记(四)

文章目录 1.介绍一下HTTPS的流程。2.介绍一下HTTP的失败码。3.说一说你知道的http状态码。4. 301和302有什么区别&#xff1f;5.302和304有什么区别&#xff1f;6. 请描述一次完整的HTTP请求的过程。7.什么是重定向&#xff1f;8. 重定向和请求转发有什么区别&#xff1f;9.介绍…
阅读更多...
Java研学-Servlet3.0文件上传下载

Java研学-Servlet3.0文件上传下载

一 文件上传 1 介绍 用户选择本地文件资源保存到服务器上&#xff0c;Servlet需要将二进制数据以文件保存到服务器磁盘中&#xff0c;再将磁盘路径保存到数据库中 2 项目搭建 创建web项目&#xff0c;并添加对应jar包(JSTL) 3 API HttpServletRequest 方法–从请求中解析上…
阅读更多...
DeepPurpose 生物化学深度学习库；蛋白靶点小分子药物对接亲和力预测虚拟筛选

DeepPurpose 生物化学深度学习库；蛋白靶点小分子药物对接亲和力预测虚拟筛选

参考： https://blog.csdn.net/c9Yv2cf9I06K2A9E/article/details/107649770 https://github.com/kexinhuang12345/DeepPurpose ##安装 pip install DeepPurpose rdkitDeepPurpose包括： 数据： 关联TDC库下载，是同一作者开发的 https://blog.csdn.net/weixin_42357472/artic…
阅读更多...
ARM CCA机密计算架构软件栈之软件组件介绍

ARM CCA机密计算架构软件栈之软件组件介绍

在本节中，您将了解Arm CCA的软件组件，包括Realm World和Monitor Root World。以下图表展示了Arm CCA系统中的软件组件： 在这个图表中，世界之间的边界显示为粗虚线。由较高权限的软件强制执行的较低权限软件组件之间的边界显示为细虚线。例如，非安全EL2处的虚拟机监视器强制…
阅读更多...
python项目使用docker的方式部署，docker compose的方式启动

python项目使用docker的方式部署，docker compose的方式启动

要将 Python 项目打包并发布到 Docker Hub&#xff0c;然后使用 Docker Compose 部署到正式环境&#xff0c;您需要执行以下步骤&#xff1a; 打包 Python 项目并发布到 Docker Hub 创建 Dockerfile: 确保您已经有一个适用于您的 Python 项目的 Dockerfile。这个文件定义了如何…
阅读更多...
Leetcode 3003. Maximize the Number of Partitions After Operations

Leetcode 3003. Maximize the Number of Partitions After Operations

Leetcode 3003. Maximize the Number of Partitions After Operations 1. 解题思路2. 代码实现 题目链接&#xff1a;10038. Maximize the Number of Partitions After Operations 1. 解题思路 这一题我看实际比赛当中只有72个人做出来&#xff0c;把我吓得够呛&#xff0c;…
阅读更多...
pip install simctg 报错

pip install simctg 报错

pip install simctg python setup.py egg_info did not run successfully. │ exit code: 1 ╰─> [15 lines of output] The ‘sklearn’ PyPI package is deprecated, use ‘scikit-learn’ rather than ‘sklearn’ for pip commands. Here is how to fix this error i…
阅读更多...
【win11 绕过TPM CPU硬件限制安装】

【win11 绕过TPM CPU硬件限制安装】

Qt编程指南 VX&#xff1a;hao541022348 ■ 下载iso文件■ 右键文件点击装载出现如下问题■ 绕过TPM CPU硬件限制安装方法■ 虚拟机安装win11 ■ 下载iso文件 选择Windows11 &#xff08;multi-edition ISO&#xff09;在选择中文 ■ 右键文件点击装载出现如下问题 ■ 绕过T…
阅读更多...
Ubuntu下Lighttpd服务器安装，并支持PHP

Ubuntu下Lighttpd服务器安装，并支持PHP

1、说明 Lighttpd 是一个德国人领导的开源Web服务器软件&#xff0c;其根本的目的是提供一个专门针对高性能网站&#xff0c;安全、快速、兼容性好并且灵活的web server环境。具有非常低的内存开销、cpu占用率低、效能好以及丰富的模块等特点。 Lighttpd是众多OpenSource轻量级…
阅读更多...
New！2024最新ChatGPT提示词开源项目：GPT Prompts Hub - 专注于深化对话质量和探索更复杂的对话结构

New！2024最新ChatGPT提示词开源项目：GPT Prompts Hub - 专注于深化对话质量和探索更复杂的对话结构

&#x1f31f; GPT Prompts Hub &#x1f31f; 欢迎来到 “GPT Prompts Hub” 存储库&#xff01;探索并分享高质量的 ChatGPT 提示词。培养创新性内容&#xff0c;提升对话体验&#xff0c;激发创造力。我们极力鼓励贡献独特的提示词。 在 “GPT Prompts Hub” 项目中&#…
阅读更多...
Docker安装sentinel控制台

Docker安装sentinel控制台

1、拉取镜像&#xff0c;直接使用run命令&#xff0c;如果说本地没有镜像就会直接去远程仓库拉取&#xff1a; docker run -d \ -p 8858:8858 \ --name sentinel-dashboard \ --network demo \ -e AUTH_USERNAMEsentinel \ -e AUTH_PASSWORD123456 \ bladex/sentinel-dashboa…
阅读更多...
特征工程（一）

特征工程（一）

特征工程&#xff08;一&#xff09; 什么是特征工程 简单来讲将数据转换为能更好地表示潜在问题的特征&#xff0c;从而提高机器学习性能 特征工程包含的内容 转换数据的过程特征更好地表示潜在问题提高机器学习性能 数据和机器学习的基础知识 数据基础 以下为数据的一…
阅读更多...
使用 Windows 调试器查找 GDI 泄漏

使用 Windows 调试器查找 GDI 泄漏

文章目录 介绍为什么!htrace命令无法使用？总结附：GDI使用的几个注意点：本文将带您了解如何使用 Windows 调试器跟踪 GDI 句柄泄漏，并了解如何修复它们。 介绍 本文是有关使用 Windows 调试器查找和修复 GDI 句柄泄漏的演练。Windows调试器应该是最后的手段，首先在整个代…
阅读更多...
密码学：一文读懂非对称密码体制

密码学：一文读懂非对称密码体制

文章目录 前言非对称密码体制的保密通信模型私钥加密-公钥解密的保密通信模型公钥加密-私钥解密的保密通信模型 复合式的非对称密码系统散列函数数字签名数字签名满足的三个基本要求先加密还是先签名&#xff1f;数字签名成为公钥基础设施以及许多网络安全机制的基础什么是单向…
阅读更多...
最新文章

Copyright @ 2022~2023