在移动端开发中,通过 webview 组件直接加载PDF文件时,不同平台的表现差异较大:
-
iOS & 部分安卓浏览器:可正常内嵌预览(依赖系统内置PDF渲染能力)
-
大多数安卓设备:由于缺乏原生PDF插件,会触发下载提示或跳转浏览器,无法直接预览
用户需求
仅需内联预览PDF,而非下载或跳转外部浏览器。
解决方案:集成PDF.js实现跨平台兼容预览
实现优势
✅ 全平台兼容:iOS、安卓、PC统一体验
✅ 纯前端实现:无原生依赖,不触发下载行为
✅ 高度可定制:支持缩放、分页、搜索等交互
技术实现逻辑
- 将PDF.js集成到项目中
- 下载PDF.js库,放置于静态资源目录
官方下载 下载最近的版本
历史版本 可查看所有历史版本
v2.5.207下载 最终实现的版本

- 通过webview加载本地封装好的PDF查看器页面
- 动态传递PDF地址
javascript
<view>
<web-view :src="url"></web-view>
</view>
- 处理跨域问题
我的项目是远程文件加载,若本地文件可忽略这步
- 确保服务器配置CORS头,支持跨域访问
- 注释库里的内容
我的文件位置/static/pdf/web/viewer.js
代码示例
javascript
<template>
<view>
<web-view :src="url"></web-view>
</view>
</template>
<script setup>
export default {
data(){
return{
// pdfjs的viewer页面位置?file=pdf位置
url: '/static/pdf/web/viewer.html?file=http://yuanchengdizhi/rule.pdf'
}
},
}
</script>
<style>
</style>