首页 > 解决方案 > 使用exceljs将图片设置为Excel

问题描述

我正在尝试设置我在后端拥有的图片我的意思是图像在backend.com/images/picture.jpg我的问题中是如何将该图像设置在前面并导出到我的 excel 文件中?我尝试将图像转换为 Base64 格式的 URL 图像但不起作用我正在尝试使用此示例在 Angular 中将图像 url 转换为 base64

我的实际代码是

    convertBlobToBase64(blob: Blob) {
      return Observable.create(observer => {
        const reader = new FileReader();
        const binaryString = reader.readAsDataURL(blob);
        reader.onload = (event: any) => {
          this.file_piece_correct = event.target.result
          observer.next(event.target.result);
          observer.complete();
        };
    
        reader.onerror = (event: any) => {
          console.log("File could not be read: " + event.target.error.code);
          observer.next(event.target.error.code);
          observer.complete();
        };
      });
    }

generateExcel(dataExcel) {

  this.http.get('http://127.0.0.1:8000' + dataExcel.file_piece_correct, { responseType: 'blob' })

    .pipe(
      switchMap(blob => this.convertBlobToBase64(blob))
    )
    .subscribe(base64ImageUrl => console.log(base64ImageUrl));


  let dataEpp = JSON.parse(dataExcel.epp)
  const title = 'Instruccion de trabajo';
  // Create workbook and worksheet
  const workbook = new Workbook();
  const worksheet = workbook.addWorksheet('Instruccion de trabajo');

  const imageId2 = workbook.addImage({
    base64: this.file_piece_correct,
    extension: 'jpeg',
  });

worksheet.addImage(imageId2, 'B13:D13');

 worksheet.getColumn(3).width = 30;
    worksheet.getColumn(4).width = 30;
    worksheet.addRow([]);


    // Footer Row
    const footerRow = worksheet.addRow(['This is system generated excel sheet.']);
    footerRow.getCell(1).fill = {
      type: 'pattern',
      pattern: 'solid',
      fgColor: { argb: 'FFCCFFE5' }
    };
    footerRow.getCell(1).border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };

    // Merge Cells
    worksheet.mergeCells(`A${footerRow.number}:F${footerRow.number}`);

    // Generate Excel File with given name
    workbook.xlsx.writeBuffer().then((datafirstHeader: any) => {
      const blob = new Blob([datafirstHeader], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      fs.saveAs(blob, 'SocialShare.xlsx');
    });

  }

当我点击底部开始导出时,我会报错 你可以在这里查看

但基本上说core.js:6140 ERROR Error: Uncaught (in promise): Error: Unsupported media Error: Unsupported media

希望可以有人帮帮我

标签: angulartypescriptexceljs

解决方案


推荐阅读