关于vue实现导出excel表,以及导出的excel后的图片超过单元格的问题

实现导出带图标片的excel的方法,

首先:

import table2excel from 'js-table2excel
// 导出表格  按钮点击后触发事件
const onBatchExport = () => {const column = [//数据表单{title: "ID", //表头名称titlekey: "id", //数据type: "text", //类型},{title: "景区ID",key: "scienceid",type: "text",},{title: "景区名称",key: "sciencename",type: "text",},{title: "二维码",key: "code",type: "image",width: 80,height: 80,},  {title: "二维码状态",key: "state",type: "text",},{title: "创建时间",key: "time",type: "text",width: 130,height: 80,},];//将数据转化为字符串(list_data数据是接口数据,把名称换成自己的数据即可)let tableDatas = JSON.parse(JSON.stringify(datalists.value)); let datas = tableDatas;table2excel(column, datas, "数据"); //表单数据名称
};

但是这种可能会出现在excel打开表格时,图片尺寸超过单元格的问题,这个时候就要去更改table2excel文件源码,在node_modules/js-table2excel/src/index.js中更改

在img标签外面加一个div然后设置div和img的宽高,

function getImageHtml(val, options) {options = Object.assign({ width: 40, height: 60, scale: 0.64 }, options);const imgWidth = options.width * options.scale;const imgHeight = options.height * options.scale;return `<td style=" width:${options.width}px;height:${options.height}px; text-align: center; vertical-align: middle"><div style="display: flex;justify-content: center;align-items: center; width:${options.width}px;height:${options.height}px; text-align: center;  margin:auto auto; vertical-align: middle;" ><img width="${imgWidth}" height="${imgHeight}" src="${val}" /></div></td>`;}

我又给div和img的宽高加了一个缩小,div和img的宽高等于单元格宽高乘以0.64。

这样的话图片就不会超过单元格了ψ(`∇´)ψ,但是会有一个问题如果在wps上打开的话图片又会显得很小T_T。希望路过的各位大佬一起探讨一下该怎么办。

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

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

相关文章

通用图形处理器设计GPGPU基础与架构(四)

一、前言 本文将介绍GPGPU中线程束的调度方案、记分牌方案和线程块的分配与调度方案。 二、线程束调度 在计算机中有很多资源&#xff0c;既可以是虚拟的计算资源&#xff0c;如线程、进程或数据流&#xff0c;也可以是硬件资源&#xff0c;如处理器、网络连接或 ALU 单元。调…

Visual Studio2022中使用.Net 8 在 Windows 下使用 Worker Service 创建守护进程

Visual Studio2022中使用.Net 8 在 Windows 下创建 Worker Service 1 什么是 .NET Core Worker Service1.1 确认Visual Studio中安装了 ASP.NET和Web开发2 创建 WorkerService项目2.1 新建一个WorkerService项目2.2 项目结构说明3 将应用转换成 Windows 服务3.1 安装Microsoft.…

前端书籍翻页效果

目录 前端书籍翻页效果前言代码示例创建模板页面css样式编写js代码 结论 前端书籍翻页效果 前端实现翻书效果&#xff0c;附带vue源码 源码下载地址 前言 实际业务开发中&#xff0c;有时候会遇到需要在前端页面内实现翻书效果的需求&#xff0c;本篇文章就为大家介绍如何使…

09 深度推荐模型演化中的“平衡与不平衡“规律

你好&#xff0c;我是大壮。08 讲我们介绍了深度推荐算法中的范式方法&#xff0c;并简单讲解了组合范式推荐方法&#xff0c;其中还提到了多层感知器&#xff08;MLP&#xff09;。因此&#xff0c;这一讲我们就以 MLP 组件为基础&#xff0c;讲解深度学习范式的其他组合推荐方…

电子设备中丝杆模组高精度重复定位技术的原理!

丝杆模组是由螺旋丝杆和导杆组成的一种机械运动控制系统&#xff0c;通过在导杆内进行旋转&#xff0c;使导杆沿着线性方向进行移动&#xff0c;从而实现机械运动的线性控制。丝杆模组以其高精度、高稳定性和可重复定位的特性&#xff0c;在现代工业自动化和精密制造领域发挥着…

controller-from表单1

mvc模式是spring boot 开发web应用程序主要使用模式&#xff0c;mvc分别代表model模型&#xff0c;view是视图 &#xff0c;controller是控制器 controller是对接用户请求数据调用服务层代码&#xff0c;具体怎么操作 浏览器发送http请求给到dispatcherServlet&#xff08;前…

【操作系统】文件管理——文件存储空间管理(个人笔记)

学习日期&#xff1a;2024.7.17 内容摘要&#xff1a;文件存储空间管理、文件的基本操作 在上一章中&#xff0c;我们学习了文件物理结构的管理&#xff0c;重点学习了操作系统是如何实现逻辑结构到物理结构的映射&#xff0c;这显然是针对已经存储了文件的磁盘块的&#xff0…

无人驾驶的未来:AI如何重塑我们的出行世界

无人驾驶汽车&#xff0c;作为人工智能&#xff08;AI&#xff09;技术的集大成者&#xff0c;正以前所未有的速度改变着我们的出行方式。从机器学习到计算机视觉&#xff0c;再到人工智能生成内容&#xff08;AIGC&#xff09;&#xff0c;AI技术的每一次进步都在为无人驾驶汽…

Linux内核编程(八) 添加自定义目录驱动菜单 (Kconfig文件使用)

本文目录 一、Linux 内核驱动目录二、自定义驱动的Kconfig编写●示例&#xff1a;在 drivers 菜单添加一个自己驱动的子菜单。 三、自写驱动的Makefile编写四、总结 一个Linux内核源码&#xff0c;其中包含了很多驱动程序&#xff0c;对应不同的功能。我们在编译内核时。如果将…

设计模式:真正的建造者模式

又臭又长的set方法 经常进行Java项目开发使用各类starter的你一定见过这种代码&#xff1a; public class SwaggerConfig {Beanpublic Docket api() {return new Docket(DocumentationType.SWAGGER_2).select().apis(RequestHandlerSelectors.any()).paths(PathSelectors.any…

【BUG】已解决:ModuleNotFoundError: No module named ‘cv2’

已解决&#xff1a;ModuleNotFoundError: No module named ‘cv2’ 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰&#xff0c;211科班出身&#xff0c;就职于医疗科技公司&#xff0c;热衷分享知识&#xff0c;武汉城市开…

基于 Web 的家校联系系统的设计与实现

目录 基于 Web 的家校联系系统的设计与实现 一、绪论 &#xff08;一&#xff09;研究背景 &#xff08;二&#xff09; 研究目的 &#xff08;三&#xff09; 研究意义 二、需求分析 &#xff08;一&#xff09; 功能需求 &#xff08;二&#xff09; 性能需求 &#…

开发一个自己的chrom插件

开发一个自己的chrom插件 一、创建一个文件夹 二、配置文件manifest.json 创建名字为&#xff1a;manifest.json的配置文件&#xff0c;模板如下&#xff1a; {"manifest_version": 3,"name": "Hello World Extension","version": …

AV1 编码标准屏幕内容编码技术概述

AV1 屏幕内容编码 为了提高屏幕捕获内容的压缩性能&#xff0c;AV1采用了几种编码工具&#xff0c;例如用于处理屏幕画面中重复模式的内帧内块复制&#xff08;IntraBC&#xff09;&#xff0c;以及用于处理颜色数量有限的屏幕块的调色板模式。 帧内块拷贝 AV1 编码中的 Intra …

【Elasticsearch7.11】reindex问题

参考博文链接 问题&#xff1a;reindex 时出现如下问题 原因&#xff1a;数据量大&#xff0c;kibana的问题 解决方法&#xff1a; 将DSL命令转化成CURL命令在服务上执行 CURL命令 自动转化 curl -XPOST "http://IP:PORT/_reindex" -H Content-Type: application…

Python: 一些python和Java不同的基础语法

文章目录 1. 数据类型2. 字符串的引用3. 字符串拼接4. Python中的报错5. Python中的输入语句(input)6. 运算符(**和//)7. 除法运算8. 注释方法: #或者三引号9. Python中的比较10. Java中用and, or, not代替逻辑运算符11. 多元赋值12. Python不支持自增自减操作13. 在Python中, …

zookeeper基础知识学习

官网&#xff1a;Apache ZooKeeper 下载地址&#xff1a;Index of /dist/zookeeper/zookeeper-3.5.7Index of /dist/zookeeperIndex of /dist/zookeeper/zookeeper-3.5.7 ZK配置参数说明&#xff1a; 1、tickTime2000&#xff1a;通讯心跳时间&#xff0c;zookeeper服务器与客…

笑中带泪《抓娃娃》

【标题】笑中带泪&#xff0c;《抓娃娃》&#xff1a;一场关于成长的中式惊悚喜剧盛宴在这个夏日炎炎的季节里&#xff0c;一部名为《抓娃娃》的电影悄然上映&#xff0c;以沈腾与马丽的黄金搭档再次点燃观众的热情。然而&#xff0c;当笑声在影院回荡时&#xff0c;一股不易察…

搭建图片缓存服务器,解决图片访问403 Forbidden问题

在现代Web开发中&#xff0c;图片是网站和应用的重要组成部分。然而&#xff0c;有时我们在访问某些图片时会遇到403 Forbidden错误&#xff0c;尤其是自己的应用访问互联网上的三方的图片时&#xff0c;这通常是由于别人的服务器设置了访问限制。本文将介绍如何通过搭建一个图…

7月15日学习打卡,二叉搜索树和字符串操作

hello大家好呀&#xff0c;本博客目的在于记录暑假学习打卡&#xff0c;后续会整理成一个专栏&#xff0c;主要打算在暑假学习完数据结构&#xff0c;因此会发一些相关的数据结构实现的博客和一些刷的题&#xff0c;个人学习使用&#xff0c;也希望大家多多支持&#xff0c;有不…