纯前端实现导出pdf

npm install html2canvas jspdf --save

2、utils中创建htmlToPdf.js文件，代码：

// import {showFullScreenLoading,hideFullScreenLoading} from "@/utils/pageLoading.js";
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
export default {
  install(Vue, options) {
    Vue.prototype.getPdf = function() {
      // showFullScreenLoading("portlet_portlets_pdf", "下载文件准备中...");
      var title = this.htmlTitle;
      html2Canvas(document.querySelector("#pdfDom"), {
        allowTaint: true
      }).then(function(canvas) {
        let contentWidth = canvas.width;  //获取宽度
        let contentHeight = canvas.height;  //获取高度
        let pageHeight = (contentWidth / 592.28) * 841.89;  //A4纸的宽高
        let leftHeight = contentHeight;
        let position = 0;  //偏移量
        let imgWidth = 595.28;
        let imgHeight = (592.28 / contentWidth) * contentHeight;
        let pageData = canvas.toDataURL("image/jpeg", 1.0);  //把canvas通过base64转成图片数据
        let PDF = new JsPDF("", "pt", "a4");  // 三个参数 第一个参数(1 横向  p竖向) 第二个px单位大小 a4:pdf规格
        if (leftHeight < pageHeight) { //判断图片高度是否高于pdf高度
          PDF.addImage(pageData, "JPEG", 3, 20, imgWidth, imgHeight);  // 0:距离左边0像素  20：距离顶部20像素
        } else {
          while (leftHeight > 0) {  //判断是否到图片底部
            PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);  //把图片放进pdf中
            leftHeight -= pageHeight;
            position -= 841.89;
            if (leftHeight > 0) {
              PDF.addPage(); //分页
            }
          }
        }
        PDF.save(title + ".pdf");  //导出的文件名
        setTimeout(() => {
          // hideFullScreenLoading();
        }, 400);
      });
    };
  }
};

3、在main.js中引入定义好的方法，并注册

import htmlToPdf from '@/components/utils/htmlToPdf'

Vue.use(htmlToPdf)

4、在要导出的页面中，点击时调用绑定在Vue原型上的getPdf方法，传入id

 <div id="pdfDom">
  <div :model="pageData">
	<div>{{pageData.title}}</div>
  </div>
</div>
<el-button type="primary" icon="el-icon-download" size="small" @click="getPdf('#pdfDom')">导出pdf</el-button>

export default {
  data () {
      return {
      pageData:{
      title:'宝鹃，你知道吗,我觉得自己好累,从来没有这么累过,可是我知道当我早上7点睁开眼睛,
      我又要受人摆布，又要起床去打工,可是宝鹃,我真的觉得我已经精疲力尽,打不动工了'
      }
      htmlTitle: '导出PDF的文件名'
      }
  }
 }

缺点：
导出的pdf不够清晰
多页时会出现内容分割的情况
页面内容过宽的时候，生成的pdf内容会打印不全