vue实现下载文件流完整前后端代码

使用Vue时，我们前端如何处理后端返回的文件流

首先后端返回流，这里我把流的动作拿出来了，我很多地方要用

/**
 * 下载单个文件
 *
 * @param docId
 */
 @GetMapping("/download/{docId}")
 public void download(@PathVariable("docId") String docId,
       HttpServletResponse response) {
  outWrite(response, docId);
 }

 /**
 * 输出文件流
 * @param response
 * @param docId
 */
 private void outWrite(HttpServletResponse response, String docId) {
  ServletOutputStream out = null;
  try {
   out = response.getOutputStream();
   // 禁止图像缓存。
   response.setHeader("Pragma", "no-cache");
   response.setHeader("Cache-Control", "no-cache");
   response.setDateHeader("Expires", 0);
   byte[] bytes = docService.downloadFileSingle(docId);
   if (bytes != null) {
    MagicMatch match = Magic.getMagicMatch(bytes);
    String mimeType = match.getMimeType();
    response.setContentType(mimeType);
    out.write(bytes);
   }
   out.flush();
  } catch (Exception e) {
   UnitedLogger.error(e);
  } finally {
   IOUtils.closeQuietly(out);
  }
 }

前端这里我引入了一个组件 js-file-download

npm install js-file-download --save

然后在Vue文件中添加进来

import fileDownload from "js-file-download";

 // 文档操作列对应事件
 async handleCommand(item, data) {
  switch (item.key) {
  case "download":
   var res = await this.download(data);
   return fileDownload(res, data.name);
  ...
  default:
  }
  // 刷新当前层级的列表
  const folder = this.getLastFolderPath();
  this.listClick(folder.folderId, folder.name);
 },
 // 下载
 async download(row) {
  if (this.isFolder(row.type)) {
  return FolderAPI.download(row.id);
  } else {
  return DocAPI.download(row.id);
  }
 },

docAPI js 注意需要设置responseType

/**
 * 下载单个文件
 * @param {*} id
 */
const download = (id) => {
 return request({
 url: _DataAPI.download + id,
 method: "GET",
 responseType: 'blob'
 });
};

这样即可成功下载。

