一、本文目标

<iframe> 方法预览 pdf 、word

vue-pdf 预览pdf

二、<iframe> 方法

2.1、iframe 方法预览需要 浏览器 设置为：

chrome：设置-隐私设置和安全性-网站设置-更多内容设置-PDF文档

浏览器访问：

chrome://settings/content/pdfDocuments

2.2、代码

<iframe
      className="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、代码

<pdf
      ref="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_脚本之家