关于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;前…

c++ primer plus 第16章string 类和标准模板库,string 类输入

c primer plus 第16章string 类和标准模板库,string 类输入 c primer plus 第16章string 类和标准模板库,string 类输入 文章目录 c primer plus 第16章string 类和标准模板库,string 类输入16.1.2 string 类输入程序清单 16.2 strfile.cpp 16.1.2 string 类输入 对于类&…

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

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

题解|2023暑期杭电多校03

【原文链接】 &#xff08;补发&#xff09;题解|2023暑期杭电多校03 1011.8-bit Zoom 不那么签到的签到题、模拟题 题目大意 给定一个 n n n\times n nn 大小的字符矩阵表示一张图片&#xff0c;每种字符代表一种颜色&#xff1b;并给定 Z Z Z 代表缩放倍率 满足以下条…

无人驾驶的未来: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;武汉城市开…

【Pyhton】Pip换源(Windows)

在Python中使用pip换源的方法可以通过修改pip配置文件来实现。具体步骤如下&#xff1a; 暂时修改&#xff08;只应用于本次下载&#xff09; pip install 库名 -i 国内源链接/simple --trusted-host 国内源链接 常见的国内源链接见下方永久修改中的内容。 示例&#xff1a…

【ffmpeg命令入门】ffmpeg转码过程

文章目录 前言转码图示过程含义总结 前言 在数字媒体处理领域&#xff0c;ffmpeg 是一款非常强大的工具&#xff0c;它支持多种音视频格式&#xff0c;可以进行转码、剪辑、滤镜等操作。ffmpeg 的强大功能和灵活性使其成为了音视频处理的首选工具。然而&#xff0c;由于其功能…

python-Web

FLASK整体框架: from flask import Flask,render_templateapp Flask(__name__)app.route("/show/info")#网址 def index():#网址对应的函数return render_template("index.html")#falsk 支持将字符串写入文件if __name____main__:app.run()#访问网站的时…

Java中的压缩与解压缩操作详解

Java中的压缩与解压缩操作详解 在Java编程中&#xff0c;处理压缩和解压缩文件是一个常见的需求。Java提供了多种方式来实现这些操作&#xff0c;包括使用标准的Java类库和第三方库。 本文将介绍如何使用Java进行压缩和解压缩操作&#xff0c;涵盖基本的压缩文件格式如ZIP以及…

获取JVM虚拟机的内存和CPU核心数

获取内存和核心数量 Runtime runtime Runtime.getRuntime();long freeMemory runtime.freeMemory();long maxMemory runtime.maxMemory();long totalMemory runtime.totalMemory();int availableProcessors runtime.availableProcessors();System.out.println("空闲内…

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

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

Android中Context概述

目录 一 概念二 使用三 注意事项 一 概念 Context&#xff0c;上下文&#xff0c;可以获取应用的资源和信息。Context在加载资源、启动Activity、获取系统服务、创建View等操作都要参与。它提供了关于应用环境全局信息的接口。它是一个抽象类&#xff0c;它的执行被Android系统…