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

这篇具有很好参考价值的文章主要介绍了直接用iframe嵌套pdf预览模式(el-dialog和iframe一起使用)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目场景：

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

问题描述

iframe预览pdf,vue.js,javascript,ecmascript
页面布局代码：

 <!-- 预览弹窗 -->
    <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 function previewByUrl(params) {//previewByUrl是自己定义的接口名字
  return request({
    url:"接口链接",
    method: 'get',
    params,
    responseType: "blob"//！！！重点是这句话，一定要加
  })
}

接口返回：文章来源地址https://www.toymoban.com/news/detail-602253.html

//记得这里要给后端传的是文件链接，传参可以是get也可以是post的形式
  previewByUrl({ previewUrl: this.Platformlink }).then((res) => {//previewUrl是后端要的字段    this.Platformlink是传给后端的文件链接
        const blob = new Blob([res], { type: "application/pdf" });
        // 展示二进制流
        this.iframeUrls = window.URL.createObjectURL(blob);
        //把后端返回的东西转化成二进制流，在iframe的src里面把 this.iframeUrls 传进去即可
      })