解决安卓手机WebView无法直接预览PDF的问题（使用PDF.js方案）

在移动端开发中，通过 webview 组件直接加载PDF文件时，不同平台的表现差异较大：

• iOS & 部分安卓浏览器：可正常内嵌预览（依赖系统内置PDF渲染能力）

• 大多数安卓设备：由于缺乏原生PDF插件，会触发下载提示或跳转浏览器，无法直接预览

用户需求

仅需内联预览PDF，而非下载或跳转外部浏览器。

解决方案：集成PDF.js实现跨平台兼容预览

实现优势

✅ 全平台兼容：iOS、安卓、PC统一体验
✅ 纯前端实现：无原生依赖，不触发下载行为
✅ 高度可定制：支持缩放、分页、搜索等交互

技术实现逻辑

1. 将PDF.js集成到项目中

• 下载PDF.js库，放置于静态资源目录

官方下载 下载最近的版本
历史版本 可查看所有历史版本
v2.5.207下载 最终实现的版本

• 通过webview加载本地封装好的PDF查看器页面

2. 动态传递PDF地址

<view>
	<web-view :src="url"></web-view>
</view>

3. 处理跨域问题
   我的项目是远程文件加载，若本地文件可忽略这步

• 确保服务器配置CORS头，支持跨域访问
• 注释库里的内容
  我的文件位置/static/pdf/web/viewer.js

代码示例

<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>