vue-打印当前页面为pdf文件(不分页----一页)

1、npm 安装
npm install jspdf --save
npm install --save html2canvas
2、在需要打印的页面导入
import html2Canvas from “html2canvas”;
import JsPDF from “jspdf”;
3、页面直接调用该方法即可
printOut() {
var title = this.teacherName;
var that = this;
var shareContent = document.querySelector("#subOutputRank"); //需要截图的包裹的（原生的）DOM 对象
var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
var canvas = document.createElement(“canvas”); //创建一个canvas节点
var scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放，在此我是把canvas放大了2倍
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext(“2d”).scale(scale, scale); //获取context,设置scale
html2Canvas(document.querySelector("#subOutputRank"), {
allowTaint: true
}).then(function(canvas) {
var context = canvas.getContext(“2d”);
// 【重要】关闭抗锯齿
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;

    var imgData = canvas.toDataURL("image/jpeg", 1.0); //转化成base64格式,可上网了解此格式
    var img = new Image();
    img.src = imgData;
    img.onload = function() {
      img.width = img.width / 2; //因为在上面放大了2倍，生成image之后要/2
      img.height = img.height / 2;
      img.style.transform = "scale(0.5)";
      if (this.width > this.height) {
        //此可以根据打印的大小进行自动调节
        var doc = new JsPDF("l", "mm", [
          this.width * 0.555,
          this.height * 0.555
        ]);
      } else {
        var doc = new JsPDF("p", "mm", [
          this.width * 0.555,
          this.height * 0.555
        ]);
      }
      doc.addImage(
        imgData,
        "jpeg",
        10,
        0,
        this.width * 0.505,
        this.height * 0.545
      );
      doc.save(title + "-课堂观察分析总汇报告.pdf");
      that.dianpingShow = true;
    };
  });
}