安装npm包

npm install --save @shfengze/iframepdf

此包依赖

"dependencies": {
    "html2canvas": "^1.4.1",
    "jspdf": "^2.5.2"
}

使用

<div [style]="{'display': isPreview?'block':'none'}">
  <div>
    <button (click)="printPdf()">打印</button>
  </div>
  <iframe id="previewIframe" frameborder="0" width="100%" height="700"></iframe>
</div>
<div [style]="{'display': !isPreview?'block':'none'}">
  <div>
    <button (click)="preview()">预览再打印</button>
    <button style="margin-left: 100px;" (click)="print()">直接生成PDF调用系统打印</button>
    <button style="margin-left: 100px;" (click)="savefile()">生成PDF文件</button>
    <button style="margin-left: 100px;" (click)="tojspdf()">导出到JSPDF，操作JSPDF对象</button>
  </div>
  <div style="width: 600px;height: auto; border: 1px solid #f50909;">

    <div class="pdf-panel" id="pdf-panel" style="width: 600px;height: auto; ">
      <p>1 内容啊啊啊啊</p>
      <p>2 内容啊啊啊啊</p>
      <iframe class="right-aside" id="myIframe" src="/assets/callback2.html" width="600" height="4500"></iframe>
      <p>3 内容啊啊啊啊</p>
    </div>
  </div>
</div>



import { iframePdf } from '@shfengze/iframepdf';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

 const pdf: iframePdf = new iframePdf(html2canvas);

  // html转pdf后 导出PDF文件
      await this.pdf.output("pdf-panel", new jsPDF({
      unit: 'pt',
      format: 'a4',
      orientation: 'p',
    }), { type: 'file' });

   // html转pdf后 直接调用打印
    await this.pdf.output("pdf-panel", new jsPDF({
      unit: 'pt',
      format: 'a4',
      orientation: 'p',
    }), { type: 'print' });

  // html转pdf后 返回jspdf对象, 再对jspdf对象操作，比如预览等
  const jspdf: jsPDF = await this.pdf.output("pdf-panel", new jsPDF({
      unit: 'pt',
      format: 'a4',
      orientation: 'p',
    }), { type: 'jspdf' });