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

最新推荐文章于 2024-08-16 10:27:44 发布

Ruphoria略略

最新推荐文章于 2024-08-16 10:27:44 发布

阅读量619

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_40858264/article/details/119645501

版权

该博客主要探讨了在Vue后台管理系统中遇到的IE浏览器下载文件（如Word、Excel）时出现文件破损的问题。作者分析了原因在于IE浏览器的兼容性，并提出了针对性的解决方案。通过判断浏览器类型，使用window.navigator.msSaveBlob方法来处理IE浏览器的下载，而对于非IE浏览器则采用创建a标签的方式进行下载。这种方法确保了在不同浏览器中文件下载的正常进行。

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

项目场景：

用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.response
              window.navigator.msSaveBlob(blob, '下载文件的名字')
            }
          }
          xhr.send()
        } catch (e) {
          console.log(e)
        }
      } else {
        var a = document.createElement('a')
        a.download = '下载的名字'
        a.href = '跳转的链接'
        a.click()
      }
}