当前位置: 首页 > article >正文

vue实现导出excel表,调整图片大小

步骤:

//安装插件
npm install js-table2excel
//导入
import table2excel from 'js-table2excel
// 导出按钮点击后触发事件
const onBatchExport = () => {
  //导出的规则
  //title是导出的表头
  //key是你的数据的属性
  //type是导出的类型
 const column = [
    {
      title: '序号',
      key: 'id',
      type: 'text',
    },
    {
      title: '用户名称',
      key: 'name',
      type: 'text',
    },
    {
      title: '用户头像',
      key: 'image',
      type: 'image',
      width: 80,
      height: 80,
    },
    {
      title: '消费金额',
      key: 'money',
      type: 'text',
    },
    {
      title: '加入时间',
      key: 'addtime',
      type: 'text',
    }
  ]
 
  const tableDatas = JSON.parse(JSON.stringify(data.value))//data.value是你的数据
  table2excel(column, tableDatas, `用户列表`)
};

在node_modules/js-table2excel/src/index.js中更改图片的尺寸,找到getImageHtml函数,进行替换

	function getImageHtml(val, options) {
		options = Object.assign({ width: 40, height: 60, scale: 0.65 }, options);
		const imgWidth = options.width * 0.67;
		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>`;
	}

也可以自行调整缩放比


http://www.kler.cn/a/430374.html

相关文章:

  • 【生物信息】如何使用 h5py 读取 HDF5 格式文件中的数据并将其转换为 NumPy 数组
  • 【Web】0基础学Web—事件对象、事件委托(事件代理)——星级评论案例
  • Flask返回浏览器无乱码方法
  • MySQL和Hive中的行转列、列转行
  • 从Linux本地软件存储库安装MySQL
  • 【Cesium】自定义材质,添加带有方向的滚动路线
  • ios逆向某新闻 md5+aes
  • Oracle清除水位
  • 5G Multicast/Broadcast Services(MBS) (八) MBS多播DRX
  • Reclone映射webdav到本地(Linux)
  • 《探索形象克隆:科技与未来的奇妙融合》
  • 练7:模拟
  • 【服务器部署应用由http协议切换为https】
  • 【MARL】MAT论文阅读笔记
  • 【docker集群应用】Docker Compose
  • 沃丰科技智能客服在跨境电商独立站中的核心角色
  • 在Ubuntu上使用docker compose安装N卡GPU的Ollama服务
  • 什么是云原生数据库 PolarDB?
  • Linux学习笔记14 了解磁盘:何为HDD,SSD?sata?PCIE?分区,MBR,GPT (上)
  • vue3 rective 全家桶,to类了解 (1)
  • 项目实践----Spring Boot整合Kafka,实现单条消费和批量消费
  • 河南省的教育部科技查新工作站有哪些?
  • SpringBoot篇(缓存层)
  • 《数据结构》(应用题)
  • Android 因为混淆文件配置,打release包提示running R8问题处理
  • 从0开始边做边学,用vue和python做一个博客,非规范化项目,怎么简单怎么弄,跑的起来有啥毛病解决啥毛病(三)