一、本文目标
<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_脚本之家
