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

过程遇到的问题

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/60940.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Node.js | Yarn下载安装与环境配置

一、安装Node.js Yarn 是 Node.js 下的包管理工具&#xff0c;因此想要使用 Yarn 就必须先下载 Node.js。 推荐参考&#xff1a;Node.js | npm下载安装及环境配置教程 二、Yarn安装 打开cmd&#xff0c;输入以下命令&#xff1a; npm install -g yarn检查是否安装成功&…

简单的卡尔曼滤波器C#代码

用卡尔曼滤波来平滑温度数据&#xff0c;使得温度曲线变得更加平滑&#xff08;即去噪声&#xff0c;避免短期内的剧烈波动&#xff09;。在这种情况下&#xff0c;卡尔曼滤波的目标是基于传感器的噪声数据来估计真实的温度&#xff0c;从而降低噪声的影响。 简单的温度卡尔曼…

开源TTS语音克隆神器GPT-SoVITS_V2版本地整合包部署与远程使用生成音频

文章目录 前言1.GPT-SoVITS V2下载2.本地运行GPT-SoVITS V23.简单使用演示4.安装内网穿透工具4.1 创建远程连接公网地址 5. 固定远程访问公网地址 前言 本文主要介绍如何在Windows系统电脑使用整合包一键部署开源TTS语音克隆神器GPT-SoVITS&#xff0c;并结合cpolar内网穿透工…

分布式系统学习笔记

除了分布式爬虫系统&#xff0c;还有许多分布式系统值得学习和实践&#xff0c;它们在不同领域有广泛应用&#xff0c;积累相关经验对找工作非常有帮助。以下是一些常见的分布式系统类型及学习建议&#xff1a; 1. 分布式存储系统 应用场景&#xff1a; 大规模数据的存储与访…

