如何在React.js中将base64字符串转换为PDF

Question

我有一个来自API调用的Base64字符串。我正在使用一个示例Base64字符串进行测试，并尝试将其转换为PDF或图像以在我的React.js网站上查看。

我尝试了很多解决方案，但似乎没有什么起作用的。我找到了一个名为base64topdf的React js包，安装了它并尝试将Base64字符串解码为PDF，但它给了我这个错误"TypeError: fs.writeFileSync is not a function" 我不知道我做错了什么。

如何在Reactjs中将Base64字符串转换为PDF或图像？

该包的文档：https://www.npmjs.com/package/base64topdf 这是我的代码：

 const base64 = require('base64topdf');

 const base64STR = "JVBERi0xLjQKJeLjz9M...." //base64 string

 const decodedBase64 = base64.base64Decode(base64STR, 'waybill');

 console.log(decodedBase64)

- motionless570

---

@ikhvjs 这是完全不同的事情，我想要转换成PDF。 - motionless570

Answer 1

尝试这个 <embed src={`data:application/pdf;base64,${base64STR}`} />

- AKAA

---

谢谢，这个起作用了！ - motionless570

它也适用于其他类型的文件，如pptx、docs等。 - Musiur Alam Opu

Answer 2

由于该软件包是为Node.js编写的而不是用于Web开发，因此您无法使用它。 如果您查看软件包源代码，您会发现它正在使用fs模块或文件系统。

https://github.com/rpsankar001/base64topdf/blob/master/index.js#L3

---

对于Web应用程序，您可以使用类似于以下内容：

function downloadPDF(pdf) {
    const linkSource = `data:application/pdf;base64,${pdf}`;
    const downloadLink = document.createElement("a");
    const fileName = "file.pdf";

    downloadLink.href = linkSource;
    downloadLink.download = fileName;
    downloadLink.click();
}

---

值得一提的是，React有一个即将推出的功能叫做Server Components，它将允许您在React中使用服务器端代码。看起来在不久的将来，您将能够使用这个包。

参见：https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html

- Abraham

Answer 3

看起来函数base64Decode和base64Encode应该只在NodeJS中使用，你的React环境不应该能够访问fs或Buffer。

请查看此文件：https://github.com/rpsankar001/base64topdf/blob/master/index.js

此外，这个包似乎非常空洞，我更喜欢const decodedBase64 = atob("JVBERi0xLjQKJeLjz9M...."); //base64 string

- karkael

---

你能否提供一个详细的完整答案吗？这并没有太大帮助，它只让我知道在React中不能使用此函数，只能在Node.js中使用。 - motionless570

好的：因为您在浏览器中，所以请使用atob而不是base64topdf。 - karkael