vue学习记录之——文件流导出下载以及文件流乱码的处理

导出下载功能要看后端接口返回的是文件流还是url还是id,url和id都很好处理，直接使用windouw.location.href，而文件流就比较麻烦。

文件流下载具体代码及注释：

export function downloadFile(data, fileName, mime) {
      var blob = new Blob([data], { 
        type: mime || 'application/octet-stream'
      })
      /* 
        blob对象表示一个不可变、原始数据的类文件对象 类似文件对象的二进制数据，因此可以像操作File对象一样操作Blob对象
        Blob 构造函数的语法为 var aBlob = new Blob( array, options );
        相关的参数说明如下：
          array ：它是一个由 ArrayBuffer，ArrayBufferView，Blob，DOMString 等对象构成的数组。DOMStrings 会被编码为 UTF-8。
          options：一个可选的对象，包含以下两个属性：
            type —— 默认值为 ""，它代表了将会被放入到 blob 中的数组内容的 MIME 类型。
            endings —— 默认值为 "transparent"，用于指定包含行结束符 n 的字符串如何被写入。它是以下两个值中的一个："native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 "transparent"，代表会保持 blob 中保存的结束符不变。
        MIME类型：媒体类型（通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型 ）是一种标准，用来表示文档、文件或字节流的性质和格式。
          application/octet-stream：表明是某种二进制数据
      */
      var blobURL = window.URL.createObjectURL(blob)
      // 创建一个新的对象URL,该对象URL可以代表某一个指定的File对象或Blob对象.
      var tempLink = document.createElement('a')
      // 创建一个a标签
      tempLink.style.display = 'none'
      // 创建的a标签隐藏
      tempLink.href = blobURL
      // a标签的href为新建的对象URL
      tempLink.setAttribute('download', fileName)
      // setAttribute() 方法添加指定的属性，并为其赋指定的值。如果这个指定的属性已存在，则仅设置/更改值。
      if (typeof tempLink.download === 'undefined') {
        tempLink.setAttribute('target', '_blank')
      }
    
      document.body.appendChild(tempLink)
      tempLink.click()
      document.body.removeChild(tempLink)
      window.URL.revokeObjectURL(blobURL)
}

有的这样处理后下载下来的文件是乱码，像我在项目中遇到的就是下载的文件在wps中打开不是乱码，但是office打开的却是乱码，这种情况就需要处理一下，解决方法：

var blob = new Blob(['\uFEFF' + data], {

    type: mime || 'application/octet-stream;charset=utf-8'

  })