当前位置：首页 > news >正文

uni-app移动端与PC端兼容预览PDF文件

news 2025/7/14 22:13:56

过程遇到的问题

1、如果用的是最新的版本的pdfjs的话，就会报Promise.withResolvers 不是一个方法的错误，原因是Promise.withResolvers是ES15新特性，想了解可参考链接，这里的解决方案是将插件里的涉及到Promise.withResolvers的地方全用以下代码替换掉

function withResolvers() {let resolve, reject;const promise = new Promise((res, rej) => {resolve = res;reject = rej;});return {promise,resolve,reject}
}

链接中也说，Promise.withResolvers完全等于以上代码，经试过，可以
2、移动端工具栏样式错位，原因是display：inline flex；这样写法没有生效，也有可能是我的模拟器的问题，这里是改为display：flex；可以了

以上两个问题是在开发过程中遇到的问题，这里提供了修改调整以后的pdfjs插件，是基于官网最新版本v4.8.69版本调整的。
pdfjs修改后地址

下载pdfjs插件

下载网址: 链接
在这里插入图片描述

将压缩包解压出来，解压出来的目录
在这里插入图片描述
在项目static文件夹下新建pdf文件夹，将解压出来的内容直接复制进去

应用

新建一个页面，当做一个壳子，用来显示pdf文件
在这里插入图片描述
代码如下

<template><web-view v-if="src" :src="src" />
</template><script setup lang="ts">
import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";/** 显示路径 */
let src = ref('');
/** pdfjs 插件加载页面 */
const viewerUrl = '/static/pdf/web/viewer.html'onLoad(({url}) => {src.value = `${viewerUrl}?file=${url}`;
});
</script><style scoped lang="scss"></style>

新增一个按钮用来跳转预览，我这边是一个预览功能，pdf是在线的，需要下载下来，如果是app端，需要将临时文件路径转化一下

在这里插入图片描述
代码如下

function viewPdf(pdfUrl: string) {uni.downloadFile({url: pdfUrl,success: (res) => {if (res.statusCode === 200) {let url = '';// #ifdef H5url = res.tempFilePath;// #endif// #ifdef APP-PLUSurl = plus.io.convertLocalFileSystemURL(res.tempFilePath);// #endifuni.navigateTo({url: `/pages-tpm/scheme/view-pdf?url=${url}`});}},fail: () => {uni.showToast({title: '文件获取失败！', icon: 'none'});}});
}