vue 使用iframe嵌套pdf在h5移动端浏览器中打开的时候自动下载

vue 使用iframe嵌套pdf在h5移动端浏览器中打开的时候自动下载,但是在PC端又没有出现就很奇怪

后来发现是浏览器的机制问题,只有安卓会但IOS上不会

解决方案

先下载PDF.JS插件

Getting StartedA general-purpose, web standards-based platform for parsing and rendering PDFs.http://mozilla.github.io/pdf.js/getting_started/#download

 

下载文件后放入Public文件中

 

 在文件中public\static\pdf\web\viewer.js

找到

 对 throw new Error('file origin does not match viewer\'s');进行注释 

文件中使用

单个iframe使用

html:

  <iframe :src="pdfUrl" frameborder="0" class="iframe_box">iframe>

js方法 

//例如pdf地址
//http://192.168.0.34:8080/sampleReport/20220803/e8df6d69-25af-4d1c-83c5-c9d808b7dbb6.pdf
调用方法的时候传入
methods:{
 
    getPdf(pdfUrl) {
      //ie有缓存加个随机数解决 + '?r=' + new Date()
      let pSrc = pdfUrl + "?r=" + new Date();
      this.pdfUrl =
        "/static/pdf/web/viewer.html?file=" + encodeURIComponent(pSrc) + ".pdf";
    },
 
}

当中的/static前缀我有在vue.config.js中设置

const path = require("path");
module.exports = {
 
  configureWebpack: {
    resolve: {
      alias: {
        static: path.resolve("public/static")
      }
    }
  },
}

如果多个iframe循环使用

html:

   <div v-for="(item, index) in pdfUrlList" :key="index + '1'">
              <iframe
                v-if="pageNum == index + 1"
                :src="
                  '/static/pdf/web/viewer.html?file=' + encodeURIComponent(item)
                "
                frameborder="0"
                class="iframe_box"
              >iframe>
            div>

js:

//请求方法返回一个pdf地址的数组 
api.getReportPdfData(formData).then(res => {
        this.pdfUrlList = res.pdfAddressList;
     
      });

 

 失败的样子

 成功的样子