直接用iframe嵌套pdf预览模式(el-dialog和iframe一起使用)

2022-09-28 10:27:40

项目场景:

直接用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 传进去即可})
  • 作者:宋小土
  • 原文链接:https://blog.csdn.net/weixin_45003732/article/details/124482918
    更新时间:2022-09-28 10:27:40