(解決)PDF.js提示:載入PDF時(shí)發(fā)生錯(cuò)誤 ,信息:Failed to fetch
前言
一直以來都有一個(gè)困擾,就是自己搭建的Nextcloud在線瀏覽PDF始終有問題,如下圖:


之前也在網(wǎng)上胡亂搜索了一通,各種更換PDFJS版本、CORS解決跨域問題、安裝chrome跨域擴(kuò)展,都沒有解決問題。于是我就把問題歸結(jié)于“水土不服”了,nextcloud嘛,老外的東西,可能某些東西被土薔導(dǎo)致在線加載異常吧。
直到我又搭建了kodbox,在線瀏覽PDF仍然異常。這我就納悶了,官方的演示站可是很正常的。
嘗試
再次不服氣,索性我就打開了F12,看了整個(gè)PDF的加載過程:首先從服務(wù)器加載pdfjs,然后加載pdf文件,然后IDM就彈出了下載框,緊接著報(bào)錯(cuò);
首先,pdf.js是加載成功的,這沒問題;其次,pdf文件也正常加載,IDM下載框都彈出了;那就納悶了,繼續(xù)搜索,github上有個(gè)issue是說是跨域問題解決的,于是我又按照教程,安裝“access-control-allow-origin”插件,開啟跨域,仍然不行。NND!

意外

在郁悶中,隨便點(diǎn)點(diǎn)時(shí),發(fā)現(xiàn)在pdf.js的窗口中,有個(gè)加載本地文件的按鈕,我加載了一個(gè)本地pdf,居然成功打開了!如下圖:
這就有意思了,pdf.js加載正常,pdf文件下載鏈接也正常,于是我猜想,那就是加載pdf的時(shí)候出問題了?會(huì)不會(huì)是彈出的IDM的問題?
解決

于是,我關(guān)掉chrome瀏覽器的IDM擴(kuò)展,取消對(duì)chrome下載的接管,再試,直接搞定,PDF在線預(yù)覽成功!
所以,PDF.JS預(yù)覽的原理那就是,先加載PDF.JS插件,然后將PDF文件下載到緩存,然后打開。之前我的IDM在下載PDF的時(shí)候直接接管了瀏覽器的下載,導(dǎo)致PDF.JS插件加載PDF文件失敗。

原理弄清楚后,還得恢復(fù)IDM的正常功能,總不能因?yàn)轭A(yù)覽PDF就不用IDM吧,進(jìn)入IDM選項(xiàng),取消對(duì)PDF的自動(dòng)下載,搞定!