web-dev-qa-db-fra.com

Chaîne HTML en fin de page avec jsPDF

J'utilise jsPDF pour générer PDF documents à partir de chaînes HMTL concaténées.

J'ai besoin d'utiliser cette méthode plutôt que getElementById() car je tire le HTML dynamiquement en utilisant TypeScript.

J'ai pu générer le document PDF à partir de la chaîne HTML, le problème est de savoir comment le texte s'affiche sur le PDF - il se trouve à droite de l'écran (image ci-dessous).

Je n'ai pas été en mesure de trouver une réponse à ce problème spécifique et j'ai essayé différentes méthodes pour résoudre ce problème (expliqué ci-dessous) avec peu de succès.

J'espère qu'il existe une approche plus simple, utilisant une marge droite, un habillage de texte ou une autre capacité de formatage dans la bibliothèque jsPDF, vers laquelle quelqu'un pourrait m'indiquer?

Texte à droite du PDF: enter image description here

Au départ, je pensais que l'ajout des options margin et width ci-dessous pourrait corriger cela. Mais ce ne fut pas le cas.

Code TypeScript (fonction principale): 

generatePdf() {
    console.log('Generating PDF');
    // (orientation: portrait, units: pt, PDF page size: A4)
    const doc = new jspdf('p', 'pt', 'a4');
    const editor1Content = this.getEditorHtml(this.editorComponent1); // HTML string
    const editor2Content = this.getEditorHtml(this.editorComponent2); // HTML string
    const source = editor1Content + editor2Content; // combined HTML string
    console.log('source: ', source);
    // source is the HTML string or DOM elem ref. HTML String in this case.
    // width - max width of content on PDF
    // 0.5, 0.5 - margin left, margin top
    const margins = {top: 60, bottom: 30, left: 30, width: 595};
    const pdfDocument = doc.fromHTML(source, margins.left, margins.top, { width: margins.width, },
      // tslint:disable-next-line:only-arrow-functions
      function(dispose) {
        doc.save('news-summary.pdf'); // Generated PDF
      }, margins
    );
  }

Après quelques recherches, j'ai trouvé la fonction jsPDF splitTextToSize(). J'ai utilisé ceci pour diviser la chaîne en un tableau de chaînes et la rejoindre à nouveau avec des balises de saut de ligne <br>.

Cela a partiellement fonctionné, mais a mal formaté le PDF) et a pris de nouvelles lignes lorsqu'il n'est pas nécessaire en raison des restrictions de cette méthode .

Code TypeScript (en utilisant splitTextToSize ()): 

const editor1ContentSplitArray = doc.splitTextToSize(editor1Content, 850);
const source = editor1ContentSplitArray.join('<br>');

Utilisation de sauts de ligne insérés manuellement enter image description here

[~ # ~] edit [~ # ~] Quelques informations supplémentaires à ce sujet:

Je copie le texte ci-dessus d'un autre site Web, je le colle dans un éditeur de texte enrichi (CKEditor 5), Puis j'ai un bouton dont la fonction onClick contient le code TypeScript ci-dessus pour effectuer la conversion.

javascripthtmlpdfjspdfhtml-to-pdf
9
engage_roll

Vous n'avez pas besoin de rejoindre le tableau de chaînes.

Essayez d'insérer le tableau de chaînes dans le doc.fromHtml Ou utiliser doc.text as doc.text prend à la fois une chaîne et un tableau de chaînes comme argument

Voici ce que vous devez faire:

generatePdf() {

    console.log('Generating PDF');

    const doc = new jspdf('p', 'pt', 'a4');

    const editor1Content = this.getEditorHtml(this.editorComponent1); // HTML string
    const editor2Content = this.getEditorHtml(this.editorComponent2); // HTML string

    const concatEditorContent = editor1Content + editor2Content; // combined HTML string


    const margins = {top: 60, bottom: 30, left: 30, width: 595};
    const source = doc.splitTextToSize(concatEditorContent, 850);

    const pdfDocument = doc.fromHTML(source, margins.left, margins.top, { width: margins.width })


    function(dispose) {
        doc.save('news-summary.pdf'); // Generated PDF
    }, margins);

}
1
khizar syed