after executing the below function getting error In function, simple HTML div tags are inserted but still not working
exportPDF function will call when one button will click to generate pdf
Function
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');
}
});
}
Error
jspdf.es.min.js:128 Uncaught (in promise) Error: Unknown source type.
at Promise.<anonymous> (jspdf.es.min.js:128:1)
I'm using npm package of jsPDF ("jspdf": "^2.4.0")
Unable to figure out why doc.html not working in this code
If you are using reactjs just convert your element to html and then pass it to the jspdf like below
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>
);
}
you are passing jsx in my opinion because it is react js.
if you try in a simple project with HTML js and not react js I think you will get result.
for doing this I have a case like you several months ago. finally I did that with node js and not react js. node js and pure html css.