1.在預覽PDF時,PDF查看器通常會顯示工具欄、側邊欄等控件。如果想隱藏這些控件,可以通過在PDF文件的URL中添加參數來實現。可以使用#toolbar=0和#navpanes=0等參數來隱藏工具欄和側邊欄。
解釋:
#toolbar=0:隱藏工具欄。
#navpanes=0:隱藏側邊欄。
其他常用參數:
#view=FitH:將PDF頁面寬度適應iframe的寬度。
#scrollbar=0:隱藏滾動條(如果有)。
說一下重點:
問題一: 通過命令pnpm install pdf.js
安裝后,通常出現引用問題;Cannot resolve pdf.worker.entry
。代碼中使用的版本"pdfjs-dist": "^5.2.133"
解決方案:
將文件從node_modules/pdfjs-dist/build/pdf.worker.min.mjs移動至項目的public/pdf.worker.min.mjs,可以使用命令 cp node_modules/pdfjs-dist/build/pdf.worker.min.mjs public/pdf.worker.min.mjs
修改引用:
import * as pdfjsLib from 'pdfjs-dist';
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs'
ps: 上面的代碼中包含了文件的下載功能,需要安裝 "file-saver": "^2.0.5",
2. 線上環境大部分pdf預覽都沒有問題,但是有個別pdf文件里面的內容顯示不全,缺胳膊少腿,不是這個字沒顯示出來就是那個字丟了的(本地還是沒有問題)
解決方法:在網上找了一下,也有人遇到類似問題,原因是缺少相應字體 ,需要在界面上引入CMapReaderFactory,然后把url傳進去生成新的路徑賦值給this.pdfSrc,就可以解決
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory'
let loadingTask = pdf.createLoadingTask({
url: URL.createObjectURL(blob),
cMapPacked: true,
CMapReaderFactory
})
this.pdfSrc = loadingTask;
3. 當我們使用上個問題中的CMapReaderFactory時,會引發另外一個問題,就是預覽的時候顯示空白的問題,顯示不全有空白頁,控制臺還不報錯
我也去網上找了相關問題的解決方法,有人說是因為緩存問題,第二次加載時取的是初次加載PDF文件時的語言文件的loadModules的緩存,但是取的過程中導致了失敗,返回了空值,修改的時候只需要加上一段話
4. 打包部署到服務器上后,預覽時死活看不到內容,控制器不報錯,就是空白,本地開發也沒問題
這個問題啥招我都試了,我同時做管理端以及門戶端,都需要預覽pdf,用的都是vue-pdf,代碼邏輯一模一樣,而且后臺接口也一模一樣,門戶端開發環境和部署環境一點問題都沒有,管理端開發環境沒問題部署完以后到線上就是不展示內容,這個問題我改了一天,沒辦法在本地測試,只能改一點發給現場一個包現場部署一版給我測一下好不好用,一天我給現場發包就發了20個,馬上下班的時候我給現場發了個包,和現場哥們說這個不行就暫時換回備份的包吧,說實話我對這個包真沒報啥希望。竟然解決了,我聽到以后都震驚了改了一天給現場發了20個包,最后這個包啥都沒改竟然好用了,我也很詫異,最后發現是我把vue-pdf降了幾個版本,什么都沒改就好使了。之前用的是最新的"vue-pdf": “4.3.0”,我卸了重新按了個4.0.7的竟然解決了!!!
5. Uncaught SyntaxError: Unexpected token ‘<‘
從接觸vue-pdf開始,就感覺不是啥善茬,最開始是在electron-vue項目中接觸,安裝完依賴以后就報Uncaught SyntaxError: Unexpected token ‘<‘這個錯,網上找了好多這個問題的解決方法,但是并沒有什么用,最后這個問題也沒解決,在electron項目中直接棄坑了,換成iframe預覽pdf文件,也可以達成想要的效果。