Vue 3 中实现“上传后立即预览 PDF”的核心是直接用 FileReader 将本地 File 对象读取为 ArrayBuffer，再传给 vue-pdf-embed 等组件渲染，全程离线、不依赖后端，兼顾速度、隐私与体验。

在 Vue 3 中实现“上传后立即预览 PDF”，关键不是等文件存到服务器再拉链接，而是直接用浏览器本地能力解析用户选中的文件对象（File），转成可被 PDF 渲染组件识别的格式（如 ArrayBuffer 或 Blob URL），全程不经过后端。这样响应快、隐私好、体验顺滑。

上传后立刻读取并预览（不走后端）

用户点击上传按钮选择文件后，通过 input[type="file"] 获取 File 对象，用 FileReader 读取为 ArrayBuffer，再传给 vue-pdf-embed 或 vue3-pdfjs 这类组件：

• 监听 @change 事件，拿到 event.target.files[0]
• 创建 FileReader，调用 readAsArrayBuffer(file)
• 在 onload 回调中，把 reader.result（即 ArrayBuffer）赋值给组件的 :source 属性
• 组件会自动触发解析和渲染，无需额外请求

这种方式完全离线，适合合同预审、简历上传确认等场景，也规避了跨域、权限、水印延迟等问题。

上传成功后再预览（服务端返回流或地址）

如果业务要求必须先上传到后端（比如要校验、加水印、存记录），那预览分两步走：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

立即学习“前端免费学习笔记（深入）”；

• 上传阶段：用 axios 提交 FormData，设置 responseType: 'arraybuffer'（若后端直接返回 PDF 流）
• 预览阶段：
  • 若后端返回的是 ArrayBuffer，直接 new Blob 并生成 URL.createObjectURL()，传给 <iframe> 或组件 :source
  • 若后端返回的是 PDF 地址（如 /api/files/123.pdf），注意确保该接口响应头含 Content-Disposition: inline，否则浏览器会强制下载

推荐优先使用 vue-pdf-embed 接收 Blob 或 ArrayBuffer，它比 <iframe> 更可控——能监听页数、控制缩放、添加自定义工具栏。

避免常见坑

实际开发中这几个细节容易出问题：

• 文件过大卡顿：PDF 超过 10MB 时，FileReader 解析可能阻塞主线程。建议加 loading 状态，并考虑用 pdfjs-dist 的 worker 异步解析（需配好 workerSrc）
• 中文乱码或字体缺失：确保 PDF 本身已内嵌字体；若用 vue-pdf-embed，检查是否启用了 textLayer 属性（支持文字选择与搜索）
• 移动端缩放失灵：容器元素需设 width: 100%，且父级不能有 overflow: hidden；组件内部 scale 计算建议用 ref + watch 动态更新样式

不需要等后端接口就完成预览，才是真正的“上传即见”。核心就一条：把用户手里的 File，变成 PDF 渲染器能吃的“原料”。