如何导出带base64图片的table?

Question

问题描述

需要前端来导出一个这样的列表，其中的图片是以base64形式展示的，试过如果是http/https形式的用export2excel就可以导出带图片的excel文件了，但是base64的图片导出时无法实现

问题出现的环境背景及自己尝试过哪些方法

尝试过export2excel,jquery的tableToExcel,还有以xml形式的代码导出的，其中导出的图片时这样的，无法控制其显示在一个单元格内，应该怎么处理这个情况呢

相关代码

粘贴代码文本（请勿用截图）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

自己慢慢摸索出来了，也是在尝试过诸多办法后才找到的解决方法，把代码贴出来希望能帮到需要的朋友。

import { timeFormat } from '@/filters';
import saveAs from 'file-saver';

const Excel = require('exceljs');

let workbook: any;
let worksheet: any;

function init(): void {
  workbook = new Excel.Workbook();
  workbook.created = new Date();
  workbook.modified = new Date();
  worksheet = workbook.addWorksheet('sheet1');
}

function exportExcel(
  columns: Array<any>,
  Data: Array<any>,
  fileName: string
): void {
  init();
  columns = columns.map((item: { [x: string]: any }) => {
    return Object.assign(
      {},
      {
        header: item.title,
        width: item.types == 'date' || item.types == 'image' ? 30 : 15,
      },
      item
    );
  });
  worksheet.columns = columns;
  for (let i = 0; i < Data.length; i++) {
    let list: Array<any> = [];
    let rowData: { [x: string]: any } = {};
    for (let j = 0; j < columns.length; j++) {
      if (columns[j].types == 'text' || columns[j].types == undefined) {
        rowData[columns[j].key] = Data[i][columns[j].key];
      } else if (columns[j].types == 'date') {
        rowData[columns[j].key] = timeFormat(Data[i][columns[j].key]);
      } else if (columns[j].types == 'image') {
        let imageId2 = workbook.addImage({
          base64: Data[i][columns[j].key],
          extension: 'jpeg',
        });
        worksheet.addImage(imageId2, {
          tl: { col: 0.5 + j, row: 1.5 + i },
          ext: { width: 80, height: 80 },
        });
      }
    }
    // 添加一行数据
    list.push(rowData);
    worksheet.addRows(list);
    // 获取最后一行
    let row = worksheet.lastRow;
    // 设置特定的行高
    row.height = 80;
    row.commit();
    
    // 设置单元格样式
    for (let n = 0; n < columns.length; n++) {
      let dobCol = worksheet.getColumn(n + 1);
      dobCol.eachCell(function(cell: any, rowNumber: number) {
        cell.alignment = { vertical: 'middle', horizontal: 'center' };
      });
    }
  }
  workbook.xlsx.writeBuffer().then((buffer: ArrayBuffer) => {
    (saveAs as any)(
      new Blob([buffer], {
        type: 'application/octet-stream',
      }),
      fileName + '.' + 'xlsx'
    );
  });
}

export { exportExcel };

table用的iview的，所以这里的columns 和 data 直接使用页面的数据就行了，只在columns里面添加了一个types字段，用来控制列宽的，最后效果如图

Answer 2

您好！看到您的《如何导出带base64图片的table?》提问，想咨询下是如何实现的？谢谢！方便的话能否加个QQ，谢谢！！我的QQ：393040460