关于vue.js的学习教程，请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)

    vue-cli+axios实现附件上传下载记录: 上传: 这里用formData格式传递参数:请求成功后后台返回上传文件的对应信息. 重点是下载: ############## downloadfile(res) { var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //applicati

  • vue-以文件流-blob-的形式-下载-导出文件操作

    vue项目中,经常遇到文件导出与下载,有时候是直接返回服务端的文件url,这样直接以a链接下载,或者windown.open对不同类型的文件进行下载或预览.但如果返回的是文件流,则需要做一些其他处理,具体形式如下: 1.首先要确定服务器返回的数据类型. 在请求头中加入: config.responseType = 'blob' 有时候,不是所有接口都需要该类型,则可以对接口做一个判定: // request拦截器 service.interceptors.request.use( config

  • vue下载二进制流图片操作

    1.应项目要求,后台返回二进制流,而且乱码 2.红色为必须 this.$axios.post('/fishweb/agent/downLoad',this.stringify({filename:'qrCode.jpg'}), { responseType: 'arraybuffer' //指定返回数据的格式为blob }).then((res) => { var src='data:image/jpg;base64,'+ btoa(new Uint8Array(res).reduce((dat

  • 在vue中使用axios实现post方式获取二进制流下载文件(实例代码)

    需求 点击导出下载表格对应的excel文件 在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api 实现 第一步,在 axios 请求中加入参数,表示接收的数据为二进制文件流 responseType: 'blob' 第二步,在拿到数据流之后,把流转为指定文件格式并创建a标签,模拟点击下载,实现文件下载功能 let blob = res.data let reader = new FileReader() reader.readAsDataURL(blob) r

  • vue实现下载文件流完整前后端代码

    使用Vue时,我们前端如何处理后端返回的文件流 首先后端返回流,这里我把流的动作拿出来了,我很多地方要用 /** * 下载单个文件 * * @param docId */ @GetMapping("/download/{docId}") public void download(@PathVariable("docId") String docId, HttpServletResponse response) { outWrite(response, docId);

  • django与vue的完美结合_实现前后端的分离开发之后在整合的方法

    最近接到一个任务,就是用django后端,前段用vue,做一个普通的简单系统,我就是一搞后端的,听到vue也是比较震惊,之前压根没接触过vue. 看了vue的一些文档,还有一些项目,先说一下django与vue的完美结合吧! 首先是创建一个django项目 django-admin startproject mysite # 创建mysite项目 django-admin startapp blog # 创建blog应用 一.接下来就是安装关于vue 的东西了 1.首先安装node.js,官网地

  • vue展示dicom文件医疗系统的实现代码

    环境:vue.webpack.constone 资料来源及文件:https://github.com/GleasonBian/CornerstoneVueWADO 需要下载的模块:cornerstone-core.dicom-parser 需要下载的js文件:压缩文件可以忽略 显示组件:showDicom.vue <template> <div class="dicom" ref="dicomImage"></div> </

  • 微信小程序使用websocket通讯的demo，含前后端代码，亲测可用

    0.概述websocket (1) 个人总结:后台设置了websocket地址,服务器开启后等待有人去连接它. 一个客户端一打开就去连接websocket地址,同时传递某些识别参数.这样一来后台和客户端连接成功了,然后后台就可以发消息给客户端了,(客户端也可以再回话给后台). (2) socket叫套接字,应用程序用socket向网络发出请求或者应答网络请求. (3) 官方解释的socket 建立连接四步骤: 服务器端开启socket,然后accep方法处于监听状态,等待客户端的连接. 客户端开

  • 微信服务器中下载文件到本地的实例代码

    从微信服务器中下载文件到本地的实例代码,如下所示: //从微信服务器中下载文件到本地 public JsonResult UploadRecord(string ServerId) { try { member m = base.CurrentUser; string msg = "成功"; bool success = true; SiteSettingsInfo setting = base.CurrentSiteSetting; string file = string.Empt

  • 以Spring Boot的方式显示图片或下载文件到浏览器的示例代码

    以Spring Boot的方式显示图片或下载文件到浏览器的示例代码

    以Java web的方式显示图片到浏览器以Java web的方式下载服务器文件到浏览器 以Spring Boot的方式显示图片或下载文件到浏览器 请求例子:http://localhost:8080/image/1564550185144.jpeg 示例代码: import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.R

  • Vue 中批量下载文件并打包的示例代码

    思路: 用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件 1. 准备工作 安装 3 个依赖: axios, jszip, file-saver yarn add axios yarn add jszip yarn add file-saver 2. 下载文件 import axios from 'axios' const getFile = url => { return new Promise((resolve, reject) => { a

  • vue导出excel文件流中文乱码问题及解决

    vue导出excel文件流中文乱码问题及解决

    目录 导出excel文件流中文乱码 导出excel乱码(锟斤拷唷?锟?:锟斤拷) 导出excel文件流中文乱码 解决此方法很多网上的差不多都可以.一下提供简单的方法 loads(){ let data={ userWord:this.dataList.userWord, examId:this.$route.query.id, exportType:this.active, } api.exportUserResult(data).then((res) => { const blob = new

  • ASP.NET中下载文件的几种实例代码

    复制代码 代码如下: //TransmitFile实现下载     protected void Button1_Click(object sender, EventArgs e)    {        /*         微软为Response对象提供了一个新的方法TransmitFile来解决使用Response.BinaryWrite         下载超过400mb的文件时导致Aspnet_wp.exe进程回收而无法成功下载的问题.         代码如下:         */

  • python下载文件记录黑名单的实现代码

    具体代码如下所示: #!/usr/bin/python # -*- coding: GBK -*- # -*- coding: UTF-8 -*- from ftplib import FTP import os import datetime ftp_server = '127.0.0.1' # 对应ftp服务器地址 username = 'ponshine' # 用户名 password = '1qaz2wsx' # 密码 ftp_path = '/GBCC/' # ftp目录 local_

随机推荐