码迷,mamicode.com
首页 > Web开发 > 详细

angular jspaf

时间:2019-10-11 00:59:23      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:超过   osi   ase   javascrip   target   element   substr   new   页面   

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);
        }
    )

  }

}

  

angular jspaf

标签:超过   osi   ase   javascrip   target   element   substr   new   页面   

原文地址:https://www.cnblogs.com/tiangeng/p/11651388.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!