Экспорт PDF из HTML в угловых 6 - PullRequest
Новая
       23

Экспорт PDF из HTML в угловых 6

0 голосов
/ 20 ноября 2018

Я хочу экспортировать pdf из html в angular 6. Итак, я использую библиотеку jspdf. Но я не могу дать стиль, как цвет и цвет фона. Как мне этого добиться? (Если есть какая-либо другая бесплатная библиотека из jspdf, я могу ее использовать) Вы можете увидеть демо по ссылке ниже.

DEMO

.ts file 

export class AppComponent  {
  @ViewChild('reportContent') reportContent: ElementRef;

    downloadPdf() {
    const doc = new jsPDF();
    const specialElementHandlers = {
      '#editor': function (element, renderer) {
        return true;
      }
    };

    const content = this.reportContent.nativeElement;

    doc.fromHTML(content.innerHTML, 15, 15, {
      'width': 190,
      'elementHandlers': specialElementHandlers
    });

    doc.save('asdfghj' + '.pdf');
  }
}

.html файл 

<div #reportContent class="p-col-8 p-offset-2">
  <table>
    <tr>
      <td style="color: red;background-color: blue;border:solid;">1111
      </td>
      <td style="border:solid;">2222
      </td>
    </tr>
  </table>
</div>

<button pButton type="button" label="Pdf" (click)="downloadPdf()">Export Pdf</button>

Ответы [ 3 ]

0 голосов
/ 01 февраля 2019

</p> <pre><code>captureScreen() { const pdf = new jsPDF('p', 'mm'); const promises = $('.pdf-intro').map(function(index, element) { return new Promise(function(resolve, reject) { html2canvas(element, {allowTaint: true, logging: true}).then(function(canvas) { resolve(canvas.toDataURL( 'image/jpeg', 1.0 )); }).catch(function(error) { reject('error in PDF page: ' + index); }); }); }); Promise.all(promises).then(function(dataURLS) { console.log(dataURLS); for ( const ind in dataURLS) { if (dataURLS.hasOwnProperty(ind)) { console.log(ind); pdf.addImage(dataURLS[ind], 'JPEG', 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight()); pdf.addPage(); } } pdf.save('HTML-Document.pdf'); }); }

При этом мы должны импортировать jsPDF и html2Canvas в код </p> <pre><code>import * as jsPDF from 'jspdf'; import * as html2canvas from 'html2canvas';

для этого вам нужно выполнить npm, установив следующее </p> <pre><code>npm install jspdf --save npm install --save @types/jspdf npm install html2canvas --save npm install --save @types/html2canvas

С этим добавьте следующее в файл angular.json внутри тега scripts </p> <pre><code>"node_modules/jspdf/dist/jspdf.min.js"

Внутри component.html добавьте такой код, например: 

<div>
  <input type="button" value="CPTURE" (click)="captureScreen()" />
</div>
<div class="pdf-intro">HTHML content</div>
<div class="pdf-intro">HTHML content</div>
<div class="pdf-intro">HTHML content</div>
<div class="pdf-intro">HTHML content</div>

с этим кодом добавьте CSS, как вы обычно добавляете в component.css, он будет визуализирован.

Надеюсь, это решит вашу проблему.

0 голосов
/ 02 июля 2019

Вы можете использовать jsPDF и dom to image пакет для экспорта HTML-дива с id='dashboard'.

Установочный пакет 

import * as domtoimage from 'dom-to-image';
import * as FileSaver from 'file-saver';
import * as jsPDF from 'jspdf';

Файл TS 

domtoimage.toPng(document.getElementById('dashboard'))
    .then(function (blob) {
        var pdf = new jsPDF('l', 'pt', [$('gridster').width(), $('gridster').height()]);
        pdf.addImage(blob, 'PNG', 0, 0, $('gridster').width(), $('gridster').height());
        pdf.save(`${that.dashboardName}.pdf`);
    });

HTML 

<gridster id='dashboard'></gridster>
0 голосов
/ 25 января 2019

html2canvas решит вашу проблему.Обновите ваш код, как показано ниже. 

downloadPdf() {
const doc = new jsPDF();
const content = this.reportContent.nativeElement;
html2canvas(content).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        // Few necessary setting options
        const imgWidth = 208;
        const pageHeight = 295;
        const imgHeight = canvas.height * imgWidth / canvas.width;
        const doc = new jspdf('p', 'mm');
        let heightLeft = imgHeight;
        let position = 0;

        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
        while (heightLeft >= 0) {
            position = heightLeft - imgHeight;
            doc.addPage();
            doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
            heightLeft -= pageHeight;
        }
        // Generated PDF
        doc.save('asdfghj' + '.pdf');
    });

}

...