使用jspdf、html2canvas 前端预览/导出PDF Angular

一、安装

npm install --save jspdf

npm install --save html2canvas

二、代码部分

HTML

<div id="pdfbox">
  pdf内容, html
</div>

<button class="btn btn-cyan" (click)="ExportPDF()">
  <i class="fa fa-plus-circle"></i>
  <span>导出</span>
</button>

TS

import { Component } from '@angular/core';

import jspdf from "jspdf";
import html2canvas from "html2canvas";

@Component({
  selector: 'app-canvas-pdf',
  templateUrl: './canvas-pdf.component.html',
  styleUrls: ['./canvas-pdf.component.less']
})
export class CanvasPdfComponent {

  element: any;

  pdfTitle: string = '你想要的保存pdf文件的名字';


  ExportPDF() {
    this.element = document.getElementById("pdfbox");
    html2canvas(this.element, {
      logging: false, //一开始canvas设置不渲染页面
    }).then((canvas) => {
      let pdf: any = new jspdf("p", "mm", "a4"); //纵向，单位mm，A4纸张大小
      let ctx: any = canvas.getContext("2d"); //预设2维画布
      let a4w: number = 190; //设置显示内容的大小，A4大小：210*297；最后显示在A4内部区域大小为：190*360
      let a4h: number = 260;
      let imgHeight: number = Math.floor((a4h * canvas.width) / a4w); //按A4显示比例换算一页图像的像素高度
      let renderedHeight: number = 0;

      while (renderedHeight < canvas.height) {
        //判断页面有内容时
        let page: any = document.createElement("canvas"); //创建画布
        page.width = canvas.width; //设置画布宽高等于内容宽高
        page.height = Math.min(imgHeight, canvas.height - renderedHeight); //画布的高等于内容的最小的高度（不足一页）
        //用getImageData裁剪指定区域，并绘制到前面创建的canvas对象中
        let a: any = page.getContext("2d");
        a.putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);
        pdf.addImage(page.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, a4w, Math.min(a4h, (a4w * page.height) / page.width)); //添加图片到页面，保留10mm边距

        renderedHeight += imgHeight;
        if (renderedHeight < canvas.height) {
          pdf.addPage();
        }
      }
      pdf.save(`${this.pdfTitle}.pdf`); // 导出PDF文件
      // pdf.output('dataurlnewwindow'); // 在新窗口查看PDF文件

    });

    // ————————————————
    // 原文链接：https://blog.csdn.net/u014353113/article/details/115760845
  }
}