Ошибка при преобразовании Base64 в файл PDF в ReactJS / Javascript - PullRequest
Новая
       137

Ошибка при преобразовании Base64 в файл PDF в ReactJS / Javascript

1 голос
/ 04 августа 2020

Мне не удается отобразить PDF-файл как вложение в ReactJS. Мне удалось перенести base64 в интерфейс, но после того, как я пытаюсь создать объект blob, он не работает, и хотя он переходит в программу чтения Acrobat, но показывает ошибку. любые предложения, пожалуйста, как я могу правильно преобразовать base64 в pdf.

Я также загрузил код base64, который я получаю при входе в консоль в pastebin, https://pastebin.com/W4zEXyPy

Примечание: Когда я пытаюсь восстановить на https://base64.guru/, он показывает недопустимые строки и символ (data: application / pdf;), я пытался использовать content.slice(29);, поэтому он начнется с JVB... (а не с data:application/pdf;base64,JVBERi0xL........), но с той же ошибкой. Ссылка на pi c восстановления Base64 atbase64guru

Error: некорректно декодируется

  • NodeJS код baackend ответ на вызов API 

         let token = req.cookies.access_token;
         if (token) {
           let Invoice_No_Actual = req.body.invoice_Name;
           res.set("Content-disposition", "attachment; filename=" + `${__dirname}\\` + `${Invoice_No_Actual}` + `.pdf`);
           res.contentType("application/pdf");
           res.send(`data:application/pdf;base64,${new Buffer.from(data).toString("base64")}`);
         }
       });

  • Код внешнего интерфейса вызов API 

     const headers = new Headers();
        headers.append("content-type", "application/json");
        headers.append("responseType", "application/pdf");

        const options = {
          method: "POST",
          headers,
          credentials: "include",
          body: JSON.stringify(invoice_Object),
          // body: "My HTML String",
        };

        const newRequest = new Request("http://localhost:5000/api/invoice-only", options);

        (async () => {
          const invoice_Call = await fetch(newRequest)
            .then((res) => {
              return text1 = res.text();
            })
            .then((data) => {
             generateFile(data, invoice_Name);
            });
        })();
      };

  • generateFile ( ) вызов функции Front End - после получения ответа 


    let generateFile = (content, fileName) => {
    
        console.log("content", content); // here at console if i copy the code and use online tool(https://base64.guru/converter/decode/pdf) it shows the correct pdf

        let content1= content.slice(29);// content1 is correct base64 as if i use it online tool it correctly generate the PDF document
        const blob = new Blob([content1], { type: "application/pdf" });
        console.log(blob);
        const link = document.createElement("a");
        link.href = window.URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
      };

1 Ответ

1 голос
/ 13 августа 2020

Простой console.log(content.slice(29)) может выявить вашу ошибку. Проблема в том, что переменная content1 содержит строку, которая начинается с «VBE…», тогда как она должна начинаться с «JVBE…». Итак, ваша ошибка в том, что функция slice() отбрасывает слишком много символов.

...