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

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

在线预览的时候,要存在,下载到本地后要隐藏掉
Vue将弹窗页面作为pdf下载下来_第1张图片
代码实现
页面


 <template slot-scope="scope">
     <el-button size="mini" @click="healthviewItem(scope.row)" v-if="ishealthviewItem">详情el-button>
      template>



<el-button type="primary" @click="beforPdf" :disabled="isPdfFlag">下载pdfel-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();
      }
      )
    }
  }
}

你可能感兴趣的:(问题,笔记,Vue,vue.js,javascript,前端)