Vue将弹窗页面作为pdf下载下来

Posted 2022-09-24 小hu同学

需求：点击某个查看报告按钮后，出现的是一个弹窗，可以浏览，滚动等操作，底部有下载PDF，将整个报告下载成PDF文件。（已完成）
1、新功能是在这个查看报告的弹窗中添加一个表格，表格里面可以在点击详情，查看一个弹窗（弹窗功能页面不下载到PDF）,表格上的详情按钮在下载时要去掉

在线预览的时候，要存在，下载到本地后要隐藏掉

代码实现
页面

<!--el-table里面做这个按钮详情 v-if控制显示隐藏	-->
 <template slot-scope="scope">
     <el-button size="mini" @click="healthviewItem(scope.row)" v-if="ishealthviewItem">详情</el-button>
      </template>


<!--下载pdf按钮-->
<el-button type="primary" @click="beforPdf" :disabled="isPdfFlag">下载pdf</el-button>

数据

//在data数据里面定义为默认值为true
 ishealthviewItem:true,
  // 禁止多次点击下载pdf
 isPdfFlag: false,

点击逻辑

   // 点击下载PDF
    beforPdf() 
      this.isPdfFlag = true; //禁止多次点击
      this.ishealthviewItem = false;//详情按钮隐藏
      //获取整个DOM 外面的大盒子
      var frameBody = document.getElementById('iframeId')
      //下载的文件名字+当前的时间戳
      this.htmlTitle = this.htmlTitle + Date.now();
      //重点！！！  使用this.$nextTick  当DOM元素重新渲染Dom 将健康管理的按钮隐藏
      this.$nextTick(()=>
      //调用getpdf的方法 将整个DOM传过去
        this.getPdf(frameBody, () => 
        //执行完成后
        this.isPdfFlag = false;//恢复点击
        this.ishealthviewItem = true; //健康详情按钮显示
        )
      )
    ,

//注意 如果不使用$nextTick的话，在执行顺序和渲染上会存在问题，导致下载的文件还是包含按钮

导出为PDF方法，网上有很多 我这里就把代码贴出来 仅供参考

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export default
  install (Vue, options) 
    Vue.prototype.getPdf = function (ifr_document,cb) 
      var title = this.htmlTitle
      html2Canvas(ifr_document, 
        allowTaint: true,
        // foreignObjectRendering: true, // 是否在浏览器支持的情况下使用ForeignObject渲染
        // useCORS: true, // 是否尝试使用CORS从服务器加载图像
        // async: false, // 是否异步解析和呈现元素
        // dpi: 450,
      ).then(function (canvas) 
        let contentWidth = canvas.width;
        let contentHeight = canvas.height;
        let pageHeight = contentWidth / 595.28 * 841.89;
        let leftHeight = contentHeight;
        let position = 0;
        let imgWidth = 595.28;
        let imgHeight = 595.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');
        cb &&cb();
      
      )