前端导出文件,后端返回文件流过大直接干崩溃

简介: 前端导出文件,后端返回文件流过大直接干崩溃

前端导出文件

  • 前端很常见的导出需求 导出world xlsx 甚至是zip
  • 在我这个项目中是导出图片,图片量还是蛮大的,直接干崩溃了

  • 我们这里是后端同学直接返回的是文件流
  • 通过调用接口拿到文件流后直接调用下面的方法
export function exportZip(res, name) {
  const blob = new Blob([res.data], {
    type: 'application/zip'
  })
  const reader = new FileReader()
  reader.readAsDataURL(blob)
  reader.onload = function (e) {
    const a = document.createElement('a')
    a.download = `${name}.zip`
    a.href = e.target.result
    // 兼容触发click
    const evt = document.createEvent('MouseEvents')
    evt.initEvent('click', true, true)
    a.dispatchEvent(evt)
  }
}
  • 然后就出现上面的崩溃,分析后是因为文件流太大导致的,解决办法如下:
  1. 直接让后端同学将zip准备好,调用接口返回的是一个地址 我们通过访问地址来下载zip
      <a @click="downFile()">{{文件名称}}</a>
      //下载方法
      downZip () {
        let a = document.createElement('a')
        a.href = '这里是后端同学返回的地址'
        a.click()
      }
  ```
  1. 我们可以接收较大的文档流—在 github 上面找到了大神写的一个库

npm install file-saver --save

  • 引入方法

import { saveAs } from ‘file-saver’;

  • 通过调用上面引入的方法来接收很大的文件流 (修改我们上面的exportZip方法如下)
export function exportZip(res, name) {
  const blob = new Blob([res.data], {
    type: 'application/zip'
  })
  saveAs(blob, name)
}

再试试就搞定了



相关文章
|
1天前
|
前端开发 NoSQL Java
【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
本文介绍了如何配置和启动基于Java的若依(RuoYi)项目,涵盖后端和前端的详细步骤。首先,准备Redis、MySQL以及IDE(如Idea和VS)。接着,通过GitHub获取代码并导入到IDE中,执行必要的SQL文件和配置数据库密码。然后,启动Redis并进行相关配置。最后,按照前端配置步骤克隆前端代码库,打开终端执行命令完成前端配置。整个过程详细记录了每一步的操作,帮助开发者顺利部署若依项目。 如果你觉得有帮助,请点赞、关注和收藏,这将是我持续分享的动力!
15 1
|
21天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
165 18
|
1月前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
98 3
|
2月前
|
缓存 前端开发
后端MultipartFile接收文件转Base64
后端MultipartFile接收文件转Base64
46 5
|
2月前
|
前端开发 API
前端界面生成PDF并导出下载
【10月更文挑战第21天】利用合适的第三方库,你可以在前端轻松实现界面生成 PDF 并导出下载的功能,为用户提供更方便的文档分享和保存方式。你还可以根据具体的需求进一步优化和定制生成的 PDF 文件,以满足不同的业务场景要求。
|
3月前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
37 1
|
2月前
|
缓存 前端开发
后端MultipartFile接收文件转Base64
后端MultipartFile接收文件转Base64
57 0
|
3月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
243 0
|
3月前
|
前端开发 JavaScript API
前端基于XLSX实现数据导出到Excel表格,以及提示“文件已经被损坏,无法打开”的解决方法
前端基于XLSX实现数据导出到Excel表格,以及提示“文件已经被损坏,无法打开”的解决方法
285 0
|
3月前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
1339 0

热门文章

最新文章