微信公眾號(hào)h5實(shí)現(xiàn)pdf在線預(yù)覽/vue中pdf.js使用

最近做的一個(gè)公眾號(hào)項(xiàng)目，項(xiàng)目需求需要在頁面內(nèi)預(yù)覽pdf文件。本來想直接用鏈接去預(yù)覽，結(jié)果發(fā)現(xiàn)安卓手機(jī)會(huì)直接提示下載，ios可以預(yù)覽，這樣是不滿足需求的。最后使用了pdf.js。
官網(wǎng)下載地址
https://mozilla.github.io/pdf.js/getting_started/#download
下載好后，

第一步
將文件放在static文件下
在這里插入圖片描述

第二步
我用的是iframe，因?yàn)槲业捻撁孢€要放其他東西。

   <iframe
      width="100%"
      height="500"
      scrolling="no"
      :src="`/static/pdf/web/viewer.html?file=${url}`"
    ></iframe>

  data() {
    return {
      url: "", //pdf文件路徑，我這個(gè)是線上路徑
    };
  },
  onLoad(option) {
    if (option.url) {
      this.url = decodeURIComponent(option.url); 
      //如果帶參數(shù)，帶數(shù)字還是用js解碼一下
    }

第三步
修改源代碼

1 pdf.js是不支持跨域文件加載的 直接加載是不會(huì)成功的。會(huì)報(bào) “file origin doesnot match viewer”錯(cuò)誤。 所以我們得改變一下源碼。

2.如果我們的pdf需要在本地獲取或者是文件服務(wù)器獲取，我們就將這里直接去空。

也可以通過window.location.href=“product-descritption-pdf.html?fileContent=”+fileContent; fileContent是你的pdf文件路徑。
第一次弄的話可能是有點(diǎn)麻煩，但是弄出來后發(fā)現(xiàn)也就三步解決問題。
做的過程中也出現(xiàn)過問題，
tips：
報(bào)錯(cuò)請(qǐng)改用與ES5兼容的內(nèi)部版本的話，去官網(wǎng)下載兼容es5版本的。
如果頁面空白什么內(nèi)容都沒出來，那就是你web/viewer.html路徑弄錯(cuò)了，如果是vue/cil3搭建的。按我第一步操作，這個(gè)路徑是沒問題的。