uniapp - 超详细 H5 网页利用 uni.downloadFile 下载 URL 文件流并调用浏览器下载功能效果，前台通过请求后端接口获取文件并下载保存到本地（支持电脑PC与手机移动端H5）

已于 2024-07-29 15:45:24 修改
阅读量9.5k 收藏 10
点赞数 3
分类专栏： + UniApp 文章标签： uniapp电脑PC端下载文件 unia下载得到blob后保存 h5端平台调用后端接口下载文件 uniapp浏览器下载后端文件 unia怎么下载指定url文件 通过后端返回的文件流下载到本地 uniapp网页项目怎么下载文
于 2023-11-03 15:09:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/134193106
版权
+ UniApp 专栏收录该内容
186 篇文章 3007 订阅 ¥9.90 ¥99.00
订阅专栏
本文详述在uniapp H5项目中，如何利用uni.downloadFile下载URL文件流，并调用浏览器进行保存。支持uniapp v2/v3，涵盖核心代码展示、常见问题及SEO优化，适用于电脑PC和手机移动端。
摘要由CSDN通过智能技术生成

前言

例如，后端接口提供一个网络文件资源 URL，您需要使用 uni.downloadFile 进行下载，然后调起浏览器进行下载保存。

本文 实现了在 uniapp H5 网页项目中，通过 uni.downloadFile 下载文件得到临时文件路径后，调起浏览器进行下载保存，

支持 uniapp v2 / v3 版本，详细讲解得到文件临时地址后，如何让浏览器使用这个临时地址、使用后又如何让用户保存文件等，

如下图所示，调用后端接口拿到文件，然后在浏览器端执行下载与保存（支持电脑 PC 与手机移动端 H5），

示例代码干净整洁，支持保证您 100% 搞定该功能！

在这里插入图片描述

准备阶段

为了

