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

Question

我很难在 ReactJS 中将 PDF 显示为附件。我已设法将 base64 带到前端，但在我尝试创建 blob 对象后它不起作用，尽管它转到 Acrobat reader 但显示错误。请给我任何建议，因为我怎样才能正确地将 base64 转换为 pdf。

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

注：当我尝试在 https://base64.guru/ 修复时它显示无效的字符串和字符（数据：application/pdf;），我尝试使用 content.slice(29); 所以它将从 JVB...（而不是来自 data:application/pdf;base64,JVBERi0xL........) 但得到相同的错误。 Link to pic of Repair 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()函数调用前端-收到响应后


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

打开时出错 Link to PDF file Error pic

Answer 1

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

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

Facing Error when Converting Base64 to PDF file in ReactJS/Javascript

javascript

pdf

pdf-generation

blob

reactjs