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