HTML转PDF下载

使用html2canvas和jspdf插件实现
通过html2canvas将HTML页面转换成图片，然后再通过jspdf将图片的base64生成为pdf文件。
提高清晰度注意点：
通过放大两倍提高清晰度
图片使用img引入，而不要使用background-image
1.npm 安装插件

npm install html2canvas  --save
npm install  jspdf --save

2.创建htmlToPdf.js文件，通过放大两倍提高清晰度

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
  install(Vue, options) {
    Vue.prototype.getPdf = function () {
      var title = this.htmlTitle;
      var id=this.htmltopdfid;
      var cntElem = document.querySelector(id);　　　　//要转化的div
      var shareContent = cntElem; //需要截图的包裹的（原生的）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.height = height * scale; //定义canvas高度 *缩放
      canvas.getContext("2d").scale(scale, scale); //获取context,设置scale 
      var opts = {
        scale: scale, // 添加的scale 参数
        canvas: canvas, //自定义 canvas
        // logging: true, //日志开关，便于查看html2canvas的内部执行流程
        width: width, //dom 原始宽度
        height: height,
        useCORS: true // 【重要】开启跨域配置
      };
      html2Canvas(cntElem, opts).then(function (canvas) {
        var context = canvas.getContext('2d');
        context.scale(2, 2);
        // 【重要】关闭抗锯齿
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;

        let contentWidth = canvas.width;
        let contentHeight = canvas.height;
        let pageHeight = contentWidth / 592.28 * 841.89;
        let leftHeight = contentHeight;
        let position = 0;
        let imgWidth = 595.28;
        let imgHeight = 592.28 / contentWidth * contentHeight;
        let pageData = canvas.toDataURL('image/jpeg', 1.0);
        let PDF = new JsPDF('', 'pt', 'a4');
        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(title + '.pdf');
      })
    }
  }
}

3.全局引入实现方法
在项目主文件main.js中引入定义好的实现方法，并注册。

import htmlToPdf from '@/components/utils/htmlToPdf'
// 使用Vue.use()方法就会调用工具方法中的install方法
Vue.use(htmlToPdf)

4.在具体的导出页面中

    toWordforpreviw() {
     this.htmltopdfid="#pdfDom",//导出的div的ID
      this.htmlTitle = "导出pdf";
      this.$nextTick(() => {
        this.getPdf();
      });
    },

最后编辑于：2019.08.14 11:29:05