過程遇到的問題

1、如果用的是最新的版本的pdfjs的話，就會(huì)報(bào)Promise.withResolvers 不是一個(gè)方法的錯(cuò)誤，原因是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完全等于以上代碼，經(jīng)試過，可以
2、移動(dòng)端工具欄樣式錯(cuò)位，原因是display：inline flex；這樣寫法沒有生效，也有可能是我的模擬器的問題，這里是改為display：flex；可以了

以上兩個(gè)問題是在開發(fā)過程中遇到的問題，這里提供了修改調(diào)整以后的pdfjs插件，是基于官網(wǎng)最新版本v4.8.69版本調(diào)整的。
pdfjs修改后地址

下載pdfjs插件

下載網(wǎng)址: 鏈接

將壓縮包解壓出來，解壓出來的目錄

在項(xiàng)目static文件夾下新建pdf文件夾，將解壓出來的內(nèi)容直接復(fù)制進(jìn)去

應(yīng)用

新建一個(gè)頁面，當(dāng)做一個(gè)殼子，用來顯示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>

新增一個(gè)按鈕用來跳轉(zhuǎn)預(yù)覽，我這邊是一個(gè)預(yù)覽功能，pdf是在線的，需要下載下來，如果是app端，需要將臨時(shí)文件路徑轉(zhuǎn)化一下

代碼如下

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'});}});
}

這是就可以預(yù)覽