在角度中使用jsPDF在创建的PDF中不应用的样式

时间:2018-03-07 11:12:49

标签: angular jspdf

使用jsPDF 生成pdf并能够使用html模板生成pdf。

ts如下

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as jsPDF from 'jspdf'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  @ViewChild('content') content: ElementRef;

  title = 'app';
  constructor() { }

  ngOnInit() {

  }

  downloadPDF() {
    const doc = new jsPDF();
    doc.text('Some Text here', 10, 10);
    doc.save('test.pdf');
  }

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

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

    doc.save('htmltopdf.pdf');
  }

}

以下是Html

<div style="text-align:center">
  <input type="button" (click)="downloadPDF()" value="Generate And Export">
  <input type="button" (click)="exportHTML()" value="Export Using HTML">
</div>

<div #content style="display:none">
  <p>Below Content will be exported to PDF</p>
  <div id="content" style="width: 100px;">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae ipsa repel
    vitae.
  </div>
</div>

但是当css应用于填充等元素时,margin,text-align会反映在生成的PDF中。

如何在生成的PDF中添加自定义样式。

0 个答案:

没有答案