[Docker#11] 容器编排 | .yml | up | 实验: 部署WordPress

目录 1. 什么是 Docker Compose 生活案例 2. 为什么要使用 Docker Compose Docker Compose 的安装 Docker Compose 的功能 使用步骤 核心功能 Docker Compose 使用场景 Docker Compose 文件&#xff08;docker-compose.yml&#xff09; 模仿示例 文件基本结构及常见…

鸿蒙NEXT应用示例:切换图片动画

【引言】 在鸿蒙NEXT应用开发中&#xff0c;实现图片切换动画是一项常见的需求。本文将介绍如何使用鸿蒙应用框架中的组件和动画功能&#xff0c;实现不同类型的图片切换动画效果。 【环境准备】 电脑系统&#xff1a;windows 10 开发工具&#xff1a;DevEco Studio NEXT B…

Spring Cloud Gateway(分发请求)

Spring Cloud Gateway 的过滤器和 Spring MVC 的拦截器的区别 过滤器用于整个微服务系统的网关层控制&#xff0c;拦截器则用于单个微服务内部的控制层请求处理。 1. 作用范围 Spring Cloud Gateway 过滤器&#xff1a;过滤器的作用范围是在网关层&#xff0c;主要在请求进入后…

【spring 】Spring Cloud Gateway 的Filter学习

介绍和使用场景 Spring Cloud Gateway 是一个基于 Spring Framework 5 和 Project Reactor 的 API 网关&#xff0c;它旨在为微服务架构提供一种简单而有效的方式来处理请求路由、过滤、限流等功能。在 Spring Cloud Gateway 中&#xff0c;Filter 扮演着非常重要的角色&#…

opencv(c++)图像的灰度转换

opencv(c)图像的灰度转换 quickopencv.h #pragma once #include <opencv2/opencv.hpp> using namespace cv; class QuickDemo { public:void colorSpace_Demo(Mat& image); };quickopencv.cpp #include "quickopencv.h"// QuickDemo类中的颜色空间演示函…

problem forward和solution backward有什么区别

Note: 在具体研究中&#xff0c;problem forward是先提出问题&#xff0c;然后围绕着科学问题设计出完美的解决方案&#xff1b;而solution backward是先盘算自己有哪些技术&#xff0c;有哪些解决方案&#xff0c;反过来去寻找和定义问题。

C++构造函数详解

构造函数详解&#xff1a;C 中对象初始化与构造函数的使用 在 C 中&#xff0c;构造函数是一种特殊的成员函数&#xff0c;它在创建对象时自动调用&#xff0c;用来初始化对象的状态。构造函数帮助我们确保每个对象在被创建时就处于一个有效的状态&#xff0c;并且在不传递任何…

LeetCode 445.两数相加 II

题目&#xff1a; 给你两个 非空 链表来代表两个非负整数。数字最高位位于链表开始位置。它们的每个节点只存储一位数字。将这两数相加会返回一个新的链表。 你可以假设除了数字 0 之外&#xff0c;这两个数字都不会以零开头。 思路&#xff1a;反转链表 两数相加 I 代码&…

使用WebSocket技术实现Web应用中的实时数据更新

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用WebSocket技术实现Web应用中的实时数据更新 使用WebSocket技术实现Web应用中的实时数据更新 使用WebSocket技术实现Web应用中…

基于STM32的智能路灯控制系统设计

引言 随着城市建设的发展&#xff0c;路灯管理逐渐成为智慧城市建设的重要组成部分。传统路灯系统无法根据环境条件进行智能调节&#xff0c;导致能源浪费。本项目基于STM32微控制器设计了一种智能路灯控制系统&#xff0c;系统能够根据光照强度和周围人员活动情况&#xff0c…

奇文网盘部署指南

内容来自官方 官方地址 https://pan.qiwenshare.com/docs/guide/install.html#%E5%90%8E%E5%8F%B0 #下载编译 #后台 git clone https://gitee.com/qiwen-cloud/qiwen-file.git本项目是本质上是一个maven工程&#xff0c;因此&#xff0c;在命令行执行普通的maven编译命令即可…

[N1CTF 2018]eating_cms

打开题目 只有个登录框&#xff0c;其他什么都没有&#xff0c;尝试了一下弱口令&#xff0c;没能成功 尝试访问一下register.php&#xff0c;看看能不能注册个账号 注册页面&#xff0c;随便注册个账号登陆一下 url中感觉是个注入点&#xff0c;尝试使用file伪协议读取一下us…

什么是SSL VPN?其中的协议结构是怎样的?

定义&#xff1a;SSL VPN是以SSL协议为安全基础的VPN远程接入技术&#xff0c;移动办公人员使用SSL VPN可以安全、方便的接入企业内网&#xff0c;访问企业内网资源&#xff0c;提高工作效率。 SSL&#xff08;Security Socket Layer&#xff09;是一个安全协议&#xff0c;为…

算法之二分查找优化:leetcode34:在排序数组中查找元素的第一个和最后一个位置

题干 分析 问题背景 给定一个已排序的数组&#xff0c;目标是找到一个给定的目标值 target 在数组中的 第一个位置 和 最后一个位置。如果目标值不存在&#xff0c;返回 [-1, -1]。 由于题干要求的时间复杂度是 O(log n)&#xff0c;并且数组是有序的&#xff0c;考虑使用二分…

【3D Slicer】的小白入门使用指南九

定量医学影像临床研究与实践 任务 定量成像教程 定量成像是从医学影像中提取定量测量的过程。 本教程基于两个定量成像的例子构建: - 形态学:缓慢生长肿瘤中的小体积变化 - 功能:鳞状细胞癌中的代谢活动 第1部分:使用变化跟踪模块测量脑膜瘤的小体积变化第2部分:使用PET标…

大模型(LLMs)进阶篇

大模型&#xff08;LLMs&#xff09;进阶篇 一、什么是生成式大模型&#xff1f; 生成式大模型&#xff08;一般简称大模型LLMs&#xff09;是指能用于创作新内容&#xff0c;例如文本、图片、音频以及视频的一类深度学习模型。相比普通深度学习模型&#xff0c;主要有两点不…