React jspdf生成空白pdf页面答案

【问题标题】：React jspdf generating blank pdf pageReact jspdf生成空白pdf页面
【发布时间】：2021-06-08 18:40:33
【问题描述】：

我正在尝试使用jsPDF 从 HTML 生成 PDF 并在浏览器中显示。

import React from "react";
import jsPDF from "jspdf";

const PDFGenerator = (props) => {
    //const string = props.data;

    const string = `
        <html>
        <head></head>
        <body>
            <p>This is my PDF</p>
        </body>
        </html>
    `;

    const render = () => {
        const pdf = new jsPDF("p", "mm", "a4");
        pdf.html(string);
        var uri = pdf.output("datauri");
        return uri;
    }

    return render();
}

export default PDFGenerator;

当我在 Firefox 中运行代码时，它返回一个空白/空的 pdf。在 Safari 上，它返回 base64 URL。如何在浏览器中显示这个生成的 PDF？

【问题讨论】：

标签： reactjs jspdf

【解决方案1】：

jsPDF 模块用于将静态 HTML 转换为 PDF。并且该 PDF 将是可下载的。如果您希望将 HTML 页面转换为 PDF，然后您想在浏览器上显示它，您将不得不使用任何其他包。据我所知，jsPDF 仅用于您想要将 HTML 转换为 PDF 并想要下载它的地方。

如下图所示。您可以在转换后下载文件。但不能在浏览器中显示。

谢谢。

PS：此图取自 jsPDF 文档。

Documentation screenshot

【讨论】：

你会推荐什么其他的包？
我不确定是否有任何这样的包可用。我有一个窍门给你。转换 PDF 并通过 jsPDF 下载文件后，您可以使用 react-pdf 模块打开此 PDF 文件。但这对于这项小任务来说将是一项漫长的工作。
是的，我正在考虑使用 html-pdf-node 在 nodeJS 中生成 PDF 并在 React 中打开，但它也在 React 中返回一个空白 PDF
请尝试使用 react-pdf 包。仔细阅读它的文档并尝试一下，希望你能得到解决方案。您将需要 pdf 的绝对路径才能使用此模块。然后这个模块会在 react 中渲染 pdf。
这是我的尝试：stackoverflow.com/questions/67893705/…