h5加载链接乱码_H5如何在微信中跳转下载链接

最近在做微信公众号上的 web 页面，当中有这样一个需求，需要下载一个 excel 文件，当时看到这个需求，心想不就是 ，而且我知道这里面的坑就是有时候浏览器会判断自己是否可以打开该文件，如果可以的话，浏览器就会自己打开文件，比如txt等等，可能会出现乱码问题。这里的需求是下载，当我看到后台返回的是一个 zip 文件后，会心一笑，浏览器是无法自动打开 zip 文件的，为了防止意外，我还是加上了 download 属性，这应该稳了。开始做吧......按照之前设想的，一切都很美好，但用手机测试时，苹果手机在微信浏览器中直接就跳转页面乱码了；安卓手机有的就直接下载不了；但是在手机浏览器里面访问是没有问题的。这时候我才意识到这是微信内置浏览器，它会限制页面下载文件。通过谷歌和向大神请教，最后的方案是提示用户点击右上角的按钮用其他浏览器打开。这个想着挺简单的，做的时候才发现，用【其他浏览器打开】的方式是打开当前 url，那么这个下载地址 https://xxx.com/{id} 怎么给它喃？直接点击或者跳转的话，还是会直接打开文件或者出错。有什么方法能改变 url 但是不刷新页面吗？H5的新特性 pushState，支持IE10以上的浏览器。

pushState(MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState)

history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态(state)。

history.pushState(state, title[, url])/** paramsstate -存储JSON字符串，可以用在popstate事件中。title -现在大多数浏览器不支持或者忽略这个参数，最好用‘’代替。url (可选) -任意有效的URL，用于更新浏览器的地址栏，并不在乎URL是否已经存在地址列表中。更重要的是，它不会重新加载页面。*/

所以最后我是通过history.pushState('', '', url)来改变当前url信息的，然后使用其他浏览器打开就可以直接下载了。这里有一点需要注意，如果用户选择不下载，返回上一页面时需要使用pushState重新设置回原来的 url 地址。

不说了，甲方说他的苹果10不能用xxx功能了，继续移动端适配之路...

• JavaScript引用类型的浅拷贝和深拷贝

• 前端Jenkins持续集成

• 如何在Linux下安装Nginx