uniapp项目的pdf文件下载与打开查看

uniapp- 移动app查看pdf文件 uniapp 查看pdf文件 插件使用实例 阅读详情
AI摘要

文章介绍了在uniapp项目中如何实现PDF的下载和查看。通过请求后端接口获取URL,使用uni.downloadFile进行下载,成功后利用uni.saveFile保存文件,并用uni.openDocument打开查看。目前存在的优化点包括文件重命名和自定义保存路径。

最近写的uniapp项目需要新增一个pdf下载和打开查看功能,摸索了半天终于写了出来,现分享出来供有需要的同行参考,欢迎指正

async function DownloadSignature() {
        //请求后端接口,返回值为一个url地址
		let res=await req.flow.flowDownload(data.flowId)
		uni.downloadFile({
            //res.data就是返回的地址
			url: res.data,
			success: function (res) {
				if (res.statusCode === 200) {
					// 下载成功
					const filePath = res.tempFilePath; // 下载后的临时文件路径
					uni.saveFile({
						tempFilePath: filePath,
						success: function (listRes) {
                            //此API是为了拿到文件保存的详细路径
							plus.io.requestFileSystem( plus.io.PRIVATE_DOC, function( fs ) {  
								// 拿到 _doc 所在的完整路径  
								console.log(fs.root.fullPath);  
                                //弹出文件保存路径
								http.hint('文件保存成功'+fs.root.fullPath+listRes.savedFilePath,3000)
							}, function ( e ) {  
								console.log( "Request file system failed: " + e.message );  
							} );
                            //保存成功后,调用文件打开方法
							uni.openDocument({
								filePath,
								success: function(file) {
									console.log('file-success',file);
								}
							});
						},
						fail: function (err) {
						// 保存文件失败
							uni.showToast({
								title: '保存文件失败',
								icon: 'none'
							});
						}
					});
				} else {
					// 下载失败
					uni.showToast({
						title: '下载失败',
						icon: 'none'
					});
				}
			},
			fail: function (err) {
				// 下载请求失败
				uni.showToast({
					title: '下载请求失败',
					icon: 'none'
				});
			}
		});
	}

因为功能写的紧急,还没有摸索出文件重命名方法(因为下载后的文件名是时间戳,这属于优化的一部分)以及自定义文件保存路径方法,

效果图:

 

uniapp实现在线PDF文件预览 【代码】uniapp实现在线PDF文件预览。 阅读详情

相关推荐

uniapp在线预览pdf文件

公司要求uniapp打包的h5和app都要能在线预览pdf文件。最开始是想找uniapp的插件,去插件市场搜了下,没得几个插件可用,且需要收费,所以直接用的pdf.js插件实现,实现步骤和代码如下: 获取pdf.js文件。找不到当时的下载地址了,需要的自己提取,链接: https://pan.baidu.com/s/12Xjh7fDhCHV_o9kveG3ZFA 提取码: j6qx 将pdf文件夹和pdf.html文件放入static文件夹下 3.在pages目录下新建页面pdfview.vue(文件名

weixin_42483208的博客 1万+

uni-app实现PDF预览功能(避坑看这)

去年就想写一篇关于uni-app的pdf预览功能,拖很久了,补上。(避坑看这)

7c 3万+

uniapp+vue+uview做h5小程序,实现预览与下载pdf,接收文件流,处理文件流(整体过程心得,包括各种坑)

使用的是pdfjs,刚开始大家一定会想到一个方法,window.open但是你需要考虑用户看h5,不管是扫码还是链接,都习惯用weixin打开,还要考虑用户的手机,苹果与安卓,暂时先考虑这两种哈,两种浏览器内核以及weixin浏览器内核都是不同的,处理链接与数据会导致很多问题,用open预览pdf,在微信打开文件,直接就默认下载了。viewerUrl: '/static/pdftwo/web/viewer.html', //刚解压的文件地址,用来渲染PDF的html。// 完整的请求 URL。

THY0827的博客 2475

uni-app实现PDF文件下载功能

uni-app实现PDF文件下载功能,代码详细简单复制即用!!!

7c 7638

uniapp-h5中的文件流下载和指定的url下载总结(解决下载后的pdf打开空白情况)

uniapp-h5中的文件流下载和指定的url下载总结(解决下载后的pdf打开空白情况)。

qq_48850466的博客 9991

[uniapp] uniapp上传手机pdf文件

从微信小程序上传文件。

菜就多练 3802

uniapp预览、下载PDF(文件流)

uniapp预览、下载pdf文件

Renyun_的博客 2万+

uniapp页面转为pdf文件并下载(导出)

