Set picture to Excel with exceljs

Question

I'm trying to set a picture that I have over my BackEnd I mean the image is in backend.com/images/picture.jpg my question is how can I set that image to the front and export in my excel file? I try to convert the image to Base64 sinse the URL image but doesnt work I was trying with this example Converting an Image url to base64 in Angular

My actual code is

    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');
    });

  }

When I click on the bottom to start the export throw me a error You can check here

But basically says core.js:6140 ERROR Error: Uncaught (in promise): Error: Unsupported media Error: Unsupported media

hope someone can helpme

Set picture to Excel with exceljs

0 Answers0