HTML строка в конце страницы с jsPDF - PullRequest
Новая
       49

HTML строка в конце страницы с jsPDF

9 голосов
/ 08 мая 2020

Я использую jsPDF для создания PDF-документов из конкатенированных строк HMTL.

Мне нужно использовать этот метод, а не getElementById(), поскольку я извлекаю HTML динамически с помощью TypeScript .

Мне удалось сгенерировать PDF-документ из HTML String, проблема в том, как текст отображается в PDF-файле - он уходит за правую часть экрана (изображение ниже).

Мне не удалось найти ответ на эту конкретную проблему c, и я безуспешно пробовал различные методы решения этой проблемы (объяснены ниже).

Я надеюсь, что есть более простой подход , используя правое поле, обтекание текстом или некоторые другие возможности форматирования в библиотеке jsPDF, чтобы кто-нибудь мог указать мне на это?

Текст, завершающийся справа от PDF: enter image description here

Изначально я думал, что добавление параметров margin и width ниже может исправить это. Но это было не так.

Код TypeScript (основная функция): 

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
    );
  }

После некоторых исследований я обнаружил функцию jsPDF splitTextToSize(). Я использовал это, чтобы разделить String на String Array и снова присоединиться к тегам <br> разрыва строки.

Это частично сработало, но плохо отформатировал PDF и взял новые строки, когда они не нужны из-за ограничений этого метода.

Код TypeScript (с использованием splitTextToSize ()): 

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

Использование вставленных вручную разрывов строк enter image description here

ИЗМЕНИТЬ Некоторая дополнительная информация по этому поводу:

Я копирую приведенный выше текст с другого веб-сайта, вставляю его в текстовый редактор (CKEditor 5), затем я есть кнопка, которая onClick функция содержит код TypeScript выше для выполнения преобразования.

1 Ответ

1 голос
/ 15 мая 2020

Вам не нужно присоединяться к строковому массиву.

Попробуйте вставить строковый массив в doc.fromHtml или используйте doc.text как c. Text принимает как строковый, так и строковый массив в качестве аргумента

Вот что вам нужно сделать: 

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);

}
...