uniapp页面转为pdf文件并下载(导出)一、cmd指令安装 vue-print-nb --save二、定义全局函数,创建htmlToPdf.js文件四、在main.js函数中使用定义的函数文件。五、使用方法:需要导出的ui部分.定义id为"pdfDom".此部分将就是pdf显示的部分。 一、cmd指令安装 vue-print-nb --save npm install --save html2canvas npm install jspdf --save ``` 二、定义全局函数,创建htmlToP

weixin_44089042的博客 8427

uniapp 流文件pdf_uniapp pdf预览

//一个是通过第三方软件查看pdfuni.downloadFile({ //通过uniapp的api下载下来url: 'test.pdf',success: function (res) {var filePath = res.tempFilePath;uni.openDocument({filePath: filePath,success: function (FileRes) {console...

weixin_39760434的博客 2247

uniapp(全端兼容) - 最新详细实现pdf在线预览功能,uniapp内置预览PDF文件功能,uniapp在安卓app|苹果app|h5网页网站|微信小程序中打开pdf进行在线预览(详细示例源码)

uni-app,安卓Android,苹果ios,App端,H5网页,移动端网站,微信小程序,支付宝小程序,nvue,vue,pdf文档,pdf文件,office,uniapp 预览pdf,uniapp怎么做pdf预览,uniapp如何实现全平台兼容的pdf在线预览,uniapp怎么在h5打开pdf文档,实现PDF在线预览,H5移动端文件预览pdf,文件下载和预览,uniapp App端pdf文件预览,app移动端在线预览pdf文件,无法预览pdf怎么办,有没有预览pdf的插件,根本打不开咋办,uniapp使

✅ 精选推荐文章 1万+

uniapp(微信小程序):实现PDF在线预览+在线预览pdf文件完整示例源码,支持文件来源:服务器pdf外链URL预览、调用后端API接口获取PDF文件流二进制下载及解析打开、上传本地PDF文件预览

uni-app实现PDF预览功能,uniapp微信小程序预览PDF,uniapp开发微信小程序在线预览pdf等文件,uniApp微信小程序实现PDF在线预览,Uniapp app在线预览pdf文件流,微信小程序实现pdf预览(苹果安卓兼容),uniapp-微信小程序 实现pdf外链在线预览,uniapp小程序如何做在线预览pdf功能,uniapp小程序端 实现pdf文件预览,微信小程序(uniapp)PDF预览完整实现方案示例demo源码,uni-app预览PDF,小程序pdf预览插件插件,Uniapp微信

✅ 精选推荐文章 4704

【uniapp】uniapp开发app项目实现在线预览pdf文件

1.需要从网上下载一份的文件放到自己的项目中 2.除了文件,其他文件可以新建一个文件夹,统一放到该目录下,然后将文件夹放到项目的目录下,也单独的放到目录下,最终如下图所示: 3.要实现pdf预览,需要用到的api,新建一个文件,写上如下代码: 4.点击某个pdf文件,跳转到刚刚新建的文件中,且需要携带url参数跳转,会根据url后的参数获取到的数据,生成pdf并渲染到页面中,如下所示:............

weixin_46682277的博客 8471

Windows下RISC-V开发环境搭建:xpack-riscv-none-elf-gcc安装配置全攻略

本文详细介绍了在Windows平台下搭建RISC-V开发环境的完整流程,重点讲解xpack-riscv-none-elf-gcc工具链的安装配置方法。从环境变量设置到VSCode集成开发环境搭建,涵盖汇编程序和C程序开发实践,为开发者提供一站式解决方案,助力快速掌握RISC-V架构开发技能。

weixin_26765287的博客 437

uniapp打开pdf文件

<web-view :src="Links"></web-view> IOS系统可以直接使用wen-view标签,Android打开是空白 使用uniapp中的uni.downloadFile和uni.openDocument依旧没有打开pdf文件 使用pdf.js,成功打开pdf pdf.js下载地址 获取pdf.js 提取码:ms26 文件hybrid 整个放到项目目录下 uni.getSystemInfo获取设备信息判断系统 uni.getSystemIn.

qq_37990751的博客 7091

在pycharm2021.2中学习opencv图像处理,基于python3.9.7、pycharm完成配置

在pycharm中学习opencv图像处理安装python下载python安装包开始安装安装pycharm社区版下载pycharm开始安装如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 安装python 使用pycharm学习opencv应该是最简单的了,对新手比较友好,

steveqobs 7707

Gamit 数据处理,相关的文件配置

一、处理前准备 1、在主文件夹内新建test项目文件,项目内新建brdc、igs和rinex三个文件夹,分别存放广播星历,精密星历几观测值文件,所用的命令分别为sh_get_nav、sh_get_orbits和sh_get_rinex (若文件为.Z,用gunzip命令解压,若仍为d,用命令sh_crx2rnx -f 命令解压为o文件) 2、进入test项目文件夹,链接tables,运行 sh_setup -yr 2015 -apr itrf08_com.apr 3、生成station.info文件。 将t

CodeDoraemon的博客 3375

uniApp打包后webview打开pdf文件是下载而不是预览

【代码】解决uniApp打包后,webview打开pdf是下载而不是预览的问题。

weixin_47756693的博客 3115

PICO640红外探测器配置模块verilog

Ulis pico 640红外探测器配置模块

Go Forward Forever! 2032

【亲测免费】 uniapp兼容PDF查看器:pdfjs插件

uniapp兼容PDF查看器:pdfjs插件 【下载地址】uniapp兼容PDF查看器pdfjs插件 本仓库提供了专为uniapp设计的PDF查看插件——基于pdf.js内核。此插件允许开发者轻松地在uniapp项目中集成PDF查看功能,用户无需离开应用即可浏览PDF文档。通过将pdfjs相关文件置于项目的`static...

