uniapp 文件下载封装(集成h5及其他端下载)

uniapp 文件下载封装(集成h5及其他端下载)

  • fileUtil.js
/**
 * 下载或预览文件, 需求word和pdf文件直接打开, 其他格式文件进行下载
 * @param {Object} file_url 文件url
 */
export function downloadOrOpenFile(file_url, fileName) {
	let ex = getExtension(file_url)
	if (ex == 'docx' || ex == 'doc' || ex == 'pdf') {

		/* #ifdef H5 */
		console.log('H5端')
		window.open(file_url)
		/*#endif*/

		/*#ifndef  H5*/
		console.log('非H5端')
		uni.openDocument({
			filePath: file_url,
			success: (sus) => {
				console.log('成功打开');
			}
		})
		/*#endif*/

	} else {
		downloadFile(file_url, fileName)
	}

}



/**
 * 下载文件
 */
export function downloadFile(url = '', fileName = '') {
	let token = uni.getStorageSync("token");

	const downloadTask = uni.downloadFile({
		url: url,
		header: {
			token
		},
		success: res => {
			if (res.statusCode === 200) {
				console.log('下载成功');
			}

			/* #ifdef H5 */
			console.log('H5端', res)
			const href = res.tempFilePath
			const box = document.createElement('a')
			box.download = fileName
			box.href = href
			box.click()
			/*#endif*/

			/*#ifndef  H5*/
			console.log('非H5端')
			uni.saveFile({
				tempFilePath: res.tempFilePath,
				success: function(red) {
					uni.showModal({
						title: '提示',
						content: '文件已保存:' + red.savedFilePath,
						cancelText: '我知道了',
						confirmText: '打开文件',
						success: function(res) {
							if (res.confirm) {
								uni.openDocument({
									filePath: red.savedFilePath,
									success: (sus) => {
										console.log('成功打开');
									}
								})
							}
						}
					});
				},
				fail(error) {

				}
			});

			/*#endif*/
		}

	})

	downloadTask.onProgressUpdate((res) => {
		console.log('下载进度:' + res.progress);
		console.log('已下载长度:' + res.totalBytesWritten);
		console.log('文件总长度:' + res.totalBytesExpectedToWrite);
	})
}


// 获取文件扩展名
export function getExtension(filename) {
	if (filename && filename.length > 0) {
		var parts = filename.split('.');
		return parts.length > 0 ? parts[parts.length - 1] : '';
	}
	return ''
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用JavaScript在H5页面中下载PDF文件并保存至手机,你可以尝试以下代码: ``` function downloadPDF() { var url = "https://example.com/example.pdf"; // PDF文件下载链接 var filename = "example.pdf"; // PDF文件文件名 var xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.responseType = "blob"; xhr.onload = function() { if (this.status === 200) { var blob = new Blob([this.response], {type: "application/pdf"}); if (window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveOrOpenBlob(blob, filename); // IE浏览器下载 } else { var downloadUrl = URL.createObjectURL(blob); var a = document.createElement("a"); a.href = downloadUrl; a.download = filename; document.body.appendChild(a); a.click(); setTimeout(function() { document.body.removeChild(a); window.URL.revokeObjectURL(downloadUrl); }, 100); } } }; xhr.send(); } ``` 在上述代码中,我们首先定义了要下载的PDF文件下载链接和文件名,然后通过XMLHttpRequest对象发送GET请求获取PDF文件的二进制数据。在获取到二进制数据后,我们将其封装成一个Blob对象,并通过URL.createObjectURL()方法生成一个下载链接,最后创建一个a标签并模拟点击以启动下载。如果是IE浏览器,我们则通过window.navigator.msSaveOrOpenBlob()方法直接下载。 需要注意的是,由于H5页面中的JavaScript文件是在浏览器中执行的,因此我们无法直接将PDF文件保存至手机本地。上述代码中的下载链接可以让用户在浏览器中下载PDF文件,用户可以在下载完成后通过文件管理器将其保存至手机本地。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值