前端如何下载文件流

您所在的位置：网站首页 › 前端导入文件二进制流模式 › 前端如何下载文件流

前端如何下载文件流

#前端如何下载文件流| 来源: 网络整理| 查看: 265

前言

如果后台返回的是文件地址，那么前端直接通过 window.location.href 加文件地址，就可以下载文件；

但是如果后台返回的是文件流，那么前端就需要做一些处理；

其实前端处理的核心：就是将文件流转为文件，然后再模拟点击，实现前者的效果。

步骤 1. 封装一个下载工具

这个工具的作用就是，将获取的文件流转为文件，并模拟点击该文件，实现下载

先贴代码，download.js（可直接复制使用）

export const download = (res, type, filename) => { // 创建blob对象，解析流数据 const blob = new Blob([res], { // 设置返回的文件类型 // type: 'application/pdf;' 表示下载文档为pdf，如果是word则设置为msword，excel为excel type: type }) // 这里就是创建一个a标签，等下用来模拟点击事件 const a = document.createElement('a') // 兼容webkix浏览器，处理webkit浏览器中href自动添加blob前缀，默认在浏览器打开而不是下载 const URL = window.URL || window.webkitURL // 根据解析后的blob对象创建URL 对象 const herf = URL.createObjectURL(blob) // 下载链接 a.href = herf // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf' a.download = filename document.body.appendChild(a) // 点击a标签，进行下载 a.click() // 收尾工作，在内存中移除URL 对象 document.body.removeChild(a) window.URL.revokeObjectURL(herf) } 复制代码

上面代码的重点是Blob对象，详情可参考：MDN文档：Blob对象

2. 获取文件流

这里就是调用后台接口，获取文件流

后台方法：

@GetMapping(value = "/download-file") public byte[] downloadFile(String contractNo){ log.info("=== 下载合同文件 ==="); byte[] bytes = service.downloadContract(Dict.create().set("contractNo", contractNo)); return bytes; } 复制代码

前端获取文件流的方法：

import { download } from '@/utils/download' import { axios } from '@/utils/request' async downloadFile (contractNo) { const res = await axios.get(this.downloadContractFilePath + contractNo, { // 设置返回数据类型，这里我设置的是"arraybuffer";如果不设置则下载下来的pdf会是空白 responseType: 'arraybuffer' }) // 调用封装好的下载函数 download(res, 'application/pdf;charset=UTF-8', moment().format('YYYYMMDD') + '.pdf') } 复制代码

关于responseType可参考官网：XMLHttpRequest.responseType - Web API 接口参考 | MDN (mozilla.org)

3. 点击标签a

最后我们创建一个标签a，来点击下载文件

点击下载复制代码总结如果后台返回的是文件地址，那么前端直接通过 window.location.href 加文件地址，就可以下载文件；如果后台返回的是文件流，那么前端就需要做一些处理：就是将文件流转为文件，然后再模拟点击，进行下载。

【本文地址】

前端如何下载文件流

前端如何下载文件流

今日新闻

推荐新闻