在移動端開發中，通過 webview 組件直接加載PDF文件時，不同平臺的表現差異較大：
-
iOS & 部分安卓瀏覽器：可正常內嵌預覽（依賴系統內置PDF渲染能力）
-
大多數安卓設備：由于缺乏原生PDF插件，會觸發下載提示或跳轉瀏覽器，無法直接預覽
用戶需求
僅需內聯預覽PDF，而非下載或跳轉外部瀏覽器。
解決方案：集成PDF.js實現跨平臺兼容預覽
實現優勢
? 全平臺兼容：iOS、安卓、PC統一體驗
? 純前端實現：無原生依賴，不觸發下載行為
? 高度可定制：支持縮放、分頁、搜索等交互
技術實現邏輯
- 將PDF.js集成到項目中
- 下載PDF.js庫，放置于靜態資源目錄
官方下載 下載最近的版本
歷史版本 可查看所有歷史版本
v2.5.207下載 最終實現的版本
- 通過webview加載本地封裝好的PDF查看器頁面
- 動態傳遞PDF地址
<view><web-view :src="url"></web-view>
</view>
- 處理跨域問題
我的項目是遠程文件加載，若本地文件可忽略這步
- 確保服務器配置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>
)
