项目场景:
直接用iframe嵌套pdf预览模式(el-dialog和iframe一起使用)
问题描述
页面布局代码:
<!-- 预览弹窗--><el-dialog:show-close="true":visible.sync="dialogVisible"
custom-class="hotmapdialog"
title="平台介绍"
width="50%"
modal
center:append-to-body="false"
destroy-on-close><!-- 直接用iframe嵌套pdf预览模式"#toolbar=0"是为了隐藏pdf的按钮--><div class="dialogtext"><iframe:src="this.iframeUrls + '#toolbar=0'"/></div><span slot="footer" class="dialog-footer"><span class="text">下载</span></span></el-dialog>
接口代码:
//记得这里要给后端传的是文件链接,传参可以是get也可以是post的形式
export functionByUrl(params){//ByUrl是自己定义的接口名字returnrequest({
url:"接口链接",
method:'get',
params,
responseType:"blob"//!!!重点是这句话,一定要加})}
接口返回:
//记得这里要给后端传的是文件链接,传参可以是get也可以是post的形式previewByUrl({ previewUrl: this.Platformlink}).then((res)=>{//previewUrl是后端要的字段 this.Platformlink是传给后端的文件链接const blob= newBlob([res],{ type:"application/pdf"});// 展示二进制流
this.iframeUrls= window.URL.createObjectURL(blob);//把后端返回的东西转化成二进制流,在iframe的src里面把 this.iframeUrls 传进去即可})