要在UniApp中实现下载文件到安卓手机,我这里使用的是plus.io直接获取文件系统,大家可以找一下dcloud插件或者其他api。以下是一个简单的步骤:
-
首先,你需要创建一个按钮或者其他触发下载的UI元素,用户点击后触发文件下载的操作。
-
接着,在uniapp项目中封装下载文件的请求。
-
利用plus.downloader.createDownload下载文件。
-
然后再用到的页面调用即可。
-
最后,处理下载成功或失败的回调,可以通过then,catch捕获,然后处理相应的业务逻辑。
废话不多说,下面来看具体代码
1.再utils目录下创建request.js文件
/*** @param {object} option: url method data fileName* @description app 下载文件到本机根目录下的【surveyApp】文件夹*/
export const saveFileBack = (option) => {return new Promise((resolve, reject) => {console.log('下载参数', option);//本地路径开头使用fi1e:///,跟上手机文件本地目录storage/emulated/0let url = BASE_URL + option.url;// let token = 'access-token=' + uni.getStorageSync('token');let token = uni.getStorageSync('token');// 验证权限 确保app已获取手机权限 若未获取可调用此方法// requestStoragePermission()let dtask = plus.downloader.createDownload(url, {method: option.method,data: option.data,filename: "file:///storage/emulated/0/" + option.fileName, // 利用保存路径,实现下载文件的重命名header: {'Cookie': token,'Content-Type': 'application/json;','Authorization': uni.getStorageSync('token'), //与后端确认token字段名'responseType': 'arraybuffer',},}, (d, status) => {console.log('status', status);// d 为下载的文件对象if (status == 200) {// 下载成功,d.filename是文件保存在本地的相对路径,使用下面的API可转化为平台绝对路径let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename)// 提示信息// uni.showToast({// title: "已保存到:" + fileSaveUrl,// icon: "none",// duration: 5000// })resolve({code: 200,fileSaveUrl,msg: 'ok'})// plus.runtime.openFile(d.filename); // 选择软件打开文件} else {// 下载失败uni.hideLoading()plus.downloader.clear() // 清除下载任务uni.showToast({title: "下载失败,请稍后重试",icon: "none",mask: true,})reject({code: 500,fileSaveUrl: '',msg: 'error'})}})// 给header头注入token dtask.setRequestHeader("Content-type", "application/json")dtask.setRequestHeader('Authorization', token);dtask.start()})
}
2.再用到的页面中引入方法,我这边也用到了调用系统分享功能 life-FileShare插件
import {saveFileBack,} from '@/utils/request'const FileShare = uni.requireNativePlugin('life-FileShare'); // 分享(任意分享) 插件
ps:分享插件地址
3.页面dom需要触发分享,这里可根据具体业务逻辑来写,我这边是左滑点击分享具体便不再演示
4.调用分享方法
// 点击左滑内容 分享shareBox(item) {// 分享下载之后的文件名,这里我是直接重命名了,可根据需要自定义文件名,也可从文件内获取const fileName = item.surveyName + '.zip'saveFileBack({method: 'POST',data: this.shareData,fileName,url: '/survey/share'}).then(res => {uni.hideLoading()// 文件下载成功 已保存到具体目录,下边开始处理分享FileShare.render({type: "SYSTEM", //QQ为QQ,微信为WX,系统默认是SYSTEM,不填写默认SYSTEM// filePath: plus.io.convertLocalFileSystemURL(filename),filePath: res.fileSaveUrl,}, result => {console.log('分享成功', result);});}).catch(err => {console.log('tem分享失败的err', err);})},
以上边是文件下载以及分享的全部功能了,感谢观看。
以下是几个网站,可点击直达
uniapp官网https://uniapp.dcloud.net.cn/ 分享插件地址
https://ext.dcloud.net.cn/plugin?id=2307 Dcloud插件市场
https://ext.dcloud.net.cn/