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

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

前端导出文件

  • 前端很常见的导出需求 导出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)
}

再试试就搞定了



相关文章
|
16天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
18天前
|
前端开发 小程序 Java
uniapp上传图片 前端以及java后端代码实现
uniapp上传图片 前端以及java后端代码实现
32 0
|
13天前
|
小程序 前端开发 JavaScript
小程序全栈开发:前端与后端的完美结合
【4月更文挑战第12天】本文介绍了小程序全栈开发,涵盖前端和后端的关键点。前端使用WXML和WXSS进行页面结构和样式设计,JavaScript处理逻辑及组件使用;后端采用Node.js等语言处理业务逻辑、数据库设计和API接口开发。前端与后端通过数据交互实现结合,采用前后端分离模式,支持跨平台运行。调试测试后,提交微信审核并上线运营。掌握前端后端结合是小程序成功的关键。
|
13天前
|
Web App开发 移动开发 运维
跨域解决方案[前端+后端]
跨域解决方案[前端+后端]
25 0
|
14天前
|
JavaScript 前端开发 API
游戏开发入门:Python后端与Vue前端的协同工作方式
【4月更文挑战第11天】使用Python后端(Flask或Django)和Vue.js前端开发游戏变得流行,能提高开发效率和可维护性。本文指导如何构建这样的项目,包括设置环境、创建虚拟环境、搭建后端API及前端Vue组件,强调前后端协作和API接口的重要性。这种架构促进团队合作,提升代码质量和游戏体验。
|
15天前
|
供应链 JavaScript 前端开发
使用Django和Vue实现电子商务网站的后端和前端
【4月更文挑战第10天】本文介绍了使用Django和Vue构建电子商务网站的后端与前端方法。Django作为Python的Web框架负责后端,其模型-视图-控制器设计简化了商品管理、购物车和订单处理。Vue.js用于前端,提供数据驱动和组件化的用户界面。通过定义Django模型和视图处理请求,结合Vue组件展示商品和管理购物车,开发者可构建交互性强的电商网站。虽然实际开发涉及更多细节,但本文为入门提供了基础指导。
|
28天前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈应用的技术挑战与解决方案
在当今互联网时代,全栈开发成为越来越受欢迎的技术趋势。本文将深入探讨从前端到后端的全栈开发过程中所面临的技术挑战,并提出相应的解决方案,涵盖前端框架选择、后端技术架构、数据库设计以及跨平台兼容性等关键问题。
|
8月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
95 0
|
8月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-地图单线程配置
前端学习笔记202305学习笔记第二十三天-地图单线程配置
64 0
前端学习笔记202305学习笔记第二十三天-地图单线程配置
|
8月前
|
前端开发 API
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
55 0