vue3 用xlsx 解决 excel 低版本office无法打开问题

  • 需求背景
  • 解决思路
  • 解决效果
  • 将json导出为excel
  • 将table导为excel
  • 导出样式

需求背景

原使用 vue3-json-excel ，导致在笔记本office环境下，出现兼容性问题

 <vue3-json-excel class="export-btn" :fetch="excelGetList" :fields="jsonFields" header="告警配置列表" name="告警配置列表.xls" type="xls"><span>批量导出</span></vue3-json-excel>

生成的.xls文件，提示文件格式和扩展名不匹配，文件可能已损坏或不安全在这里插入图片描述
生成的.xlsx文件，提示文件格式或文件扩展名无效
在这里插入图片描述

解决思路

既然 vue3-json-excel 达不到效果，就改用xlsx

解决效果

在这里插入图片描述

将json导出为excel

/*** 将json数据导出为excel* @param {object} options* @param {[]} data 数据源 // {'供热系统': "大唐热电供热系统", '供热面积(万m²)': 34.099, '分布式水泵数量': 0, '当前供热系统': "大唐热电供热系统"}* @param {string} fileName 文件名称* @param [] keySort  字段排序 // ['供热系统', '供热面积(万m²)', '分布式水泵数量','当前供热系统']* @param {string} sheetName sheet名称* @param {boolean} titleNum 表头数*/
import XLSXStyle from "xlsx-style-vite" //"^0.0.2"
import FileSaver from "file-saver";// "^2.0.5"
import * as XLSX from "xlsx";//"^0.17.0",export const exportToExcel = (data, fileName, keySort, sheetName = "sheet1", titleNum = 1) => {// const sheet = XLSX.utils.json_to_sheet(data)const temp = data.map(item => {const arr = []keySort.forEach(k => arr.push(item[k]))return arr})temp.unshift(keySort)const sheet = XLSX.utils.aoa_to_sheet(temp)const wb = {SheetNames: [sheetName],Sheets: {[sheetName]: sheet}}const range = XLSX.utils.decode_range(wb.Sheets[sheetName]['!ref']);//单元格边框样式const borderStyle = {top: {style: "thin",color: {rgb: "000000"}},bottom: {style: "thin",color: {rgb: "000000"}},left: {style: "thin",color: {rgb: "000000"}},right: {style: "thin",color: {rgb: "000000"}}};const cWidth = [];for (let C = range.s.c; C < range.e.c + 1; ++C) {   //SHEET列let len = 100; //默认列宽const len_max = 400; //最大列宽for (let R = range.s.r; R <= range.e.r; ++R) {  //SHEET行const cell = {c: C, r: R};                    //二维 列行确定一个单元格const cell_ref = XLSX.utils.encode_cell(cell);  //单元格 A1、A2if (wb.Sheets[sheetName][cell_ref]) {if (R < titleNum) {wb.Sheets[sheetName][cell_ref].s = {  //设置第一行单元格的样式 stylefont: {sz: 14, // 标题字号color: {rgb: '060B0E'},// 颜色bold: true//加粗},alignment: {horizontal: 'center',vertical: 'center',},fill: {fgColor: {rgb: 'E4E4E4'}, // 背景},border: borderStyle,//用上面定义好的边框样式};} else {wb.Sheets[sheetName][cell_ref].s = {alignment: {horizontal: 'center',vertical: 'center',},border: borderStyle,//用上面定义好的边框样式};}//动态自适应：计算列宽const va = JSON.parse(JSON.stringify(wb.Sheets[sheetName][cell_ref].v || ''));const card1 = JSON.parse(JSON.stringify(va.toString())).match(/[\u4e00-\u9fa5]/g); //匹配中文let card11 = "";if (card1) card11 = card1.join("")const card2 = JSON.parse(JSON.stringify(va.toString())).replace(/([^\u0000-\u00FF])/g, "");  //剔除中文let st = 0;if (card11) st += card11.length * 20  //中文字节码长度if (card2) st += card2.length * 10  //非中文字节码长度if (st > len) len = st;}}cWidth.push({'wpx': len > len_max ? len_max : len});     //列宽}wb.Sheets[sheetName]['!cols'] = cWidth;const wopts = {bookType: 'xlsx', bookSST: false, type: 'binary'};const wbout = XLSXStyle.write(wb, wopts); //一定要用XLSXStyle不要用XLSX，XLSX是没有格式的！FileSaver(new Blob([s2ab(wbout)], {type: ""}), fileName + '.xlsx');function s2ab(s) {const buf = new ArrayBuffer(s.length);const view = new Uint8Array(buf);for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;return buf;}
}

将table导为excel

