vue中pdf上传与在线预览分三类：上传前即时预览（filereader读arraybuffer直传组件）、上传后预览（后端返回url，iframe或vue-pdf加载）、带权限预览（axios获取arraybuffer或vue-pdf配置httpheaders）。
Vue 中实现 PDF 文件上传 + 在线预览，关键在于两个环节的衔接：一是文件如何选中并校验上传，二是上传后或上传前如何即时预览。不依赖后端存储也能做到“选完即看”，核心是利用 ArrayBuffer 或 Blob 直接传给预览组件，跳过服务端中转。
上传时实时预览（无需后端）
用户点击选择 PDF 后，立即读取为 ArrayBuffer，直接喂给预览组件（如 vue-office/pdf 或 vue-pdf），不走上传接口。
- 用
FileReader读取文件：reader.readAsArrayBuffer(file) - 在
onload回调中拿到arrayBuffer，赋值给预览组件的:src属性 - 推荐使用
@vue-office/pdf：轻量、自动渲染、支持缩放/翻页，且 Vue2/Vue3 兼容 - 示例片段：
<el-upload :before-upload="beforeUpload" :auto-upload="false"><el-button>选择 PDF</el-button></el-upload><vue-office-pdf :src="pdfSrc" v-if="pdfSrc"></vue-office-pdf>
js 中：this.pdfSrc = loadEvent.target.result
上传成功后预览（需后端返回地址）
适用于文件已存到服务器，后端返回可公开访问的 PDF URL（如 https://cdn.example.com/xxx.pdf），前端直接加载。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 确保后端返回的 URL 支持跨域（
CORS），否则vue-pdf会因跨域报错 - 推荐用
<iframe></iframe>最简方案：<iframe :src="pdfUrl" width="100%" height="600"></iframe>，兼容性好、无额外依赖 - 若需控制页码、缩放等交互，改用
vue-pdf组件，传入:src="{ url: pdfUrl }" - 注意：URL 必须是完整路径，相对路径（如
/files/a.pdf）在非根路由下易出错
带权限的 PDF 预览（需请求头鉴权）
当 PDF 接口需要 token、cookie 或自定义 header（如 Authorization）时，不能直接用 iframe 或普通 src，得靠支持自定义请求的组件。
-
vue-pdf的createLoadingTask支持传httpHeaders，适合带 token 场景 - 示例：
pdf.createLoadingTask({ url: '/api/pdf/123', httpHeaders: { Authorization: 'Bearer ' + token } }) -
@vue-office/pdf暂不支持自定义 header，此时需先用 axios 请求获取 ArrayBuffer，再传入 - axios 请求记得加
responseType: 'arraybuffer'，否则二进制数据会乱码
缩略图 + 多页预览（增强体验）
对长 PDF，可先展示第一页缩略图，点击再全屏预览，降低首屏压力。
- 用
vue-pdf渲染单页缩略图：<pdf :src="thumbSrc" :page="1" style="width:80px;height:100px;"></pdf> - 缩略图
src可复用同一 PDF ArrayBuffer，或用后端生成的封面图 URL - 点击缩略图后，打开 Dialog，传入完整 PDF 数据，启用完整阅读器功能（页码跳转、打印等）
- 避免一次性渲染全部页面，按需加载更流畅
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
