[Uniapp]实现手机APP下载文件到本地并预览

一、功能概述

  在移动应用开发中，文件下载和预览是一个常见的需求。本文将通过一个具体的uniapp实例来展示如何实现手机APP中的文件下载到本地并进行预览的功能。

  我们的目标是在手机APP中实现文件的下载和预览功能。具体来说，当用户触发某个事件（例如点击一个下载按钮）时，我们希望能从服务器下载文件到本地，并在下载完成后自动打开文件进行预览。实现过程即为：手机向服务器发起请求，服务器响应并传来文件流数据，之后对文件流数据进行处理并实现相应功能。

二、代码详解

  具体操作过程我已经详细记录在以下代码和注释中，注意某些地方需要替换成你自己的数据（如文件下载接口的url）

downLoadFile(fileName, fileType) {
				console.log("开始下载");
                //这里填写接口地址
				let url = '你的接口地址';
                				
				uni.downloadFile({  //调用官方提供的uni.downloadFile
				    url: url,//将刚刚提前准备好的url传过来
					header: {
                    //如果需要填写请求头信息则在此处填写
					},
				    success: function (res) {
				        if (res.statusCode === 200) {
				            console.log('下载成功：', res.tempFilePath);
							//下载成功，并把下载好的文件保存在临时区域中
							uni.saveFile({//使用该功能，以将临时文件保存在手机中可长久存储的区域
							    tempFilePath: res.tempFilePath,
							    success: (saveResult) => {
							        // 在保存文件成功后，使用 uni.openDocument 方法打开文件
									console.log("文件保存成功:",saveResult)
							        uni.openDocument({
							            filePath: saveResult.savedFilePath,
							            fileType: fileType,  //这里把预先限定好的文件类型传来
							            success: function() {
                                        console.log("文件打开成功!");
                                        //至此，手机会从app中跳转到文件预览界面
                                        //之后可从预览界面返回app中
							            },
							            fail: function(err) {
							                console.log('打开失败', err);
							            },
							        });
							    },
							    fail: function(err) {
							        console.log('保存文件失败', err);
							    },
							});
							
				        }
				    },
				    fail: function (err) {
				        console.log('下载失败：', err);
				    }
				});
			},