/*** 将table导出为excel* @param {object} options* @param {[]} table 表格元素* @param {string} fileName 文件名称* @param {string} sheetName sheet名称* @param {boolean} titleNum 表头数*/
export const exportTableToExcel = (dom, fileName, sheetName = "sheet1", titleNum = 1) => {const wb = XLSX.utils.table_to_book(dom, {sheet: sheetName, raw: true});const range = XLSX.utils.decode_range(wb.Sheets[sheetName]['!ref']);//单元格边框样式const borderStyle = {top: {style: "thin",color: {rgb: "000000"}},bottom: {style: "thin",color: {rgb: "000000"}},left: {style: "thin",color: {rgb: "000000"}},right: {style: "thin",color: {rgb: "000000"}}};const cWidth = [];for (let C = range.s.c; C < range.e.c + 1; ++C) {   //SHEET列let len = 100; //默认列宽const len_max = 400; //最大列宽for (let R = range.s.r; R <= range.e.r; ++R) {  //SHEET行const cell = {c: C, r: R};                    //二维 列行确定一个单元格const cell_ref = XLSX.utils.encode_cell(cell);  //单元格 A1、A2if (wb.Sheets[sheetName][cell_ref]) {// if (R == 0){if (R < titleNum) {wb.Sheets[sheetName][cell_ref].s = {  //设置第一行单元格的样式 stylefont: {sz: 14,color: {rgb: '060B0E'},bold: true},alignment: {horizontal: 'center',vertical: 'center',},fill: {fgColor: {rgb: 'E4E4E4'},},border: borderStyle,//用上面定义好的边框样式};} else {wb.Sheets[sheetName][cell_ref].s = {alignment: {horizontal: 'center',vertical: 'center',},border: borderStyle,//用上面定义好的边框样式};}//动态自适应：计算列宽const va = JSON.parse(JSON.stringify(wb.Sheets[sheetName][cell_ref].v || ''));const card1 = JSON.parse(JSON.stringify(va.toString())).match(/[\u4e00-\u9fa5]/g); //匹配中文let card11 = "";if (card1) {card11 = card1.join("")}const card2 = JSON.parse(JSON.stringify(va.toString())).replace(/([^\u0000-\u00FF])/g, "");  //剔除中文let st = 0;if (card11) {st += card11.length * 20  //中文字节码长度}if (card2) {st += card2.length * 10  //非中文字节码长度}if (st > len) {len = st;}}}if (len > len_max) {//最大宽度len = len_max;}cWidth.push({'wpx': len});     //列宽}wb.Sheets[sheetName]['!cols'] = cWidth.slice(1, -1);// 删除列-----重点-----0就是第一列。。// wb.Sheets[sheetName]['!cols'][0] = {hidden: true}deleteCol(wb.Sheets[sheetName], 0)deleteCol(wb.Sheets[sheetName], cWidth.length - 1)// 合并列// wb.Sheets[sheetName]["!merges"] = [//   {  //合并A1A2单元格//     s: {//s为开始//       c: 0,//开始列//       r: 0//开始取值范围//     },//     e: {//e结束//       c: 1,//结束列//       r: 0//结束范围//     }//   }// ]const wopts = {bookType: 'xlsx', bookSST: false, type: 'binary'};const wbout = XLSXStyle.write(wb, wopts); //一定要用XLSXStyle不要用XLSX，XLSX是没有格式的！FileSaver(new Blob([s2ab(wbout)], {type: ""}), fileName + '.xlsx');function encodeCell(r, c) {return XLSX.utils.encode_cell({r, c});}// 删除行function deleteRow(ws, index) {const range = XLSX.utils.decode_range(ws['!ref']);for (let row = index; row < range.e.r; row++) {for (let col = range.s.c; col <= range.e.c; col++) {ws[encodeCell(row, col)] = ws[encodeCell(row + 1, col)];}}range.e.r--;ws['!ref'] = XLSX.utils.encode_range(range.s, range.e);}// 删除列function deleteCol(ws, index) {const range = XLSX.utils.decode_range(ws['!ref']);for (let col = index; col < range.e.c; col++) {for (let row = range.s.r; row <= range.e.r; row++) {ws[encodeCell(row, col)] = ws[encodeCell(row, col + 1)];}}range.e.c--;ws['!ref'] = XLSX.utils.encode_range(range.s, range.e);}function s2ab(s) {const buf = new ArrayBuffer(s.length);const view = new Uint8Array(buf);for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;return buf;}
}

导出样式

应粉丝要求，附上导出样式

