前端:处理文件流并下载:FileReader读取处理文件流

3,604 阅读1分钟

FileReader

FileReader MDN

FileReader 常用方法

readAsDataURL

FileReader.readAsDataURL()

开始读取指定的内容Blob,完成后,该result属性包含一个data:表示文件数据的URL。

FileReader 常用事件回调

FileReader.onload

reader.onload = e => {
  ... 事件处理程序
}

onload事件的处理程序。每当读取操作成功完成时,都会触发此事件。

文件流处理函数


    /**
     * @description 文件流处理函数;
     * 
    */
     exportAndDownload(file, filename = 'data') {
      const reader = new FileReader()
      reader.readAsDataURL(file)

      reader.onload = e => {
        const a = document.createElement('a')
        a.download = `${filename}.xlsx`

        a.href = e.target.result // 该result属性包含一个data:表示文件数据的URL。

        document.body.appendChild(a) // 修复firefox中无法触发click

        a.click()
        document.body.removeChild(a)
      }
    },


此时文件流的responseType:"blob"类型;


 content-type: application/x-download
 

主要用来处理stream文件流:如下: