pdf 在線預覽之 pdfobject插件

支持到ie9 
能夠不用安裝  若是安裝 npm i pdfobject

第一步:引入pdfObject包 申明一個變量

const { PDFObject } = require("../../assets/js/pdfobject");

組件中:寫一個存放的位置

    <div id="pdfContent"></div>

js中:

這個插件 兼容谷歌 可是兼容ie的前提下是該瀏覽器支持pdf在線閱讀 能夠支持到ie9 親測可用

因此js中先來一段提示

 以上調用的this.pdfshow(this.purl)    參數是路徑 方法以下

//顯示文件方法，就是將文件展現到div中
    pdfShow(url) {
      console.log(document.querySelector("#pdfContent"));
      //這是直接插入html
      // document.querySelector(
      //   "#pdfContent"
      // ).innerHTML = `<iframe style="height:100%;width:100%;" src="${url}"></iframe>`;
      PDFObject.embed(this.docInfo.href, "#pdfContent");
    

以上能夠看到 用iframe被我註釋了   由於預覽的時候有功能例如另存 全屏  打印等自帶功能可是咱們不須要 因此換成PDFObject插件

PDFObject中禁用的設置

var options = {
  pdfOpenParams: {
    pagemode: "thumbs",
    toolbar: 0,
    navpanes: 0,
    statesbar: 0,
    view: "FitV",
    scrollbars: "0"
  }
};
因此對於使用的時候就要加上 options設置 

 PDFObject.embed(this.docInfo.href, "#pdfContent", options);

最終效果  能夠看到功能性的不顯示了 只有右下角的放大縮小

 下載路徑

http://ardownload.adobe.com/pub/adobe/reader/win/11.x/11.0.00/zh_CN/AdbeRdr11000_zh_CN.exe