微信浏览器H5下载文件

最新推荐文章于 2024-03-12 14:12:24 发布

大鱼@

最新推荐文章于 2024-03-12 14:12:24 发布

阅读量4.5k

点赞数

文章标签：微信 javascript 前端

本文链接：https://blog.csdn.net/weixin_47146612/article/details/129175070

版权

本文介绍了如何在微信浏览器中解决H5下载文件的问题。通过绑定按钮事件，判断当前页面是否为微信浏览器。如果是，提示用户使用其他浏览器打开链接；否则，直接进行下载操作。提供了一个使用uniapp开发的示例，详细步骤包括事件触发、外部浏览器跳转以及文件流下载。

摘要由CSDN通过智能技术生成

微信浏览器无法下载文件，我们可以跳转外部浏览器进行下载。

首先绑定按钮事件（我这里用的uniapp开发）

<button class=“btn” @click=“downFile”>点击下载

在这里插入图片描述

然后判断当前页面是否是微信浏览器，若是，提示用户打开右上角选择浏览器打开链接，若不是，进行下载

isWxBrowser = () => {
   
	// 判断是否H5微信环境，true为微信浏览器
	const ua = navigator.userAgent.toLowerCase()
	return ua.match(/MicroMessenger/i) == 'micromessenger' ? true : false
}

进入默认浏览器后对文件进行下载（这里返回的是文件流）

resolveBlob = (res, fileName) => {
   
	const aLink = document.createElement('a')
	var blob = new Blob([res])
	var fileName = fileName
	fileName = fileName.replace(/