过程遇到的问题
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'});}});
}
这是就可以预览