关于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://xiahunao.cn/news/3248321.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

新手小白的pytorch学习第五弹-----pytorch的工作流

我们之前学习了 pytorch 中的基本数据 tensor 今天我们要开始学习 pytorch 的简单工作流程了 数据 -> 构建或选择一个预训练的模型 -> 使得模型适应数据并能够进行预测 -> 评估模型 -> 通过实验提升性能 -> 保存并重新加载你训练的模型 机器学习和深度学习的关…

解决mysql,Navicat for MySQL,IntelliJ IDEA之间中文乱码

使用软件版本 jdk-8u171-windows-x64 ideaIU-2021.1.3 mysql-essential-5.0.87-win32 navicat8_mysql_cs 这个问题我调试了好久&#xff0c;网上的方法基本上都试过了&#xff0c;终于是解决了。 三个地方结果都不一样。 方法一 首先大家可以尝试下面这种方法&#xff1a…

Github 2024-07-15 开源项目周报 Top15

根据Github Trendings的统计,本周(2024-07-15统计)共有15个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目5非开发语言项目4JavaScript项目3TypeScript项目2Go项目1Solidity项目1Java项目1Rust项目1免费编程学习平台:freeCodeCamp.org 创建…

数据库系统概论:数据库完整性

引言 数据库是现代信息系统的心脏&#xff0c;数据的准确性和一致性对于业务流程至关重要。数据库完整性是确保数据质量的基石&#xff0c;它涵盖了数据的正确性、相容性和一致性&#xff0c;是数据安全与业务连续性的保障。 数据库完整性是指数据的精确性、可靠性和逻辑一致…

选择项目进度系统的10大必知软件

国内外主流的10款项目进度软件对比&#xff1a;PingCode、Worktile、蓝凌EIS智慧工作平台、Teambition、Tapd、Tower、Monday.com、ClickUp、Asana、Jira。 在选择项目进度系统时&#xff0c;你是否感到困惑或不确定如何挑选最适合自己团队的工具&#xff1f;市场上的众多选项和…

Uncaught (in promise) TypeError: Object(...) is not a function at eval

踩坑: Uncaught (in promise) TypeError: Object(...) is not a function at eval_at object.eval [as fullvalidate] (eval at <anonymo-CSDN博客 又新添一个错误的出现方式&#xff0c;后台启动没问题&#xff0c;但是我的数据库是无法自行启动的&#xff0c;这就导致在查…

Redis-布隆过滤器(Bloom Filter)详解

文章目录 什么是布隆过滤器 布隆过滤器的优点&#xff1a;布隆过滤器的缺点&#xff1a;其他问题 布隆过滤器适合的场景布隆过滤器原理 数据结构增加元素查询元素删除元素 如何使用布隆过滤器 Google开源的Guava自带布隆过滤器Redis实现布隆过滤器 Redis中配置布隆过滤器Redis…

MYSQL 四、mysql进阶 9(数据库的设计规范)

一、为什么需要数据库设计 二、范 式 2.1 范式简介 在关系型数据库中&#xff0c;关于数据表设计的基本原则、规则就称为范式。 可以理解为&#xff0c;一张数据表的设计结 构需要满足的某种设计标准的 级别 。要想设计一个结构合理的关系型数据库&#xff0c;必须满足一定的…

品牌出海“掘金”的王牌账号:亚马逊VC——WAYLI威利跨境助力商家

在全球化的大潮中&#xff0c;B2B模式已然成为品牌出海“掘金”的王牌账号&#xff0c;特别是在亚马逊VC这一强大平台的加持下。亚马逊VC不仅是企业间贸易的桥梁&#xff0c;更是品牌国际化的加速器。 亚马逊VC&#xff0c;为企业提供了直接进入亚马逊全球供应链的机遇。这不仅…

神经网络中如何优化模型和超参数调优(案例为tensor的预测)

总结&#xff1a; 初级&#xff1a;简单修改一下超参数&#xff0c;效果一般般但是够用&#xff0c;有时候甚至直接不够用 中级&#xff1a;optuna得出最好的超参数之后&#xff0c;再多一些epoch让train和testloss整体下降&#xff0c;然后结果就很不错。 高级&#xff1a;…

盛夏畅饮狂欢,肆拾玖坊肆玖嘿哈精酿白啤陪你嗨啤!

盛夏的炎热,犹如烈火燃烧,让人无法抵挡那股渴望畅饮的冲动。在这个时节,你是否也期待着与亲朋好友欢聚一堂,聚餐畅饮,共度清凉惬意的时光?快来!肆拾玖坊的肆玖嘿哈喊你一起嗨啤了! 提及啤酒,想必大家都不会陌生。这个古老的饮品,自公元前3世纪起便与人类相伴,穿越历史的长河,时…

【ProtoBuf】proto 3 语法 -- 详解

这个部分会对通讯录进行多次升级&#xff0c;使用 2.x 表示升级的版本&#xff0c;最终将会升级如下内容&#xff1a; 不再打印联系人的序列化结果&#xff0c;而是将通讯录序列化后并写入文件中。 从文件中将通讯录解析出来&#xff0c;并进行打印。 新增联系人属性&#xff…

常用指标和损失总结

损失 回归问题 L1损失 L1 损失是最小化模型参数的绝对值之和。 倾向于使模型参数接近零&#xff0c;导致模型变得更加稀疏。这意味着一些特征的权重可能变为零&#xff0c;从而被模型忽略。 对异常值非常敏感。异常值会导致参数权重绝对值增大&#xff0c;从而影响模型的整…

2024年【电工(高级)】考试报名及电工(高级)模拟考试题库

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 电工&#xff08;高级&#xff09;考试报名参考答案及电工&#xff08;高级&#xff09;考试试题解析是安全生产模拟考试一点通题库老师及电工&#xff08;高级&#xff09;操作证已考过的学员汇总&#xff0c;相对有…

【Charles】-雷电模拟器-抓HTTPS包

写在前面 之前的文章我们写过如何通过Charles来抓取IOS手机上的HTTPS包以及遇到的坑。说一个场景&#xff0c;如果你的手机是IOS&#xff0c;但是团队提供的APP安装包是Android&#xff0c;这种情况下你还想抓包&#xff0c;怎么办&#xff1f; 不要慌&#xff0c;我们可以安装…

Elasticsearch 批量更新

Elasticsearch 批量更新 准备条件查询数据批量更新 准备条件 以下查询操作都基于索引crm_flow_info来操作&#xff0c;索引已经建过了&#xff0c;本文主要讲Elasticsearch批量更新指定字段语句&#xff0c;下面开始写更新语句执行更新啦&#xff01; 查询数据 查询指定shif…

Java基础 —— 项目一:ATM存取款系统

目录 一、系统架构搭建 二、系统欢迎页设计 三、用户开户功能 卡号去重复 根据卡号查找账户 四、用户登录功能 展示用户登录后的操作页面 查询账户信息 存款 取款 转账 销户 修改密码 五、整体代码 1.账户类Account 2.银行系统类ATM 3.测试类Test 运行结果 他人之得&#xff0c…

什么是AGI?以及AGI最新技术如何?

首先&#xff0c;AGI是Artificial General Intelligence的缩写&#xff0c;意为人工通用智能。AGI指的是一种拥有与人类相当智能水平的人工智能系统&#xff0c;能够在各种不同的任务和环境中进行智能决策和问题解决。与目前大多数人工智能系统只能在特定领域下执行特定任务不同…

上线 Airflow 官方!DolphinDB 带来数据管理新体验

在数据驱动的商业时代&#xff0c;企业对数据的实时处理和分析能力提出了更高的要求。同时&#xff0c;自动化地管理及优化数据处理流程&#xff0c;以提升效率和精准度&#xff0c;始终是企业不断追求的目标。 近期&#xff0c; DolphinDB 正式登陆 Apache Airflow 官方&…

悠律Ringbud pro开放式耳机:双奖设计,开放式畅听的舒适体验

悠律Ringbud pro凝声环开放式耳机 凭借其潮酷的外观&#xff0c;轻奢的体验&#xff0c;斩获2024红点设计奖&#xff1a;德国红点奖设立于1955年&#xff0c;被公认为国际性创意和设计的认可标志&#xff1b;而且还获得美国MUSE设计金奖&#xff1a;美国MUSE设计奖是最具代表性…