在 Angular 中将 HTML 转换为 PDF 时如何格式化 PDF

How to format PDF when converting HTML to PDF in Angular

我正在尝试使用 jspdf 和 html2canvas 在 angular 中将 HTML 转换为 PDF。问题是我没有直接的方法来避免 PDF 中不需要的 HTML 元素。

HTML代码

<button (click)="ConvertToHtml()">Generate PDF</button>
<div id="MainSegment">
  <div id="Div1">
    test 1
  </div>
  <div id="Unwanted">
    Unwanted stuff
  </div>
  <div id="Div2">
    test 2
  </div>
</div>

Angular代码

import { Component, VERSION } from '@angular/core';
import * as jspdf from 'jspdf';
import html2canvas from 'html2canvas';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ConvertToHtml() {
    var data = document.getElementById('MainSegment');
    html2canvas(data).then(canvas => {
      var imgWidth = 208;
      var imgHeight = (canvas.height * imgWidth) / canvas.width;
      const contentDataURL = canvas.toDataURL('image/png');
      let pdf = new jspdf('p', 'mm', 'a4');
      var position = 0;
      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
      pdf.save('sample.pdf');
    });
  }
}

在这里,我试图避免 id="Unwanted" 元素。 我可能会隐藏(display:none)元素并在执行 ConvertToHtml() 方法后再次显示它,但我想知道是否有办法只获取 #Div1#Div2 元素并仅将这些元素转换为 PDF。

您只需要添加以忽略您不想格式化为 PDF 的部分:

data-html2canvas-ignore="true"

例如:

 <div id="Unwanted" data-html2canvas-ignore="true">