import {h} from "vue";
import {ElMessageBox} from "element-plus";ElMessageBox({title: '导出Excel表格',draggable: true,showCancelButton: true,showConfirmButton: false,message: h('div', null, [ // 这里用到了h函数h(ElButton, { text: true, type: 'primary', innerHTML: '导出选中数据', onClick: assignExport }),h(ElButton, { text: true, type: 'success', innerHTML: '导出所有数据', onClick: allExport })]),cancelButtonText: '取消',
})
// 导出
const assignExport = () =>{console.log(111)
}
const allExport = () =>{console.log(222)
}

在这里插入图片描述

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

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

相关文章

【Python程序开发系列】利用git实现协同开发做开源贡献（完整过程）

【Python程序开发系列】利用git实现协同开发做开源贡献（完整过程）

一、问题 假如我在gitee或者github上看到了一个优质的项目&#xff0c;我想对这个项目做一些深入的研究&#xff0c;并对其进行优化&#xff0c;并最终提交PR做出贡献。但是这个项目需要或者最好在虚拟机上或服务器上运行&#xff0c;虚拟机或服务器没有IDE这种代码编辑器&…
阅读更多...
2024-02-20（DataX，Spark）

2024-02-20（DataX，Spark）

1.Oracle利用DataX工具导出数据到Mysql。Oracle利用DataX工具导出数据到HDFS。 只是根据导入导出的目的地不同&#xff0c;DataX的Json文件书写内容有所不同。万变不离其宗。 书写的Json格式的导入导出规则文件存放再Job目录下的。 2.Spark概念 Apache Spark是用于大规模数…
阅读更多...
智能风控体系之逻辑回归

智能风控体系之逻辑回归

逻辑回归就是这样的一个过程&#xff1a;面对一个回归或者分类问题&#xff0c;建立代价函数&#xff0c;然后通过优化方法迭代求解出最优的模型参数&#xff0c;然后测试验证我们这个求解的模型的好坏。在信贷风控领域最常用的广义线性模型就是逻辑回归。其实逻辑回归线性可分…
阅读更多...
说一下JVM类加载机制？

说一下JVM类加载机制？

Java中的所有类&#xff0c;都需要由类加载器装载到JVM中才能运行。类加载器本身也是一个类&#xff0c;而它的工作就是把class文件从硬盘读取到内存中。 在写程序的时候&#xff0c;我们几乎不需要关心类的加载&#xff0c;因为这些都是隐式装载的&#xff0c;除非我们有特殊…
阅读更多...
pc微信逆向最新3.9.8.25版本

pc微信逆向最新3.9.8.25版本

朋友让我开发一个关于微信的计数、统计、自动回复功能的机器人&#xff0c;主要是用在win10上面。 先看看结果&#xff01; 之前写过手机端的逆向&#xff0c;PC端逆向很长时间没写了&#xff0c;所以就在网上找了找。基本都是基于3.6&#xff0c;3.7&#xff0c;3.8版本的&a…
阅读更多...
虹科方案 | 释放总线潜力：汽车总线离线模拟解决方案

虹科方案 | 释放总线潜力：汽车总线离线模拟解决方案

来源&#xff1a;虹科汽车智能互联 虹科方案 | 释放总线潜力&#xff1a;汽车总线离线模拟解决方案 原文链接&#xff1a;https://mp.weixin.qq.com/s/KGv2ZOuQMLIXlOiivvY6aQ 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; #汽车总线 #ECU #汽车网关 导读 传统的…
阅读更多...
长短期记忆神经网络

长短期记忆神经网络

目录 LSTM 神经网络架构 分类 LSTM 网络 回归 LSTM 网络 视频分类网络 更深的 LSTM 网络 网络层 分类、预测和预报 序列填充、截断和拆分 按长度对序列排序 填充序列 截断序列 拆分序列 指定填充方向 归一化序列数据 无法放入内存的数据 可视化 LSTM 层架构 …
阅读更多...
Find My资讯|苹果Vision Pro无法通过Find My进行远程定位和发声

Find My资讯|苹果Vision Pro无法通过Find My进行远程定位和发声

苹果 Vision Pro 头显现在已经正式开售&#xff0c;不过根据该公司日前发布的支持文件&#xff0c;这款头显目前缺乏一系列关键查找功能&#xff0c;用户无法在 iCloud 网站或Find My应用中获悉头显的位置&#xff0c;也无法让这款头显远程播放声音。 不过支持文件同时提到 V…
阅读更多...
【机器学习】数据清洗之处理重复点

【机器学习】数据清洗之处理重复点

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;机器学习 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进…
阅读更多...
C++（18）——适配器概念以及stack、queue、优先队列的模拟实现

C++（18）——适配器概念以及stack、queue、优先队列的模拟实现

上篇文章中&#xff0c;给出了对于模拟实现中功能的补全&#xff0c;本篇文章将优先介绍一个新的容器之后引入什么是适配器&#xff0c;以及适配器的使用方法&#xff0c;再通过适配器的思想来完成对于&#xff0c;、优先级队列_的实现。 目录 1. deque: 1.1 什么是deque&…
阅读更多...
Android studio 安装以及第一个程序

Android studio 安装以及第一个程序

一、配置 1、下载JDK&#xff08;JDK&#xff1a;Java Development Kit Java开发工具包&#xff09; 打开Java Downloads | Oracle下载地址下载相应的JDK版本即可&#xff0c;需要注意的是请下载JDK11以上的版本&#xff0c;并且是64位版 2、安装JDK 双击打开已经下载好的安装…
阅读更多...
Query Rewrite —— 基于大模型的query扩展改写，PRF+ GRF协同发力减少LLM的幻觉问题（论文）

Query Rewrite —— 基于大模型的query扩展改写，PRF+ GRF协同发力减少LLM的幻觉问题（论文）

通过GRF和PRF&#xff0c;可以有效提升召回率&#xff0c;和top的数据质量。两者可以相互互补&#xff0c;发挥更好的作用。 论文&#xff1a;Generative and Pseudo-Relevant Feedback for Sparse, Dense and Learned Sparse Retrieval 什么是PRF &#xff1f; Pseudo-relevan…
阅读更多...
python在flask中的请求数据“无限流”

python在flask中的请求数据“无限流”

文章目录 一、问题描述二、解决方案 一、问题描述 在flask请求中&#xff0c;有个需求是让调用方一直调接口&#xff0c;并立马返回&#xff0c;而接口方缓存请求&#xff0c;依次执行。 二、解决方案 from flask import Flask, request, jsonify from queue import Queue i…
阅读更多...
新年伊始，VR全景释放“强信号”，可以结合哪些行业？

新年伊始，VR全景释放“强信号”，可以结合哪些行业？

一年之计在于春&#xff0c;各行各业都想抢占在经济的第一线&#xff0c;那么如何抓住新一轮科技革命和产业变革新机遇呢&#xff1f;VR全景释放了“强信号”。对于大部分实体行业来说&#xff0c;都会有VR全景的制作需求&#xff0c;租房买房的&#xff0c;可能都见识过线上VR…
阅读更多...
【JGit】分支管理实践

【JGit】分支管理实践

本文紧接【JGit】简述及学习资料整理。 以下梳理了使用 JGit 进行 Git 操作的实践 JGit实践 主函数 public static void main(String[] args) throws Exception {String localDir "D:\\tmp\\git-test\\";String gitUrl "http://192.168.181.1:3000/root/g…
阅读更多...
如何邀请媒体参加活动报道？媒体邀约的几大步骤？

如何邀请媒体参加活动报道？媒体邀约的几大步骤？

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 邀请媒体参加活动报道通常需要发送邀请函、提供详细活动信息&#xff0c;并通过电话或邮件进行跟进确认。 在邀请媒体之前&#xff0c;应该制定一个详细的媒体规划表&#xff0c;包括拟…
阅读更多...
高级统计方法 第2次作业

高级统计方法 第2次作业

概念 1. &#xff08;a&#xff09; 光滑度高的好&#xff0c;样本足够多光滑度越高就越能表征真实情况&#xff0c;也能对预测变量更好的预测。 &#xff08;b&#xff09; 光滑度低的好&#xff0c;因为可能“过拟合”&#xff0c;一些误差大的数可能会较大的影响到预测…
阅读更多...
Code-Audit(代码审计)习题记录

Code-Audit(代码审计)习题记录

介绍&#xff1a; 自己懒得搭建靶场了&#xff0c;靶场地址是 GitHub - CHYbeta/Code-Audit-Challenges: Code-Audit-Challenges为了方便在公网练习&#xff0c;可以随地访问&#xff0c;本文所有的题目均来源于网站HSCSEC-Code Audit 1、习题一 题目内容如下&#xff1a; 1…
阅读更多...
FX110网：easyMarkets易信被评为2023最佳外汇经纪商

FX110网：easyMarkets易信被评为2023最佳外汇经纪商

easyMarkets 易信目前正在庆祝其进入行业第 23 周年&#xff0c;很高兴地宣布其在 2023 年 TradingView 经纪商奖中被授予“最佳外汇经纪商”称号&#xff0c;这是其第 51 次荣获殊荣奖项。 “我们的共同使命是为交易者提供最好的交易环境和交易工具。 得益于我们全球社区的广泛…
阅读更多...
手把手将 VSCode 快捷键修改为 Eclipse 的快捷键

手把手将 VSCode 快捷键修改为 Eclipse 的快捷键

1.在 vscode 上方搜索栏输入 >keyboard 2. 选择图中红框的内容 3.将Eclipse的常用快捷键复制进去 { "key": "ctrld", "command": "-editor.action.addSelectionToNextFindMatch", "when": "editorFocus" }, {…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023