HTML 使用 jsPDF 在 react js 中转换为 PDF 无效

Question

执行以下函数后出现错误在函数中，插入了简单的 HTML div 标签但仍然不起作用

一键生成pdf时会调用exportPDF函数

函数

const exportPDF = () => {
   let element=(<div style={{display: "flex",flexWrap:"wrap"}}>Sample Text</div>)
   const doc = new jsPDF();
   doc.html(element, {
       callback: function (doc) {
            doc.save('sample.pdf');
         }
     });
}

错误

jspdf.es.min.js:128 Uncaught (in promise) Error: Unknown source type.
    at Promise.<anonymous> (jspdf.es.min.js:128:1)

我正在使用 jsPDF 的 npm 包 ("jspdf": "^2.4.0")

无法弄清楚为什么 doc.html 在此代码中不起作用

Answer 1

我认为你传递的是 jsx，因为它是 React js。

如果你在一个简单的项目中尝试使用 HTML js 而不是 react js 我想你会得到结果。

为此，几个月前我遇到过像您这样的案例。最后我用节点 js 做了那件事而不是反应 js。节点 js 和纯 html css.

Answer 2

如果您使用的是 reactjs，只需将您的元素转换为 html，然后将其传递给 jspdf，如下所示

import jsPDF from "jspdf";
import ReactDOMServer from "react-dom/server";

export default function App() {
  const exportPDF = () => {
    let element = (
      <div style={{ display: "flex", flexWrap: "wrap" }}>Sample Text</div>
    );
    const doc = new jsPDF("p", "pt", "letter");
    doc.html(ReactDOMServer.renderToString(element), {
      callback: function (doc) {
        doc.save('sample.pdf');
      }
    });
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={exportPDF}>export</button>
    </div>
  );
}

HTML 使用 jsPDF 在 react js 中转换为 PDF 无效

HTML to PDF convert in react js using jsPDF not working

javascript

html

reactjs

jspdf