了解本专栏 订阅专栏 解锁全文
王佳斌
关注
专栏目录
订阅专栏
uni-app - H5 通过 uni.uploadFile() 上传 Blob 文件路径图片图像，文件没有后缀扩展名（上传图片到服务端文件没有后缀名，服务端判断是无效的后缀名文件）终极且完美解决方案
王佳斌
11-23 1万+
uniapp H5 上传图片没有后缀名，uniapp中h5通过uni.chooseimage直接上传图片没有图片扩展名，uni.uploadFile在H5下上传blob文件链接的时候无法获取文件后缀扩展名，解决uni.uploadFile上传图片丢失后缀名的问题，完美解决 uniapp 发布h5上传头像base64图片，ufilename没有后缀名，H5模式下上传的文件，服务端拿不到后缀名怎么办，uni.canvasToTempFilePath H5 生成的文件没有后缀名，uniapp H5上传图片后调用u
uniapp(全端兼容) - 最新详细实现预览pdf文件功能，uniapp安卓苹果app、H5网页、微信小程序、nvue等端打开本地或在线PDF文档进行预览，uniapp预览pdf教程（详细示例代码）
高级前端工程师
06-06 7382
uni-app，pdf，打开预览PDF，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，uniapp预览PDF，App端 实现pdf文件预览，在app端怎么预览pdf，网页h5怎么预览pdf，pdf下载、上传和预览，H5预览pdf文件，小程序预览pdf，nvue平台怎么打开预览pdf呢，除了uni.opendocument还有什么方法打开，预览pdf的插件，pdf预览组件，uni-app实现PDF预览功能，app查看下载pdf文件，如何做pd
uniapp下载文件的方案，包括H5,App方案解决办法
Miketutu的博客
11-01 885
2. 这有一个注意点是：如果你做的是H5的方案，那么我已经替你踩好坑了，UC浏览器是不支持blob类型的下载，以及创建a标签的方案来进行下载。目前发现只有QQ浏览器支持这两种方案。如果你是保密单位，QQ浏览器其实也是可以，因为也是国产化的浏览器。1. 在uniapp需要下载文件，但是显示情况是不能下载。所以只能使用该办法来进行下载。第二步：调取uniapp的原始下载方法uni.downloadFile。第四步：直接打开QQ浏览器开始下载。
uniapp,实现下载文件(uni.downloadFile)，并保存到本地(uni.saveFile)，打开文件预览(uni.openDocument)
热门推荐
sunluyi的博客
07-11 6万+
<!-- #ifdef APP-PLUS --> <u-button class="btn" @click="Download">下载签订合同</u-button> <!-- #endif --> <!-- #ifdef H5 --> <a href="http://192.168.0.200:8058/files/200200711.doc" class="btn">下载签订合同</a> <!-- #endif
uniapp实现多文件下载，保存到本地
ahualong1的博客
10-24 1254
uniapp实现多文件下载，保存到本地，因为使用的是uni.downloadFile 实现文件的下载，每次只能下载一个，需要下载多个文件，并保存到本地，并把保存的地址存储到对应的数据组中，并实现进度条显示。
uniapp开发app时的本地缓存以及封装
mhblog的博客
03-01 1702
利用uniapp开发app的项目中，遇到需要频繁访问的资源，如图片或者其他静态文件时，为了降低服务器的网络请求和节省网络宽带成本，可以通过本地缓存的方式
uni-app 小程序 uni.downloadFile 预览uni.request 请求的 pdf文件流，后端返回文件流 小程序端预览。%PDF-1.4 文件流
Li_Ning21的博客
12-07 1571
接口请求拿到了pdf文件流，但是我预览不了，不管通过文件管理怎么encoding，都不行,那你来对地方了 看看下面这个是不是你的文件流效果： 下面先说说 uni.downloadFile的原理：下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径(可用于uni.openDocument)。在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。在h5上是跨域的，用户需要处理好跨域问题。然后直接上代码，首先封装好需要的预览方法，包括 微信
uniapp H5下载文件
weixin_50449022的博客
08-16 1114
3、要判断浏览器，如果是微信内部浏览器打开就跳到浏览器下载，如果不是就使用三方库下载。1、安装三方库 npm install file-saver --save。适用于uniapp H5 下载文件操作。
uniapp H5端 下载文件
Leo的专栏
04-12 1229
【代码】uniapp H5端 下载文件。
uniapp 文件下载 uni.downloadFile
qq_36016297的博客
03-29 5526
方法下载指定URL的文件。在成功或失败时，消息将通过相应的回调函数进行输出。API进行文件上传和下载。变量将提供下载文件的本地路径。在uniapp中，您可以使用。
uniapp的移动端h5实现文件下载兼容手机各版本浏览器
爱码士&的博客
08-22 5551
一些解决h5文件下载的思考...
uniapp [安卓苹果App端] - 详细实现PDF预览功能在线预览PDF文档，Uniapp App端实现pdf文件预览在线预览pdf二进制文件流、本地pdf文档、PDF文件地址url路径（解决白屏
最新发布
王佳斌
11-10 1万+
uni-app，安卓Android，苹果ios，安卓app端，苹果App端，uniapp苹果安卓app，uniapp在线预览pdf功能，在安卓苹果app平台实现PDF的预览查看，uniapp App端 实现pdf文件预览，UNIAPP在线预览PDF文档，Uniapp app在线预览pdf文件流，从后端接口里获取pdf文件如何转成链接预览，预览pdf的插件，uni-app的pdf预览功能，uniapp使用pdf.js插件预览pdf文件，预览pdf白屏没有报错，打开后没反应，打开是空白，加载PDF时发生错误，如
uniApp PC，H5 下载文件流文件
emmmmmmm__的博客
05-15 583
创建a标签 下载文件。
uniapp下载文件流
weixin_43988116的博客
08-30 636
更多信息可查看 uniapp官方地址：https://zh.uniapp.dcloud.io/api/request/network-file.html#downloadfile。使用uniapp做app项目时有下载统计信息的需求，根据查询信息接口返回文件流信息，前台需要处理成功下载文件。简单记录如有问题或更优解还请不要吝啬的共同沟通学习，此结。
uniapp(全端兼容) - 最新详细实现pdf在线预览功能，uniapp内置预览PDF文件功能，uniapp在安卓app|苹果app|h5网页网站|微信小程序中打开pdf进行在线预览（详细示例源码）
高级前端工程师
05-09 4501
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使
uni-app、H5+ 下载并保存、打开文件
qq_42966167的博客
12-29 6613
紧接上一篇保存图片到相册，项目中还有一个根据条件导出 Excel 文件并要求保存到手机上的需求，接下来也将分别介绍 uni-app 及 H5+ 两种方案。经过在项目中测试验证，两种方案都能下载并打开文件。
uniapp 解决跨域问题
Acitylion的博客
09-01 2855
【代码】uniapp 解决跨域问题。
uniapp(移动端H5、APP、小程序兼容)实现点击下载文档
zh626678的博客
03-19 3524
1.为了防止在手机上也打开不了链接情况，在点击下载的同时可以去复制文档链接，在手机浏览器打开。2.利用a标签实现打开文档链接，这个方法在移动端H5可以直接打开，亲测有效！用uniapp开发微信公众号网页H5实现下载文档功能时，在。微信开发者工具上点击下载调试会显示告警。直接使用uniapp的api。
使用uni.downloadFile下载后端接口返回的文件流返回的图片、视频文件，适配微信小程序，抖音小程序（其他小程序还在开发过程中目前没有遇到问题，但是只有微信和抖音发布到线上了，可以正常下载）
weixin_70012426的博客
04-18 2180
但是最坑爹的地方就在这里，微信小程序正常，在抖音小程序中我们使用uni.downloadFile获取到的图片或者视频文件临时路径后缀为.php(因为我们的后台是用php写的),以至于在抖音小程序一直下载文件失败，我不明白为什么会发生这样的情况，uni.downloadFile获取到的图片或者视频文件临时路径后缀为.php。：在我尝试了多种方法后都没有解决直接从接口获取文件流临时路径，所以我。注：直接修改文件临时路径后缀是不可行的！
uniapp使用uni.downloadFile(OBJECT)结合uni.storage/uni.getstorage实现离线缓存
weixin_46820017的博客
09-14 6605
离线缓存
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王佳斌

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值