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

项目场景：

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

接口返回：

//记得这里要给后端传的是文件链接，传参可以是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 传进去即可
      })