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

LNNY~

已于 2024-11-13 13:21:43 修改

阅读量754

点赞数 6

文章标签： uni-app pdf javascript

于 2024-11-13 11:18:51 首次发布

本文链接：https://blog.csdn.net/qq_41742576/article/details/143733862

版权

过程遇到的问题

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 H5
        url = res.tempFilePath;
        // #endif
        // #ifdef APP-PLUS
        url = plus.io.convertLocalFileSystemURL(res.tempFilePath);
        // #endif
        uni.navigateTo({url: `/pages-tpm/scheme/view-pdf?url=${url}`});
      }
    },
    fail: () => {
      uni.showToast({title: '文件获取失败！', icon: 'none'});
    }
  });
}

这是就可以预览
在这里插入图片描述