Vue将弹窗页面作为pdf下载下来
Posted 小hu同学
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue将弹窗页面作为pdf下载下来相关的知识,希望对你有一定的参考价值。
需求:点击某个查看报告按钮后,出现的是一个弹窗,可以浏览,滚动等操作,底部有下载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();
)
以上是关于Vue将弹窗页面作为pdf下载下来的主要内容,如果未能解决你的问题,请参考以下文章