después de ejecutar la siguiente función, se obtiene un error En la función, se insertan etiquetas div HTML simples pero aún no funcionan
La función exportPDF llamará cuando se haga clic en un botón para generar pdf
Función
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)Estoy usando el paquete npm de jsPDF ( "jspdf": "^2.4.0" )
No se puede averiguar por qué doc.html no funciona en este código
Si está utilizando reactjs , simplemente convierta su elemento a html y luego páselo a jspdf como se muestra a continuación.
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> ); }estás pasando jsx en mi opinión porque es reaccionar js.
si intenta en un proyecto simple con HTML js y no reacciona js, creo que obtendrá resultados.
por hacer esto tengo un caso como el tuyo hace varios meses. finalmente lo hice con el nodo js y no reaccioné js. nodo js y html css puro.