欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

微信公眾號(hào)h5實(shí)現(xiàn)pdf在線預(yù)覽/vue中pdf.js使用 - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識(shí)

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價(jià)值，我們在追求其視覺表現(xiàn)的同時(shí)，更側(cè)重于功能的便捷，營銷的便利，運(yùn)營的高效，讓網(wǎng)站成為營銷工具，讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏壧峁┍憬莸闹С郑?

您當(dāng)前位置>首頁 » 新聞資訊 » 公眾號(hào)相關(guān) >

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

發(fā)表時(shí)間：2020-10-9

發(fā)布人：葵宇科技

瀏覽次數(shù)：621

微信公眾號(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ò)請改用與ES5兼容的內(nèi)部版本的話，去官網(wǎng)下載兼容es5版本的。
如果頁面空白什么內(nèi)容都沒出來，那就是你web/viewer.html路徑弄錯(cuò)了，如果是vue/cil3搭建的。按我第一步操作，這個(gè)路徑是沒問題的。