uni-app 文件下载

 官方文档: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方法进行下载

你可能感兴趣的:(前端,uni-app混合开发)