以角度 6 从 html 导出 Pdf [英] Export Pdf from html in angular 6

查看:32
本文介绍了以角度 6 从 html 导出 Pdf的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想从 html 以 angular 6 导出 pdf.所以,我使用 jspdf 库.但我不能给出像颜色和背景颜色这样的样式.我怎样才能做到这一点?(如果jspdf还有其他免费的库,我可以用)你可以从下面的链接看到演示.

演示

.ts 文件

导出类 AppComponent {@ViewChild('reportContent') 报告内容:ElementRef;下载PDF(){const doc = 新的 jsPDF();const specialElementHandlers = {'#editor':函数(元素,渲染器){返回真;}};const content = this.reportContent.nativeElement;doc.fromHTML(content.innerHTML, 15, 15, {宽度":190,'elementHandlers':specialElementHandlers});doc.save('asdfghj' + '.pdf');}}

.html 文件

<表格><tr><td style="color: red;background-color: blue;border:solid;">1111</td><td style="border:solid;">2222</td></tr>

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

解决方案

 captureScreen() {const pdf = new jsPDF('p', 'mm');const promises = $('.pdf-intro').map(function(index, element) {返回新的承诺(功能(解决,拒绝){html2canvas(element, { allowTaint: true, logging: true }).then(功能(画布){解析(canvas.toDataURL('image/jpeg', 1.0));}).catch(函数(错误){拒绝('PDF 页面错误:' + index);});});});Promise.all(promises).then(function(dataURLS) {控制台日志(数据URLS);for (const ind in dataURLS) {如果(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导入到代码中

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

为此,您必须执行 npm install 以下内容

 npm install jspdf --savenpm install --save @types/jspdfnpm 安装 html2canvas --savenpm install --save @types/html2canvas

在脚本标签内的 angular.json 文件中添加以下内容

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

在 component.html 中添加如下代码,例如:

<input type="button" value="CPTURE" (click)="captureScreen()"/>

<div class="pdf-intro">HTHML 内容</div><div class="pdf-intro">HTHML 内容</div><div class="pdf-intro">HTHML 内容</div><div class="pdf-intro">HTHML 内容</div>

使用此代码添加 css,您通常会在 component.css 中添加它,它将被呈现.

希望这能解决您的问题.

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.

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 file

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

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

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

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

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

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

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>

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

Hope, this solves your problem.

这篇关于以角度 6 从 html 导出 Pdf的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