Soy principiante en react-redux.
Intento crear una función como exportar un texto html a pdf con Javascript y funciona con html, pero cuando lo aplico para reaccionar componente, no funciona.
Este es mi código:
import React from 'react'; class App extends React.Component { constructor(props){ super(props); this.pdfToHTML=this.pdfToHTML.bind(this); } pdfToHTML(){ var pdf = new jsPDF('p', 'pt', 'letter'); var source = $('#HTMLtoPDF')[0]; var specialElementHandlers = { '#bypassme': function(element, renderer) { return true } }; var margins = { top: 50, left: 60, width: 545 }; pdf.fromHTML ( source // HTML string or DOM elem ref. , margins.left // x coord , margins.top // y coord , { 'width': margins.width // max width of content on PDF , 'elementHandlers': specialElementHandlers }, function (dispose) { // dispose: object with X, Y of the last line add to the PDF // this allow the insertion of new lines after html pdf.save('html2pdf.pdf'); } ) } render() { return ( <div> <div classID="HTMLtoPDF"> <center> <h2>HTML to PDF</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing </p> </center> </div> <button onClick={this.pdfToHTML}>Download PDF</button> </div> ); } } export default App;Javascript con HTML: https://www.youtube.com/watch?v=HVuHr-Q7HEs
React no tiene la propiedad "classID" en las etiquetas html, se pasa a div como accesorios, lo que nunca se resolverá. className solo se implementó porque es una palabra reservada en JS, tal vez necesite reemplazar su "classID" por solo la propiedad "id" y funcionará
Ps JQuery es una mala práctica cuando todo lo que necesita es manipulación DOM. javascript tiene document.getElementById() y no se necesita dependencia
El pequeño consejo de Pps para usted es "pdfToHTML () {}" se puede reemplazar a lambda como "pdfToHTML = () => {}", y su función tendrá "esto" de instancia de clase, el enlace se eliminará y el constructor se convertirá inútil.
Esta es mi manera
- You can use that package in pure javascript file or server side(Backend) - When you use it with the ReactJS(Frontend), it doesn't work. - So I didn't use that. - With html2canvas and jsPDF, I could build pdf. - First build component, then save(download) it.