uni-app+pdf.js跨平台PDF预览实现
H5 页面的 PDF 预览，需求不算少，是做后台管理、合同系统或者教育类平台的你，应该挺常遇到。这里有个比较实用的案例，用uni-app结合pdf.js实现跨平台的 PDF 预览，思路清晰、结构也简洁，适合快速集成。
uni-app 的多端打包能力让你一套代码跑 Web、小程序、App，前端省事不少。基于 Vue 语法，组件丰富，API 也好上手，新人老手都挺合适。
pdf.js是浏览器端预览 PDF 的老牌工具，纯前端实现，加载快、兼容性还不错。用它你能把 PDF 渲染到canvas上，配合事件监听，还能做翻页、缩放等交互功能。
你只要按下面这几个步骤来就行：先在项目里引入pdf.js和pdf.worker.js，在页面加个canvas元素，用PDFViewerApplication.open()加载 PDF。也别忘了监听documentLoadSuccess事件，方便做后续。
翻页和缩放怎么做？pdf.js 也准备好了，直接调nextPage()、previousPage()这些 API 就行。你还可以定制缩放比例，适配不同分辨率设备。
兼容性上，大部分现代浏览器都能跑，但老浏览器还是要测一下，是安卓机的 WebView 版本，坑有时候挺隐蔽。
建议你加上响应式设计，用media query各种设备的适配问题。另外也别忘了错误，比如加载失败、网络断了，这些都得有友好的提示。
要是你项目里 PDF 相关功能多，还可以扩展下，比如加搜索、打印、书签跳转这些。pdf.js 接口都挺开放的，封装一下就能用。
如果你正好在用 uni-app 做 H5 页面，又碰上 PDF 预览的需求，这套方案真的蛮适合的，省事还稳定，适配多端也轻松。
文件大小：361.83KB
评论区