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

news2024/9/23 3:23:50

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

首先:

import table2excel from 'js-table2excel
// 导出表格  按钮点击后触发事件
const onBatchExport = () => {
  
    const column = [
    //数据表单
    {
      title: "ID", //表头名称title
      key: "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.coloradmin.cn/o/1932645.html

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

相关文章

webpack和vite

构建工具 Webpack 概念 本质上&#xff0c;webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时&#xff0c;它会在内部从一个或多个入口点构建一个依赖图(dependency graph)&#xff0c;然后将你项目中所需的每一个模块组合成一个或…

【单片机毕业设计选题24069】-物联网节水灌溉系统设计

系统功能: 完成基于物联网的节水灌溉系统的电路图以及软件代码编写。要求系统可以通过传感器监测土壤的湿度和环境温湿度&#xff0c;如果土壤湿度低于限值和环境温湿度超过限值&#xff0c;则需开启继电器&#xff0c;打开电机水泵进行供水灌溉&#xff1b;当土壤湿度高于限值…

有关电力电子技术的一些相关仿真和分析:⑦三相桥式电压型PWM逆变器与直接/间接法控制单相全桥结构PWM整流器(MATLAB/Siumlink仿真)

1.1 题目一要求 以三相桥式电压型PWM逆变器为对象,研究其在不同调制度下,输出电压的频谱成分变化,依据仿真波形分析其工作时序。 参数要求:三相桥式逆变电路,直流侧电压800V,调制波频率50HZ,开关频率10kHZ,阻感负载R=10Ω,L=5mH。 1.2 题目二要求 以单相全桥结构P…

泛域名ssl生成

ssl生成 参考文档 https://github.com/acmesh-official/acme.sh/wiki/%E8%AF%B4%E6%98%8E安装acme curl https://get.acme.sh | sh -s email[此处放githup的邮箱]例&#xff1a;curl https://get.acme.sh | sh -s emailmyexample.com手动 dns 方式 // 1.触发验证&#xf…

llama-index,uncharted and llama2:7b run locally to generate Index

题意&#xff1a;本地运行 llama-index、uncharted 以及 llama2:7b 来生成索引 问题背景&#xff1a; I wanted to use llama-index locally with ollama and llama3:8b to index utf-8 json file. I dont have a gpu. I use uncharted to convert docs into json. Now If it …

MongoDB自学笔记(三)

一、前文回顾 上一篇文章中我们学习了更新操作&#xff0c;以及讲解了部分的更新操作符&#xff0c;今天我们继续学习剩余的更新操作符。 二、更新操作符 1、$rename 语法&#xff1a;{ $rename: { < field1 >: < newName1 >, < field2 >: < newName2…

【python】多种回归算法对比气温预测

目录 引言 决策树回归&#xff08;Decision Tree Regression&#xff09; 线性回归&#xff08;Linear Regression&#xff09; 随机森林回归&#xff08;Random Forest Regression&#xff09; 气温预测对比实例 数据集 预测值与实际值对比图 模型评价指标 代码实现 …

【Neural signal processing and analysis zero to hero】- 2

Nonstationarities and effects of the FT course from youtube: 传送地址 why we need extinguish stationary and non-stationary signal, because most of neural signal is non-stationary. Welch’s method for smooth spectral decomposition Full FFT method y…

vim网络和安全的操作及shell的使用

目录 vim模式 一般模式下的基本操作&#xff1a; 一般模式切换到编辑模式&#xff1a; 一般模式切换到命令模式&#xff1a; Vim多窗口使用技巧 横向切割打开&#xff1a; 纵向切割打开&#xff1a; 关闭多窗口&#xff1a; 窗口的切换&#xff1a; 网络&#xff1a;…

django学习入门系列之第四点《BootStrap依赖》

文章目录 往期回顾 BootStrap依赖于JavaScript的类库&#xff0c;JQuery下载 下载JQuery&#xff0c;在界面上应用JQuery 在页面上应用BootStrap和avaScript的类库【JQuery是avaScript的类库】 JQuery的官网&#xff1a; jQuery 如果要应用JQuery 则要在body里面导入文件…

信息安全CISSP认证重点学什么?学习后能掌握哪些安全技能?

引言&#xff1a; 想要在信息安全领域取得突破&#xff1f;那么CISSP认证是您必不可少的一步&#xff01;本文将为您介绍CISSP认证的重点学习内容以及学习后可以掌握的安全技能&#xff0c;助您更好地了解并准备这一全球认可的信息安全证书。 随着信息安全领域的不断发展&…

uniapp小程序上传pdf文件

<template><view class"mainInnBox"><view class"formBox"><!-- 注意&#xff0c;如果需要兼容微信小程序&#xff0c;最好通过setRules方法设置rules规则 --><u-form :model"form" ref"uForm" :rules&quo…

抖音seo短视频账号矩阵系统源码-SaaS开源部署流程开发者技术分享

抖音seo账号矩阵系统&#xff0c;短视频矩阵系统源码&#xff0c; 短视频矩阵是一种常见的视频编码标准&#xff0c;通过多账号一键授权管理的方式&#xff0c;为运营人员打造功能强大及全面的“矩阵式“管理平台。使用矩阵系统也能保证账号的稳定性&#xff0c;降低账号的风险…

数据结构之双向链表(赋源码)

数据结构之双向链表(源码) 线性表 双向链表是线性表链式存储结构的一种&#xff0c;若对链式存储结构进行分类可以分为八种。 带头、不带头&#xff1a;指的是该连链表有无头节点&#xff0c;头节点不存放任何内容&#xff0c;它不一定是链表必备的元素&#xff0c;而一个链…

ros2--launch

是什么 ros2的多节点启动工具。 作用 通过launch工具执行launch文件&#xff0c;可以启动launch文件中配置的多个节点&#xff0c;以及这些启动的节点配置数据。 launch文件的实现 ROS2的launch文件有三种格式&#xff0c;python、xml、yaml。 链接 python语言创建launch文…

Elasticsearch 批量更新

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

微服务实战系列之玩转Docker(三)

前言 镜像&#xff08;Image&#xff09;作为Docker的“水源”&#xff0c;取之于它&#xff0c;用之于它。这对于立志成为运维管理的撒手锏——Docker而言&#xff0c;重要性不言而喻。 我们在虚拟机时代&#xff08;当然现在依然ing…&#xff09;&#xff0c;如何快速完成…

硅谷裸机云多IP服务器怎么样?

硅谷裸机云多IP服务器是一种在硅谷地区提供的、具有多个IP地址的裸机云服务器。这种服务器结合了裸机服务器的高性能和云服务器的灵活性&#xff0c;同时提供了多个IP地址&#xff0c;为用户的各种需求提供了支持。以下是关于硅谷裸机云多IP服务器的一些详细信息&#xff0c;ra…

3.RabbitMQ安装-Centos7

官方网址&#xff1a;gInstalling RabbitMQ | RabbitMQ 安装前提&#xff0c;需要一个erlang语言环境。 下载 erlang: Releases rabbitmq/erlang-rpm GitHub rabbitmq-server: 3.8.8 Releases rabbitmq/rabbitmq-server GitHub 安装命令 (说明i表示安装&#xff…

华清数据结构day2 24-7-17

1> 完成班级的创建&#xff0c;创建时&#xff0c;需要传递班级实际人数 2> 完成班级学生的信息录入工作 3> 完成将班级学生按成绩进行降序排序工作 4> 输出班级中成绩最好和最差学生的信息 5> 完成信息的输出工作 6> 完成班级的销毁工作 要求&#xff1a;班…