uniApp移动端安卓中使用webview打开pdf文件是下载而不是预览解决方案

关键 使用到 pdf.js

第一步:

下载pdf.js 文件到项目根目录

也就是这个文件

附下载地址:uni-app-pdf: 在uni-app中使用pdf.js实现在手机上打开pdf 

 也可通过其他方法下载 如npm 

第二步:

拷贝hybrid文件到项目根目录

第三步:

新建 viewPdf.vue文件

<template><view><web-view :src="webViewSrc"></web-view></view>
</template><script setup lang="ts">import { ref, getCurrentInstance } from 'vue';import config from "@/utils/http/config.js";import { onLoad } from '@dcloudio/uni-app';const { proxy } : any = getCurrentInstance()let Url = ref()Url.value = config.filesUrl.devlet webViewSrc = ref()let viewerUrl = '/hybrid/html/web/viewer.html'; // 根目录文件地址onLoad((option : any) => {// option.url 从其他需要预览pdf文件的页面传入的urllet deviceInfo = uni.getDeviceInfo()if (deviceInfo.platform !== 'ios') {//option.url  就是预览的pdf地址webViewSrc.value = `${viewerUrl}?file=${Url.value + option.url}`} else {// ios,直接访问pdf所在路径webViewSrc.value = Url.value + option.url}})</script>
第四步:

使用

<template><view @click="change_pdf(file_url)"> 点击查看附件 </view>  //file_url pdf文件路径
</template><script setup lang="ts">function change_pdf(url : any) {uni.navigateTo({url: `/pages/index/viewPdf?url=${url}`})}
</script>

注:ios可省略步骤 直接使用<web-view :src="文件路径"></web-view>  即可

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

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

相关文章

HarmonyOS实战开发-通过screenshot模块实现屏幕截图 。

介绍 本示例展示全屏截图和屏幕局部截图。 本示例通过screenshot模块实现屏幕截图 &#xff0c;通过window模块实现隐私窗口切换&#xff0c;通过display模块查询当前隐私窗口。 效果预览 使用说明&#xff1a; 点击右上角图标打开弹窗&#xff0c;选择截屏&#xff0c;展示…

stable-diffusion-webui安装教程

现在AI开始进入绘画领域,并且能自动根据文本来创建图片出来,这是一个划时代的进步。 这时候,我也不能落后,要紧跟上时代的步伐,那么也来学习一下stable-diffusion的使用,这样也算多一项对技术的认识,提高对AI的认知。 从网上看到很多stable-diffusion-webui的安装,其…

为什么苹果 Mac 电脑需要使用清理软件?

尽管 Apple Mac 电脑因其卓越的性能、简洁高效的 macOS 操作系统及独特的美学设计备受全球用户青睐&#xff0c;但任何电子设备在长期使用后都难以避免面临系统资源日渐累积的问题。其中一个重要维护需求在于&#xff0c;随着使用时间的增长&#xff0c;Mac电脑可能会由于系统垃…

element-ui 在Popover弹框中使用Select选择器,Vue3

bug描述&#xff1a; 当选择完select的时候,popover也会退出。 解决&#xff1a; popover组件的的关闭是当点击组件外的元素时会关闭&#xff0c;select虽然是写在组件内的&#xff0c;但是select有一个默认属性teleported“true” 会把它默认插到 body 元素&#xff0c;我…

Docker容器(五)Docker Compose

一、概述 1.1介绍 Docker Compose是Docker官方的开源项目&#xff0c;负责实现对Docker容器集群的快速编排。Compose 是 Docker 公司推出的一个工具软件&#xff0c;可以管理多个 Docker 容器组成一个应用。你需要定义一个 YAML 格式的配置文件docker-compose.yml&#xff0c;…

分布式主键ID生成策略

业务系统对分布式ID的要求 唯一性&#xff1a;在分布式系统中&#xff0c;每个节点都需要生成唯一的标识符来确保数据的唯一性。传统的单点生成ID方式无法满足分布式环境下的需求&#xff0c;而分布式ID能够在整个系统中保证每个节点生成的ID都是唯一的。 顺序性&#xff1a;某…

Svg Flow Editor 原生svg流程图编辑器(五)

系列文章 Svg Flow Editor 原生svg流程图编辑器&#xff08;一&#xff09; Svg Flow Editor 原生svg流程图编辑器&#xff08;二&#xff09; Svg Flow Editor 原生svg流程图编辑器&#xff08;三&#xff09; Svg Flow Editor 原生svg流程图编辑器&#xff08;四&#xf…

使用tomcat里的API - servlet 写动态网页

一、创建一个新的Maven空项目 首次创建maven项目的时候&#xff0c;会自动从maven网站上下载一些依赖组件&#xff08;这个过程需要保证网络稳定&#xff0c;否则后续打包一些操作会出现一些问题&#xff09; ps:校园网可能会屏蔽一些网站&#xff0c;可能会导致maven的依赖…

