在 ReactJS/Javascript 中将 Base64 转换为 PDF 文件时遇到错误

Question

我正在努力将 PDF 作为附件显示在 ReactJS 中。 我已经设法将 base64 带到前端，但是在我尝试创建 blob object 之后它不起作用，虽然它进入 Acrobat 阅读器但显示错误。 请有任何建议，我如何正确地将 base64 转换为 pdf。

我还上传了 base64 代码，我在控制台登录 pastebin 时得到了https://pastebin.com/W4zEXyPy

注意：当我尝试在https://base64.guru/进行修复时，它显示无效的字符串和字符（数据：应用程序/pdf；），我尝试使用content.slice(29); 所以它将从JVB... （而不是从data:application/pdf;base64,JVBERi0xL........ ）但得到相同的错误。 链接到维修 Base64 atbase64guru 的图片

Error:未正确解码

• NodeJS 后端代码响应 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() function 调用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();
      };

• 打开指向 PDF 文件的链接时出错 Error pic

Answer 1

一个简单的console.log(content.slice(29))可以揭示你的错误。 问题是content1变量包含一个以“VBE...”开头的字符串，而它必须以“JVBE...”开头。 所以，你的错误是slice() function 丢弃了太多字符。