uni-app 文件下载

朴灿烈づ我的快乐病毒、 2022-11-21 04:21 226阅读 0赞

官方文档：[https://uniapp.dcloud.io/api/file/file?id=opendocument][https_uniapp.dcloud.io_api_file_file_id_opendocument]

在uni-app官方文档中，提供了uni.downloadFile 方法来下载文件，但是该方法不支持h5端，所以我这里h5端使用了页面a标签来下载文件

代码如下，是h5、app、微信端的下载功能

if (this.platform === 'H5') {//h5使用a标签下载
    							let el = document.createElement('a')
    							document.body.appendChild(el)
    							el.href = url
    							el.target = '_blank'
    							el.click()
    							document.body.removeChild(el)
    						} else if (this.platform == 'APP') {//app使用原生plus下载
    							uni.request({
    								url: url,
    								method: 'HEAD',
    								success: function(response) {
    									let header = response.header
    									let filename = ''
    									if (header['Content-Disposition'] && (header['Content-Disposition'].indexOf("filename*=UTF-8''") >= 0)) {
    										let headerArr = header['Content-Disposition'].split("filename*=UTF-8''")
    										filename = headerArr[1]
    									} else {
    										let headerArr = header['Content-Disposition'].split("filename=")
    										filename = headerArr[1]
    									}
    									let dtask = plus.downloader.createDownload(url, {
    										filename: "_downloads/" + decodeURIComponent(filename)
    									}, function(download, status) {
    										if (status == 200) {
    											plus.runtime.openFile(download.filename)
    										} else {
    											//下载失败
    											plus.downloader.clear(); //清除下载任务
    										}
    									})
    									dtask.start()
    								}
    							})
    
    						} else {//微信端使用uni.downloadFile、uni.openDocument
    							//this.copyUrl(url)
    							uni.downloadFile({
    								url: url, 
    								success: (res) => {
    									if (res.statusCode === 200) {
    										var filePath = res.tempFilePath;
    										uni.openDocument({
    											filePath: filePath,
    											success: function(res) {
    												console.log('已打开');
    											}
    										})
    									}
    								}
    							});
    						}

使用 uni.downloadFile 你会发现是乎没有什么用，这里我们需要与uni.openDocument一起使用，uni.downloadFile下载成功后会返回一个**文件的临时路径，我们用**uni.openDocument 打开它就能看到我们下载的文件了

上面代码中app的下载实际上我用的是app 原生plus的方式时行下载的，当然这里同样可以使用uni.downloadFile方法进行下载

[https_uniapp.dcloud.io_api_file_file_id_opendocument]: https://uniapp.dcloud.io/api/file/file?id=opendocument