FPGA + 图像处理(三)生成3x3像素矩阵

前言 生成NxN的像素矩阵是对图像进行各类滤波操作的基本前提&#xff0c;本文介绍一种通过bram生成3x3矩阵的方法。 程序 生成bram核 因为本文介绍的是基于bram生成的3x3像素矩阵&#xff0c;所以要先生成两个bram核&#xff0c;用于缓存前两行图像数据 在 IP catalog中选…

刷代码随想录有感(24)

有时候我会怀疑努力的意义&#xff0c;因为我总是花人家好几倍的时间去理解一个狗看了都觉得弱智的问题&#xff0c;思考过后我知道&#xff0c;努力本没有意义&#xff0c;是在未来可能十年内取得成就时突然回想起来之前做过一些事情&#xff0c;未来的成就赋予曾经的意义&…

说说虚拟化上部署Oracle RAC的那点注意事项

0.概述 目前在虚拟化上部署RAC主要是以下3个场景 1是VMWARE的虚拟化&#xff08;私有云&#xff09;&#xff1b; 2是国产厂商基于KVM的虚拟化&#xff08;私有云&#xff09;&#xff1b; 3是公有云&#xff0c;由云厂商给你提供虚拟主机和虚拟磁盘。 这里我只对前2个熟悉一些…

【微服务】面试题(一)

最近进行了一些面试&#xff0c;这几个问题分享给大家 一、分别介绍一下微服务、分布式以及两者的区别 微服务&#xff08;Microservices&#xff09;和分布式系统&#xff08;Distributed Systems&#xff09;是两种不同的软件架构风格&#xff0c;虽然它们之间有些重叠&#…

SpriingBoot整合MongoDB多数据源

背景&#xff1a; MongoDB多数据源&#xff1a;springboot为3以上版本&#xff0c;spring-boot-starter-data-mongodb低版本MongoDBFactory已过时&#xff0c; 改为MongoDatabaseFactory。 1、pom引入&#xff1a; <dependency><groupId>org.springframework.boo…

汇编基础----mov基本操作

汇编基础----mov基本操作 下载VS2022 这个网上教程很多,自行下载安装即可 新建项目 选择空项目,如何点击下一步 在源文件下创建这二个文件 修改配置使asm文件能被解析,右击项目名(demo)->生成依赖项->生成自定义->勾选如下图所示选项->确定 立即数寻址 main…

qt环境搭建-镜像源安装Qt Creator(5.15.2)以及配置环境变量

前言&#xff1a; 版本&#xff1a;5.15.2 镜像源&#xff1a;ustc与清华 纯小白&#xff0c;找了半天的镜像源安装qtcreator&#xff0c;搞了半天结果安装的是最新的&#xff0c;太新的对小白很不友好&#xff0c;bug比较多&#xff0c;支持的系统也不全&#xff0c;口碑不…

【SCI绘图】【小提琴系列1 python】绘制按分类变量分组的垂直小提琴图

SCI&#xff0c;CCF&#xff0c;EI及核心期刊绘图宝典&#xff0c;爆款持续更新&#xff0c;助力科研&#xff01; 本期分享&#xff1a; 【SCI绘图】【小提琴系列1 python】绘制按分类变量分组的垂直小提琴图&#xff0c;文末附完整代码 小提琴图是一种常用的数据可视化工具…

鸿蒙原生应用已超4000个!

鸿蒙原生应用已超4000个&#xff01; 来自 HarmonyOS 微博近期消息&#xff0c;#鸿蒙千帆起# 重大里程碑&#xff01;目前已有超4000个应用加入鸿蒙生态。从今年1月18日华为宣布首批200多家应用厂商正在加速开发鸿蒙原生应用&#xff0c;到3月底超4000个应用&#xff0c;短短…

约跑小程序源码(asp.net+vue+element++uniapp+sqlserver)

开发语言&#xff1a;c# 框架&#xff1a;后端 asp.net mvc pc管理页面&#xff1a;vueelement 数据库&#xff1a;sqlserver 开发软件&#xff1a;eclipse/myeclipse/idea 浏览器&#xff1a;谷歌浏览器 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X …

PyCharm关闭项目后等待时间长

每次关闭项目或PyCharm时&#xff0c;会显示正在关闭项目&#xff0c;而这个关闭时间很长且不可确定&#xff0c;很浪费我们的时间&#xff0c;不过愿意等的话&#xff0c;倒也是可以。 解决方法 Help -> Find Action -> 查找 Registry -> 禁用 ide.await.scope.comp…

ChatGPT基础(一) GPT的前世今生

文章目录 GPT模型简史GPT系列模型ChatGPT的应用 最近ChatGPT3.5可以免注册使用了&#xff0c;出来刨一波坟 说一说ChatGPT的来源和应用。 GPT模型简史 Generative pre-trained transformers(GPT)生成式预训练转换模型是大语言模型的一种(Large Language Model–>LLM)。它是…