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>`;
}

也可以自行调整缩放比

原文地址：https://blog.csdn.net/zhang20040217/article/details/144327909

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！