gitblog_09811的博客 963

绿米Aqara S1【妙控开关 S1E】版本降级或升级自定义固件的方法

绿米Aqara S1【妙控开关 S1E】版本降级或升级自定义固件的方法

LeeKwen的专栏 2171

MOSFET雪崩特性参数解析

但是,一些电源在输出短路时,初级中会产生较大的电流,加上初级电感,器件就会有雪崩损坏的可能,因此在这样的应用条件下,就要考虑器件的雪崩能量。对于那些在MOSFET的D和S极产生较大电压的尖峰应用,就要考虑器件的雪崩能量,电压的尖峰所集中的能量主要由电感和电流所决定,因此对于反激的应用,MOSFET关断时会产生较大的电压尖峰。雪崩击穿能量标定了器件可以容忍的瞬时过冲电压的安全值,其依赖于雪崩击穿需要消散的能量。EAS单脉冲雪崩击穿能量, EAS标定了器件可以安全吸收反向雪崩击穿能量的高低。

Airer_00的博客 806

【亲测免费】 让PDF浏览更简单:uniapp兼容PDF查看器pdfjs插件推荐

让PDF浏览更简单:uniapp兼容PDF查看器pdfjs插件推荐 【下载地址】uniapp兼容PDF查看器pdfjs插件 本仓库提供了专为uniapp设计的PDF查看插件——基于pdf.js内核。此插件允许开发者轻松地在uniapp项目中集成PDF查看功能,用户无需离开应用即可浏览PDF文档。通过将pdfjs相关文件置...

gitblog_09752的博客 1615

机器人控制基础:伺服驱动器的泄放电阻

摘要:伺服驱动器泄放电阻用于消耗电机减速或制动时产生的再生电能,防止母线电压过高损坏元件。其核心作用是将多余电能转化为热能,规避硬件损坏和停机风险。选型需关注功率、阻值和封装三大参数,功率应匹配再生能量,阻值需符合驱动器要求,封装应满足散热需求。可通过动态监测母线电压或静态检测电阻阻值来判断其是否正常工作。

start_up_go的博客 381

uniapp H5文件下载实战:解决PDF空白问题与URL下载技巧

本文详细解析了Uniapp H5开发中PDF文件下载空白问题的根源,并提供了完整的文件流下载解决方案。通过对比文件流下载与URL下载两种模式,帮助开发者根据实际需求选择最优方案,同时分享了跨平台兼容性处理和性能优化技巧,提升H5文件下载的稳定性和用户体验。

weixin_30892037的博客 433

一次把 PRIV mode 讲透:从 ABAP 内存分配链路到定位与治理

ABAP系统进入PRIV模式的本质是Extended Memory耗尽时转向Heap内存的应急机制。该现象会导致工作进程被独占,系统吞吐量下降。触发条件包括系统EM资源池耗尽或单个用户超过配额阈值。关键参数em/address_space_MB和ztta/roll_extension需协同调整。典型症状包括SM50显示PRIV状态、响应延迟和内存dump。治理需双管齐下:系统侧合理配置内存参数,代码侧优化内存使用模式,如分页处理、减少大内表操作和下推聚合逻辑。PRIV模式应作为异常信号而非常态目标,健康系统

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 200

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

uniapp实现在线pdf预览以及下载

在uniapp中实现在线PDF预览和下载功能时,遇到了在H5端正常渲染PDF但在App端弹出下载弹窗的问题。解决方案是使用pdfjs库结合HTML页面,将PDF的实际地址传递给HTML页面,并通过web-view组件渲染该页面。然而,web-view组件会覆盖其他组件,且无法直接处理事件。为了解决下载功能,利用uni.webview.js库在HTML页面中通过uni.postMessage方法向App端发送下载指令,App端接收指令后触发下载操作。最终,通过plus.downloader实现PDF文件的下载

car_lic的博客 1649

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

上一篇: 我的创作纪念日
下一篇: uniapp,使用canvas制作一个签名板,写字板
鸭子嘎鹅子呱
博客等级 码龄5年 171粉丝 33原创
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值