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

Question

我有一个来自 API 调用的 base 64 字符串。我正在使用示例 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)

Answer 1

base64Decode 和 base64Encode 函数似乎只能在 NodeJS 中使用，你的 React 环境应该无法访问 fs 或 Buffer。

在此处查看他的文件：https://github.com/rpsankar001/base64topdf/blob/master/index.js

而且这个包裹看起来很空，我更喜欢const decodedBase64 = atob("JVBERi0xLjQKJeLjz9M...."); //base64 string

Answer 2

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

Answer 3

您不能使用这个 package，因为它是为 Node.js 而不是为 Web 开发而编写的。如果你进入包源代码，你会看到它正在使用 fs 模块或文件系统。

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

对于网络，您可以使用如下内容：

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-side 代码与 React 一起使用。看来在不久的将来你就可以使用这个包了。

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

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

How To Convert base64 String to PDF in React.js

javascript

reactjs

pdf

base64