uniapp中使用PDF.js实现应用内预览PDF的实践与避坑指南你是否也遇到过Uniapp中PDF预览必须下载后跳转第

uniapp中使用PDF.js实现应用内预览PDF的实践与避坑指南

背景

在我们现有项目中，PDF预览功能一直是通过下载到本地后调用第三方应用来实现。这种交互方式存在两个主要问题：

用户体验不友好：用户需要等待下载完成，然后跳出应用进行预览
功能流程中断：部分功能需要用户在预览文件后进行特定操作，跳出应用会导致流程中断；如：给pdf文件签名、阅读等操作；

技术选型

经过调研，我们选择了PDF.js来实现这一功能。PDF.js是Mozilla开发的一个开源JavaScript库，具有以下优势：

成熟的PDF渲染引擎
自带完整的预览界面（viewer.html）
支持缩放、旋转、搜索等常用功能
开源免费，可定制性强

实现方案

在uniapp中，我们使用web-view组件来加载PDF.js自带的viewer.html实现PDF预览。这样可以避免自行实现预览、缩放等基础功能，专注于业务逻辑开发。

下载PDF预览相关文件并放在服务端

下载地址
解压后的效果

在服务端(为什么要放在服务端看避坑记录)新建一个文件夹，将解压文件放到该文件夹下，如：

核心代码

// 在uniapp页面中
<template>
  <view>
    <web-view :src="webviewSrc"></web-view>
  </view>
</template>
<script setup>
    import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
    import {
		getLangFlag,
		langCodeObj
	} from '@/locale/index.js';

    const viewerHtmlUrl = "http://10.13.xx.xx:xxxx/Scripts/pdfjs/web/viewer.html"; // 线上地址
    const webviewSrc = ref("");
    const PDFJS_LANG = {
		CN: "zh-CN",
		EN: "en-US"
	}
    
    const initPdfViewer = (filePath)=>{
        try{
            // 根据应用的语种指定pdfjs组件的语种
        	const lang = getLangFlag() === langCodeObj.en ? PDFJS_LANG.EN : PDFJS_LANG.CN ;
            webviewSrc.value = `${viewerHtmlUrl}?file=${encodeURIComponent(filePath)}#locale=${lang}`;
        } catch (err){
            uni.showToast({
                title: "pdf文件预览失败"
            })
        }
    }
	onLoad((e)=>{
        // filePath是网络地址：https://zjjcmspublic.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/jcms_files/jcms1/web3096/site/attach/0/f81f4e5464f944c292a1e2e7425966d5.pdf
        initPdfViewer(e.filePath);
    })
</script>