欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 维修 > vue实现导出excel表,调整图片大小

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

2025/4/23 7:47:56 来源:https://blog.csdn.net/zhang20040217/article/details/144327909  浏览:    关键词: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>`;}

也可以自行调整缩放比

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词