一、本文目標
<iframe> 方法預覽 pdf 、word
vue-pdf 預覽pdf
二、<iframe> 方法
2.1、iframe 方法預覽需要 瀏覽器 設置為：
chrome：設置-隱私設置和安全性-網站設置-更多內容設置-PDF文檔
瀏覽器訪問：
chrome://settings/content/pdfDocuments
2.2、代碼
<iframeclassName="pdf-iframe"title="預覽文檔"src="http://aaa.bbb.com/test.pdf"width="100%"height="100%"
/>2.3、chrome 瀏覽器查看
注：該預覽的功能樣式為chrome瀏覽器默認提供：左側導航頁面、頂部功能欄
功能樣式都不錯，很滿意
2.4、 chrome 未打開設置
2.5、Edge 瀏覽器預覽
三、vue-pdf 方法
3.1、安裝插件
pnpm add vue-pdf
3.2、代碼
<pdfref="myPdfComponent"src="http://aaa.bbb.com/test.pdf":page="1"style="width: 100%; height: 100%;"
/>3.3、瀏覽器預覽
本文并沒有發現 vue-pdf 有通過 配置屬性來實現 類似 iframe 預覽效果的功能欄，但是完全可以通過代碼來實現，并不復雜。
四、歡迎交流指正
參考鏈接
https://juejin.cn/post/7291936784773496843
Vue PDF文件預覽vue-pdf - 瀟湘羽西 - 博客園
vue中前端如何實現pdf預覽功能(含vue-pdf插件用法)_vue.js_腳本之家
Vue3實現預覽PDF文件的多種方式(超簡單)_vue.js_腳本之家
)
