web-dev-qa-db-fra.com

Créer PDF fichier de texte HTML React

Je suis débutant dans react-redux.

J'essaie de créer une fonction telle que l'exportation d'un texte html au format pdf avec Javascript et que cela fonctionne avec html, mais lorsque je l'applique pour réagir à un composant, cela ne fonctionne pas.

Ceci est mon code:

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 avec HTML: https://www.youtube.com/watch?v=HVuHr-Q7HEs

reactjsreactive-programming
10
Longdo

React ne possède pas la propriété "classID" dans les balises html, elle est transmise à div en tant qu'accessoires, qui ne seront jamais résolus . ClassName a été implémenté uniquement parce qu'il est réservé Word dans JS. Vous devez donc remplacer votre "classID" par seule propriété "id" et cela fonctionnera

P.s. JQuery est une mauvaise pratique lorsque tout ce dont vous avez besoin est une manipulation DOM. javascript a document.getElementById () et la dépendance n'est pas nécessaire

P.p.s. Le petit conseil pour vous est que "pdfToHTML () {}" peut être remplacé par lambda comme "pdfToHTML = () => {}", et votre fonction aura "this" de l'instance de la classe, la liaison sera supprimée et le constructeur deviendra inutile .

4
Maksym Bondarchuk

C'est mon chemin

- 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.
0
smartworld-dm