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属性 - 组件会自动触发解析和渲染,无需额外请求
这种方式完全离线,适合合同预审、简历上传确认等场景,也规避了跨域、权限、水印延迟等问题。
上传成功后再预览(服务端返回流或地址)
如果业务要求必须先上传到后端(比如要校验、加水印、存记录),那预览分两步走:

