美文网首页
vue项目页面生成PDF并下载

vue项目页面生成PDF并下载

作者: _皓月__ | 来源:发表于2020-09-03 16:34 被阅读0次

    htmlToPdf.js

    // 导出页面为PDF格式
    import html2Canvas from "html2canvas";
    import JsPDF from "jspdf";
    /**
     * 用法:this.$getPdf("id","PDF名字");
     * @param {String} idStr 要打印的DOM区域 id
     * @param {String} title 导出的pdf文件名称
     */
    const getPdf = function(idStr, title) {
      html2Canvas(document.querySelector("#" + idStr), {
        allowTaint: true
      }).then(function(canvas) {
        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");
      });
    };
    
    export default { getPdf };
    
    

    然后在main.js中使用定义的htmlToPdf.js文件:

    import htmlToPdf from '@/components/htmlToPdf.js'
    Vue.prototype["$getPdf "] = htmlToPdf.getPdf;
    

    相关文章

      网友评论

          本文标题:vue项目页面生成PDF并下载

          本文链接:https://www.haomeiwen.com/subject/vhlosktx.html