生成excel，并下载到本地

qq_31481269

已于 2024-07-23 16:35:33 修改

阅读量148

点赞数

文章标签： javascript 前端 html

于 2023-08-04 16:43:18 首次发布

本文链接：https://blog.csdn.net/qq_31481269/article/details/132107814

版权

文章描述了一个使用JavaScript异步函数实现的数据导出功能，通过调用`exportOrganization`接口获取数据，然后将响应转换为Blob对象，利用`a`标签的隐藏点击事件实现文件下载，指定文件名和MIME类型。

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

export async function exportOrganization(data) {
  return strictFetch({
    url: '/cas/export/createTtda',
    responseType: 'blob',
    method: 'POST',
    data: data
  })
}

responseType: 'blob',为必填字段

调用相关接口并下载到本地

async exportArchive() {
      const res = await publicAPI.exportOrganization({ ttId: this.orginInfo.orginId })
      if (res) {
            const blob = new Blob([res], {
            // 创建一个新的Blob对象来接收后端的文件,这里第一个参数必须是数组类型，否则下载必出错。
            type: 'application/msword', 
            // type，表明该 Blob 对象所包含数据的 MIME 类型,这需要前后端统一规划
            responseType: 'blob',
        })

        let link = document.createElement('a')
        let body = document.querySelector('body')
        link.href = window.URL.createObjectURL(blob) //
        link.style.display = 'none' // 让这个a标签不可见
        link.download = '团体档案.doc' // 文件名称
        body.appendChild(link) // 将a标签添加到dom中
        link.click() // 创建了新的a标签之后模拟点击事件，开始传输文件
        body.removeChild(link) // 下载完成之后，移除按钮，垃圾回收，减少页面内存消耗
        window.URL.revokeObjectURL(link.href) // 移除之前使用createObjectURL创建的URL，垃圾回收
    } else {
        this.$message.error('导出失败！')
      }
    },