关于 js 下载PDF文件时

1.原因：google浏览器内部判断了是不是PDF ，如果是就会启动内置的PDF阅读器。

解决：file-saver

import FileSave from 'file-saver';


downloadPDF(URLToPDF,PDFName) {
      var oReq = new XMLHttpRequest();
      oReq.open("GET", URLToPDF, true);
      oReq.responseType = "blob";
      oReq.onload = function() {
        var file = new Blob([oReq.response], { 
            type: 'application/pdf' 
        });
        FileSave.saveAs(file, PDFName);
      };
      oReq.send();
 },

2.预览pdf文件

  a.使用vue-pdf

　　

 

<div class="button-wrapper">
      <el-button class="left" :disabled="page === 1" @click="pageReduce">上一页</el-button>
      <el-button class="right" :disabled="page === numPages" @click="pageAdd">下一页</el-button>
     </div>
     <div class="middle">
        <pdf
        ref="pdf"
        :src="src"
        :page="page"
        @progress="loadedRatio = $event"
        @error="error" @num-pages="numPages = $event" @link-clicked="page = $event"
      ></pdf>


import pdf from 'vue-pdf'
export default {
    data() {
     
      return {
        show: false,
        src: `http://${window.location.host}/static/test.pdf`,
        loadedRatio: 0,
        page: 1,
        numPages: 0,
      }
    },
    components: {
      pdf
    },
    methods: {
      pageAdd() {
        this.page ++ ;
        if(this.page >= this.numPages) {
          this.page = this.numPages
        }
      },
      pageReduce() {
        this.page -- ;
        if(this.page <= 1) {
          this.page = 1
        }
      },
      dialogShow() {
        this.show = true
      },
      handleClose() {
        this.show = false
      },
      password: function(updatePassword, reason) {

        updatePassword(prompt('password is "test"'));
      },
      error: function(err) {
        console.log(err);
      }
    } 
  };

　　b.iframe 嵌套

　　

<iframe :src="src" frameborder="0" style=" 100%; height: 100%"></iframe>