Недопустимая ошибка изображения при использовании dataUrl в pdfmake

Question

Я использую pdfmake для создания PDF-документа в угловом приложении и просто пытаюсь добавить изображение к выводу, используя dataURL (следуя документам pdfmake.

        var docDefinition = {
          content: [
            {
              table: {
                widths: ['*'],
                body: [
                  [{text: 'Table text goes here', style: 'tableCellPadded'}]
                ]
              },
            },
            {
              image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACHCAYAAADqQ...AABJRU5ErkJggg==",
              width: 152
            }
            '...various other text lines go here...'
          ],
          styles: {
            header: {
              bold: true,
              fontSize: 14
            },
            tableCellPadded: {
              margin: [0, 15, 0, 15],
              bold: true,
              fontSize: 14
            },
            note: {
              fontSize: 16,
              bold: true,
              italics: true
            }
          }
        };

Однако, когда я пытаюсь распечатать документ, я получаю эту ошибку в своей консоли:

недопустимое изображение, словарь изображений должен содержать записи dataURL (или локальные пути к файлам в node.js)

Насколько я могу судить, я правильно ввел элемент в объект определения документа, и мой dataURL действителен (я проверял его в своем браузере). Что-то еще мне не хватает?

Благодарю.

Answer 1

Хорошо, я исправляю это до ошибки ID-10-T. Моя строка с URL в кодировке base64 работает нормально. Я нашел еще одну строку в моем объекте определения документа, где я не ссылался на изображение должным образом, и эта ошибка выдает ошибку.

Answer 2

вы можете попробовать вот так. и он будет работать нормально. Не забудьте проголосовать

      getBase64ImageFromURL(url) {
return new Promise((resolve, reject) => {
  var img = new Image();
  img.setAttribute("crossOrigin", "anonymous");

  img.onload = () => {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    resolve(dataURL);
  };

  img.onerror = error => {
    reject(error);
  };

  img.src = url;
});

}`async createPdf() {var docDefinition = {content: [

          {
      image: await this.getBase64ImageFromURL(
        "../../assets/ribbonLogo1.png"
      )
    }  ,

`

Answer 3

Я заметил эту ошибку в среде React.

Проблема, похоже, заключается в мутации объекта arguments, который передается в createPdf.

Я исправил это, убедившись, что то, что передается в createPdf, является «чистым» и больше не имеет ссылок на поступающие данные. Это мой код:

            useEffect(() => {

        const iframe = iframeRef.current;
            
        pdfMake
        .createPdf({
            content: JSON.parse(JSON.stringify(content))
        })
        .getBase64((encodedString) => {
            iframeRef.current.src = `data:application/pdf;base64,${encodedString}`;
        })

        return () => iframe.src = 'about:blank';

      }, [content]);