vue 导出pdf

vue 将html页面转为pdf js方法
第一个.将页面html转换成图片
npm install --save html2canvas
第二个.将图片生成pdf
npm install jspdf --save
创建一个js文件 内容如下

// 导出页面为PDF格式,宽度大于高度
/**
 * 用于 t-student-attendance 学生端-学生管理-学生考勤-下载记分册（任课老师和班主任）
 */
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  printPdfBigWidth
}
/**
 * @param  ele          要生成 pdf 的DOM元素（容器）
 * @param  pdfName     PDF文件生成后的文件名字
 * @param  pos     调整间距 {left:25,top:25}
 * */
function printPdfBigWidth(ele, pdfName) {
  document.querySelector('#demo').style.padding='0'
  document.querySelector('#pdf-btn').style.display='none'
  //留白 放置一个空白的图片
  var whiteImg =
  "data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk2QjIxRjMxMDY4RDExRUE5NEYyRUI4OUU5NEFDQzE5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk2QjIxRjMyMDY4RDExRUE5NEYyRUI4OUU5NEFDQzE5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTZCMjFGMkYwNjhEMTFFQTk0RjJFQjg5RTk0QUNDMTkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTZCMjFGMzAwNjhEMTFFQTk0RjJFQjg5RTk0QUNDMTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAIAxUDAREAAhEBAxEB/8QASwABAQAAAAAAAAAAAAAAAAAAAAgBAQAAAAAAAAAAAAAAAAAAAAAQAQAAAAAAAAAAAAAAAAAAAAARAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AKpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB//2Q==";
  html2Canvas(ele, {
    scale:2 // 提升画面质量，但是会增加文件大小
  }).then(function(canvas) {
    document.querySelector('#demo').style.padding='20px'
    document.querySelector('#pdf-btn').style.display='block'
      // 得到canvas画布的单位是px 像素单位
    var contentWidth = canvas.width;
    var contentHeight = canvas.height;
    // 将canvas转为base64图片
    var pageData = canvas.toDataURL("image/jpeg", 1.0);

    // 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75   pt = (px/scale)* 0.75
    // 2为上面的scale 缩放了2倍
    // var imgW = (contentWidth / 2) * 0.75;
    var imgH = (contentHeight / 2) * 0.75;

    //页面留白
    var whiteHeight = 15;
    let left =15;
    let top=whiteHeight;
    //偏移量
    var position = whiteHeight;//初始化顶部偏移量
    var pageTempHeight = imgH;//图片高度留存
    //一张pdf容器尺寸
    // var pdfW = (841.89 / 2) * 0.75;
    // var pdfH = (595.32 / 2) * 0.75;
    var pdfW = 595.28-2*left;
    var pdfH = 850-2*top;
    // 初始化jspdf 第一个参数方向：默认''时为纵向，第二个参数设置pdf内容图片使用的长度单位为pt，第三个参数为PDF的大小型号如a4等，单位是pt
    var PDF = new JsPDF("", "pt", "a4");//默认不填时为纵向打印，需横向打印 写 l ,
    // 容器大于内容区高度，打印一次完毕
    if (pdfH > imgH) {
      PDF.addImage(pageData, "jpeg", left, position, pdfW, imgH);// 内容区
      PDF.addImage(whiteImg, "jpeg", 0, 0, pdfW+2*left, whiteHeight);//顶部留白
      PDF.addImage(whiteImg, "jpeg", 0,pdfH+top,pdfW+2*left, whiteHeight);//底部留白
      // 容器小于内容区高度，打印多次
    } else {
      // eslint-disable-next-line no-unused-vars
      var i=-1;
      while (pageTempHeight > 0) {
        i++;
        // 这里的顺序一定是先把内容绘制完毕，然后再绘制上下的遮挡间隔
        PDF.addImage(pageData, "jpeg", left, position, pdfW, imgH);// 内容区
        PDF.addImage(whiteImg, "jpeg", 0, 0, pdfW+2*left, whiteHeight);//顶部留白
        PDF.addImage(whiteImg, "jpeg", 0,pdfH+top,pdfW+2*left, whiteHeight);//底部留白
        // PDF.text(left+100, i*(position+pdfH),'-------------------------- i*(position+pdfH)  '+i*(position+pdfH)+'-----------------------------');
        pageTempHeight-=pdfH;//控制循环,大于0时继续循环
        position-=pdfH;
        if (pageTempHeight > 0) {
          PDF.addPage();
        }
      }
    }
    // 将内容图片添加到pdf中
    PDF.save(pdfName + ".pdf");
  });
}

需要下载的组件页面中
html

	<div>
		<ul id="demo" class="pdf-preview"></ul>
		<button @click="handleDownloadFile" id="pdf-btn" class="pdf-down">下载</button>
	</div>

js

      handleDownloadFile() {
      // 下载时间页面滑动到最上面，防止有半屏
        window.pageYoffset = 0;
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
        printPdfBigWidth.printPdfBigWidth(
          document.querySelector("#demo"),
          "个人档案"
        );
      },