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'

  })

你可能感兴趣的:(vue.js,javascript,前端)