使用jsPDF在react js中转换HTML到PDF不起作用

Question

执行以下函数后出错在函数中，插入了简单的HTMLdiv标记，但仍不能使用

exportPDF函数将在单击一个按钮生成pdf 时调用

功能

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">

无法找出doc.html不在此代码中工作的原因

Answer 1

如果使用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>
);
}

Answer 2

在我看来，您传递jsx是因为它是react js。

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

因为这样做，几个月前我遇到了一个和你一样的案子。最后，我用node.js做了这件事，而不是react.js。node-js和纯html css。