angular jspaf

Posted 2021-05-07

import { Component, OnInit } from ‘@angular/core‘;
import * as jsPDF from ‘jspdf‘;
import html2canvas from "html2canvas";

@Component({
  selector: ‘app-desigin‘,
  templateUrl: ‘./desigin.component.html‘,
  styleUrls: [‘./desigin.component.css‘]
})
export class DesiginComponent implements OnInit {

  constructor() { }
  ngOnInit() {

  }
  btn() {

    var target:any = document.getElementsByClassName("right-aside")[0];
    console.log(target)
    target.style.background = "#FFFFFF";

    console.log(html2canvas);
    console.log(jsPDF);
    html2canvas(target).then(function (canvas) {

          console.log(12)
          var contentWidth = canvas.width;
          var contentHeight = canvas.height;

          //一页pdf显示html页面生成的canvas高度;
          var pageHeight = contentWidth / 592.28 * 841.89;
          //未生成pdf的html页面高度
          var leftHeight = contentHeight;
          //页面偏移
          var position = 0;
          //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
          var imgWidth = 595.28;
          var imgHeight = 592.28/contentWidth * contentHeight;

          var pageData = canvas.toDataURL(‘image/jpeg‘, 1.0);

          var pdf = new jsPDF(‘‘, ‘pt‘, ‘a4‘);

          //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
          //当内容未超过pdf一页显示的范围，无需分页
          if (leftHeight < pageHeight) {
            pdf.addImage(pageData, ‘JPEG‘, 0, 0, imgWidth, imgHeight );
          } else {
            while(leftHeight > 0) {
              pdf.addImage(pageData, ‘JPEG‘, 0, position, imgWidth, imgHeight)
              leftHeight -= pageHeight;
              position -= 841.89;
              //避免添加空白页
              if(leftHeight > 0) {
                pdf.addPage();
              }
            }
          }
          pdf.save("content.pdf");
          // 转base64
          var datauri = pdf.output(‘dataurlstring‘)
          var base64 = datauri.substring(28);
          console.log(base64);
        }
    )

  }

}