vue/axios excel导出功能

最新推荐文章于 2024-08-07 14:53:07 发布

qq_39652099

最新推荐文章于 2024-08-07 14:53:07 发布

阅读量194

点赞数

文章标签：数学建模

本文链接：https://blog.youkuaiyun.com/qq_39652099/article/details/130989355

版权

文章介绍了Blob对象用于存储二进制大数据，以及如何通过createObjectURL生成内存URL。同时，解释了FileReader如何异步读取文件内容，特别是readAsDataURL和readAsText方法的用途。此外，还讨论了内存管理和URL的释放策略。最后，提到了axios库在处理blob响应类型时的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Blob（Binary Large Object）表示二进制类型的大对象

Blob 构造函数的语法为：

let aBlob = new Blob(blobParts, options);

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。

let objectURL = URL.createObjectURL(object); // 返回结果 blob:http://localhost:8888/9321c2fb-c4a7-4003-ae63-047bde6a56af

浏览器在 document 卸载的时候，会自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。

URL.revokeObjectURL(objectURL);

URL.createObjectURL() 与FileReader.readAsDataURL(file)区别

通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串
通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL
createObjectURL是同步执行（立即的）
FileReader.readAsDataURL是异步执行（过一段时间）
createObjectURL返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行revokeObjectURL来释放。
FileReader.readAsDataURL则返回包含很多字符的base64，并会比blob url消耗更多内存，但是在不用的时候会自动从内存中清除（通过垃圾回收机制）
使用createObjectURL可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存
如果不太在意设备性能问题，并想获取图片的base64，则推荐使用FileReader.readAsDataURL

FileReader主要用于将文件内容读入内存,通过一系列异步接口,可以在主线程中访问本地文件

file对象只获取到了对文件的描述信息，但没有获得文件中的数据。我们可以通过html5提供的FileReader读取到文件中的数据。

首先创建一个FileReader实例：

const reader = new FileReader();

FileReader提供了如下方法：

readAsArrayBuffer(file)

按字节读取文件内容，结果用ArrayBuffer对象表示

readAsBinaryString(file)

按字节读取文件内容，结果为文件的二进制串

readAsDataURL(file)

读取文件内容，结果用data:url的字符串形式表示

readAsText(file,encoding)

按字符读取文件内容，结果用字符串形式表示

abort()

终止文件读取操作

readAsDataURL和readAsText较为常用，这里只对这两者进行说明。

完整示例：

<input type="file" id="file" />
<img src="" id="imgPreview">

document.querySelector('#file').addEventListener('change',(fileChoosed) => {
    const reader = new FileReader();
    reader.readAsDataURL(fileChoosed.target.files[0]);//发起异步请求
    reader.onload = function(readRes){
        document.querySelector('#imgPreview').src = readRes.target.result
    }           
})

接口返回二进制数据

axios({
        url:
          urlConfig.baseUrl + '/check/business/applicationRecordExcel',
        method: 'GET',
        params: this.query, // POST请求 data: this.query
        headers: { 
          'auth-token': getToken()
        },
        responseType: 'blob'
      }).then((res) => {
        if (res.data.type === 'application/json') {
           // 弹出接口返回的信息
          let fileRead = new FileReader();
          fileRead.readAsText(res.data)
          let that = this
          fileRead.onload = function () {
            let result = JSON.parse(this.result);
            that.$message({
              message: result.msg,
              type: 'error'
            })
          }
          return Promise.reject()
        } else {
          const link = document.createElement('a')
          let blob = new Blob([res.data], {
            type: 'application/vnd.ms-excel,charset=UTF-8'
          })
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          link.download = `导出文件.xls` //下载的文件名
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        }
      })