使用 jsPdf 的 html 到 pdf 不适用于反应应用程序答案

【问题标题】：html to pdf using jsPdf is not working with react app使用 jsPdf 的 html 到 pdf 不适用于反应应用程序
【发布时间】：2022-06-21 03:18:47
【问题描述】：

我正在使用 react 作为前端应用程序，我想使用 jsPdf 将部分 react 组件导出为 pdf 文件。

const handleDownload = () => {
  const content = document.getElementById('download-content');
  const doc = new jsPDF();
  doc.html(content);
  doc.save("a4.pdf");
}

React 返回组件为：

return (
<body>
  <header id='download-content'>
    <div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
    <div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
    <div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
    <div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
    <div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
    <div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
  </header>
  <footer>
    <button onClick={handleDownload}>Download</button>
  </footer>
</body>
)

点击Download按钮后，我想要一个包含header标签数据和样式的pdf文件。但是在这里我得到了带有此功能handleDownload的空白pdf。

我不想用canvas生成图像然后制作pdf。如果我使用canvas，当页面大小最小化时pdf会改变。

如何获得准确的 html 生成页面为 pdf？

【问题讨论】：

标签： reactjs react-hooks jspdf

【解决方案1】：

两件事：

在 react 中访问 DOM 元素时，您应该始终使用 useRef
看来.html 方法是异步的，需要回调

一个可行的例子是这样的：

import { useRef } from 'react';
import { jsPDF } from 'jspdf';

export default function PDF() {
    const pdfRef = useRef(null);

    const handleDownload = () => {
        const content = pdfRef.current;

        const doc = new jsPDF();
        doc.html(content, {
            callback: function (doc) {
                doc.save('sample.pdf');
            }
        });
    };

    return (
        <div>
            <header ref={pdfRef}>
                <div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
                <div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
                <div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
                <div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
                <div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
                <div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
            </header>
            <footer>
                <button onClick={handleDownload}>Download</button>
            </footer>
        </div>
    );
}

更新

如果您需要控制大小，可以按照上面引用的文档添加其他属性：

选项 1 - 使用 html2canvas 选项并控制比例：

const handleDownload = () => {
    const content = pdfRef.current;

    const doc = new jsPDF();
    doc.html(content, {
        callback: function (doc) {
            doc.save('sample.pdf');
        },
        html2canvas: { scale: 0.5 } // change the scale to whatever number you need
    });
};

选项 2 - 使用 width 和 windowWidth：

const handleDownload = () => {
    const content = pdfRef.current;

    const doc = new jsPDF();
    doc.html(content, {
        callback: function (doc) {
            doc.save('sample.pdf');
        },
        width: 200, // <- here
        windowWidth: 200 // <- here
    });
};

【讨论】：

谢谢。但未显示完整的div 标签。这是截断一半的内容。我怎样才能正确地得到所有的东西。此外，当我做出响应时，pdf 中的内容不会保持不变。它也变得像响应..但我希望它像全页视图一样标准
您可以根据需要根据文档添加width 和windowWidth。查看更新的答案
@JhonArab 基本上，您需要查看 lib 提供的所有选项，并弄清楚如何使用它来满足您的需求......
非常感谢。你太棒了。

【解决方案2】：

// use can you ReactDOMServer.renderToString(element) 

import { renderToString } from "react-dom/server";
import { jsPDF } from "jspdf";
export const dow = () => {
  let htmlElement = <div>Hello </div> 
  let elementAsString = renderToString(htmlElement);
  var doc = new jsPDF();
  doc.html(elementAsString, {
    callback: function (doc) {
      doc.save("test.pdf");
    },
    x: 10,
    y: 10,
  });
};

【讨论】：