从Angular 6中的HTML导出PDF [英] Export Pdf from html in angular 6

问题描述

我想以角度6从html导出pdf.因此，我正在使用jspdf库.但是我不能给出颜色和背景色之类的样式.我怎样才能做到这一点? (如果还有来自jspdf的其他免费库，我可以使用它)您可以从下面的链接中查看演示.

I want to export pdf from html in angular 6. So, I'm using jspdf library. But I can't giving styling like color and background color. How can I achieve this? (If is there any other free library from jspdf, I can use it) You can see demo from below link.

演示

.ts文件

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>

推荐答案

    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导入代码中

With this, we have to import jsPDF and html2Canvas to the code

    import * as jsPDF from 'jspdf';
    import * as html2canvas from 'html2canvas';

为此，您必须执行npm安装以下内容

for this, you have to do npm install the following

    npm install jspdf --save
    npm install --save @types/jspdf
    npm install html2canvas --save
    npm install --save @types/html2canvas

通过此操作，在scripts标记内的angular.json文件中添加以下内容

With this add the following in the angular.json file inside the scripts tag

    "node_modules/jspdf/dist/jspdf.min.js"

例如，在component.html内添加如下代码:

Inside the component.html add code like this for example:

<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中一样，它将被呈现.

with this code add css how you would normally add in component.css , it would be rendered.

希望，这可以解决您的问题.

Hope, this solves your problem.

这篇关于从Angular 6中的HTML导出PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！