前幾天做一個網頁上查看pdf等文檔的功能，然后網上查了一下發現可以使用iframe來預覽，然后就去試了一下

<iframe width="100%" height="95%" seamless scrolling="yes" :src="iframeSrc"></iframe>

然后去試了一下，發現控制臺報錯，頁面上iframe里面的body也是空的

Resource interpreted as Document but transferred with MIME type application/pdf:

去網上查了一下，也沒有發現什么有用的信息，本來以為可能是返回時類型錯誤，然后在本地新建了一個靜態html直接引用pdf文件路徑，結果還是沒有顯示，而且控制臺也報了上面那個錯誤，但是直接在瀏覽器地址欄輸入pdf路徑是可以直接顯示的，就很疑惑

然后試了一下embed標簽和object標簽，embed是沒有顯示的，object貌似因為瀏覽器不支持，顯示的是object里面寫的文字

然后去找了一下其他的方法，用pdf.js預覽pdf，參考文章：pdf.js使用方法?

?下載?pdf.js，解壓后放到項目中，包含build、web文件夾和LICENSE文件，我這里放在了html/static/pdf下面

使用時地址? ?域名/html/static/pdf/viewer.html?file=文件在服務器中的地址

<iframe width="100%" height="95%" seamless scrolling="yes" :src="`${myhost}/html/static/pdf/web/viewer.html?file=${iframeSrc}`"></iframe>

我這里，myhost是在js獲取的當前域名，iframeSrc是查詢返回的文件地址，使用反引號``將字符包裹，${}里面是變量

這樣就可以顯示了

檢查控制臺發現他是將pdf文件解析，在canvas是繪制的

到此上面顯示預覽pdf就完成了，不過這個項目最后是要到移動端上用的，我在手機上面試了一下，發現全屏以后點擊不能退出，返回按鈕就退到上一頁了，去網上搜了下，找到一個方法，重寫全屏按鈕，參考文章：JS全屏代碼，解決PDF.js在iframe中部分瀏覽器全屏功能錯誤?

按照上面的方法，全屏顯示頂部菜單欄不回隱藏，可以再次點擊來退出全屏

但是在退出全屏時，手機上判斷了document.webkitCancelFullScreen，但是沒有執行函數document.webkitCancelFullScreen()，但是發現在全屏時執行全屏函數三次就會退出全屏，因為沒有找到解決的辦法，所以就在執行document.webkitCancelFullScreen()函數不成功時去執行全屏事件，所以才有了上面全屏時，點擊三次退出全屏

// 退出全屏function exitFullscreen() {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();}}

?

總結

以上是生活随笔為你收集整理的09.html使用iframe、embed查看pdf不显示(未解决)，使用pdf.js预览pdf的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。