项目场景：

用vue项目做一个后台管理，要做到兼容谷歌浏览器及IE浏览器，谷歌浏览器问题很少，但是由于IE浏览器比较老，涉及到的兼容问题也比较多。

问题描述：

在详情页面中有个下载按钮，下载word、excle文档类的东西，谷歌浏览器下载都没问题，但是IE浏览器下载不下来，都是破损文件。

原因分析：

因为IE浏览器兼容问题不是很友好，版本也比较老。

解决方案：

思路：

下载的时候判断一下是IE浏览器还是谷歌其他浏览器。

blob 构造函数可以直接在客户端上创建和操作 Blob. msSaveBlob允许用户在客户端上保存文件.

如果是IE浏览器的话，用window.navigator.msSaveBlob进行判断，借助AJAX原生的方法进行下载，如果是谷歌其他浏览器就创建a标签，设置下载的href链接，自调用click事件。

实现：

// 下载
downLoadFile () {if (window.navigator.msSaveBlob) {try {let xhr = new XMLHttpRequest()xhr.open('get', 请求的url, true)xhr.responseType = 'blob' // 返回类型blob// 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑xhr.onload = function () {// 请求完成if (this.status === 200) {let blob = this.responsewindow.navigator.msSaveBlob(blob, '下载文件的名字')}}xhr.send()} catch (e) {console.log(e)}} else {var a = document.createElement('a')a.download = '下载的名字'a.href = '跳转的链接'a.click()}
}

vue 下载word文档时谷歌浏览器正常，IE下载文件损坏相关推荐

JS使用技巧-如何解决谷歌浏览器下载图片、PDF文档时只打开不下载的问题？
问题描述: 页面下载跨域的图片.pdf文件,浏览器总是自动打开,并且在下载列表里面不显示. 如何解决谷歌浏览器下载图片.PDF文档时只打开不下载的问题?如何变成直接下载? 解决方法: 使用js获取下载 ...
vue如何在线预览及下载word文档
最近遇到个需求,说要在线预览及下载word文档,尝试了很多方法以后,发现有一个方法是比较好用的,故来分享一波,希望大家也可以在评论中告知更多实现的方法~ https://view.officeapps ...
Java预览下载word文档（poi-tl、thymeleaf模板）
主要功能预览word文档生成并下载word文档实现前端Vue代码预览功能主要使用的是docx-preview下载方式如下: npm install docx-preview --save & ...
html保存导入word文档格式,WordPress网站在导入Word文档时如何保持原有格式
WordPress程序后台有文章发布功能,可以添加文字和图片.如果想将自己在排版好的Word 文档导入到WordPress ,作为文章发布,却不是一件容易的事情,如果我们直接复制,Word 文档本身的 ...
打开WORD文档时提示“word无法启动转换器mswrd632 wpc”的解决方法
打开 WORD 文档时提示" word 无法启动转换器 mswrd632 wpc "的解决方法因为之前安装的是精简版的 office 2003 ,导致系统找不到这个文件,出现标题 ...
vue 导出word文档（包括图片）
vue 导出word文档(包括图片) 1.打开终端,安装依赖 -- 安装 docxtemplater npm install docxtemplater pizzip --save-- 安装 jszi ...
【日常计算机问题】打开word文档时出现：Word在试图打开文件时遇到错误。请尝试下列方法： *检查文档或驱动器的文件权限。*确保有足够的内存和磁盘空间。*用文本恢复转换器打开文件。
打开word文档时弹出以下对话框: 解决办法,右键此文档--属性--勾选解除锁定: 按确定,再重新打开即可
写word文档时计算机的工作原理,写word文档时还没保存电脑就死机如何恢复
电脑已经成为人类生活中不可缺少的一部分,人们利用电脑可以轻松的完成以前需要大量劳动力才能完成的工作,但在人们在使用电脑中也会遇到很多的麻烦,比如死机,这些原因烦恼着每一个电脑用户,这不,最近就有小伙伴 ...
关于java下载Word文档图片显示不全的问题
关于java 从FTP下载Word文档图片显示不全的问题最近想实现这样一个功能,从ftp服务器获取word文档下载下来,但是出现了一下问题: 本地启动的tomcat,可以下载word,图片显示正常: ...

vue 下载word文档时谷歌浏览器正常，IE下载文件损坏

项目场景：

问题描述：

原因分析：

解决方案：

vue 下载word文档时谷歌浏览器正常，IE下载文件损坏相关推荐

最新文章

热门文章