Vue实现点击按钮下载文件的操作代码(后端Java)

上篇文章给大家介绍过vue实现点击按钮下载文件功能,今天继续vue点击按钮下载文件的话题。

最近项目中需要实现点击按钮下载文件的需求,前端用的vue,因为文件是各种类型的,比如图片、pdf、word之类的。这里后端是可以返回文件的地址给前端的,但我看了下网上各种五花八门的答案,感觉都不是我想要的。

因为不确定文件是哪种类型的,所以我们在保存文件到数据库的时候,应该把文件的 Content-Type 一起存入,这样从数据库取出返回前端的时候,带上 Content-Type 标识是哪种类型的文件,前端解析即可。

1、后端代码

这里我先写后端的接口,考虑一下后端需要什么东西。因为文件信息已经提前存入数据库,所以我们只需要传入主键id就可以拿到文件的信息。确定参数后,就需要确定一下返回值类型。这里可以使用 ResponseEntity 返回。 ResponseEntity 可以一次返回多个信息,包括状态码,响应头信息,响应内容等。

话不多说,看代码。

/**
 * 下载附件
 * @param attachmentId
 * @return
 */
public ResponseEntity<byte[]> download(Long attachmentId) {
    // 查询附件是否存在
    SysAttachment sysAttachment = sysAttachmentMapper.selectSysAttachmentById(attachmentId);
    if (StringUtils.isNull(sysAttachment)) {
        return null;
    }

    ByteArrayOutputStream bos = null;
    InputStream ins = null;
    try {
        String fileName = sysAttachment.getOrgFileName();
        String ossFileName = sysAttachment.getUrl();
        bos = new ByteArrayOutputStream();
        ins = OssUtils.getInstance().getObject(ossFileName).getObjectContent();
        // 取流中的数据
        int len = 0;
        byte[] buf = new byte[256];
        while ((len = ins.read(buf, 0, 256)) > -1) {
            bos.write(buf, 0, len);
        }

        // 防止中文乱码
        fileName = URLEncoder.encode(fileName, "utf-8");
        // 设置响应头
        HttpHeaders headers = new HttpHeaders();
        headers.add("Content-Disposition", "attachment;filename=" + fileName);
        headers.add("Content-Type", sysAttachment.getContentType());
        // 设置响应吗
        HttpStatus statusCode = HttpStatus.OK;
        ResponseEntity<byte[]> response = new ResponseEntity<byte[]>(bos.toByteArray(), headers, statusCode);
        return response;
    } catch (Exception e) {
        throw new CustomException("下载失败");
    } finally {
        try {
            if (ins != null) {
                ins.close();
            }
            if (bos != null) {
                bos.close();
            }
        } catch (Exception e) {
            throw new CustomException("下载失败");
        }
    }
}

这里我们从数据库拿出文件的url后,再通过阿里云oss拿到文件的输入流,接着把文件输出为二进制,封装到 ResponseEntity 中,并把文件的类型设置到 Content-Type 中,同时为了防止文件名带有中文名乱码,设置 utf-8 编码,至此后端接口完成。

通过上面的信息,我们在数据库保存文件信息时,至少应该保存下面几个字段:文件的url(一般在上传到oss后会给你一个)、文件的类型、原始文件名、文件大小等。

2、前端代码

有了后端接口,接下来就是前端了。这里可以把文件下载的方法封装成一个通用方法全局挂载,之后需要使用的地方直接使用即可。

我们需要标识不同的文件,所以我们需要一个键值对表示不同的文件。

const mimeMap = {
  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  xls: 'application/vnd.ms-excel',
  zip: 'application/zip',
  jpg: 'image/jpg',
  jpeg: 'image/jpeg',
  png: 'image/png',
  doc: 'application/msword',
  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
  ppt: 'application/vnd.ms-powerpoint',
  txt: 'text/plain',
  pdf: 'application/pdf'
}

有需要的可以继续补充。接下来自然就是发请求了,这里的返回类型可以设置为 blob ,使用axios直接发送。

/**
 * 下载附件
 * @param path 接口地址
 * @param param  请求参数
 */
export function downloadAttachment(path, param) {
  var url = baseUrl + path + param
  axios({
    method: 'get',
    url: url,
    responseType: 'blob',
    headers: { 'Authorization': getToken() }
  }).then(res => {
    resolveBlob(res, res.data.type)
  })
}

接口地址和请求参数从外部传入。同时需要携带token,不然会跨域访问。拿到后端返回的数据后,需要解析二进制文件,这里定义 resolveBlob 方法,该方法有两个参数,返回对象和文件的类型,文件的类型,我们在后端已经放入 Content-Type 中了,这里直接取。

/**
 * 解析blob响应内容并下载
 * @param {*} res blob响应内容
 * @param {String} mimeType MIME类型
 */
export function resolveBlob(res, mimeType) {
  const aLink = document.createElement('a')
  var blob = new Blob([res.data], { type: mimeType })
  // 从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
  var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
  var contentDisposition = decodeURI(res.headers['content-disposition'])
  var result = patt.exec(contentDisposition)
  var fileName = result[1]
  fileName = fileName.replace(/\"/g, '')
  aLink.href = URL.createObjectURL(blob)
  aLink.setAttribute('download', fileName) // 设置下载文件名称
  document.body.appendChild(aLink)
  aLink.click()
  document.body.removeChild(aLink);
}

这代码不用多解释了吧,前端大佬们自然看得懂。OK了啊,到这里前后端代码都完成了。

3、使用

使用那就更简单啦。先挂载到全局

import { downloadAttachment } from "@/utils/download"
Vue.prototype.downloadAttac = downloadAttachment

在使用的地方直接调用即可

<el-button
    type="text"
    icon="el-icon-download"
    size="mini"
    @click="downloadAttachRow(scope.row.attachmentId)"
    ></el-button>

/** 下载附件 */
downloadAttachRow(attachId) {
    this.$confirm('是否确认下载该文件?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(() => {
        this.downloadAttac('/system/attachment/download/', attachId)
    }).then(() => {
        this.msgSuccess("下载成功")
    }).catch(() => {})
}

到此结束。

到此这篇关于Vue实现点击按钮下载文件的操作代码(后端Java)的文章就介绍到这了,更多相关Vue点击按钮下载文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue点击按钮动态创建与删除组件功能

    主要功能需求点: 点击左侧组件库按钮创建对应的不同的组件,并在右侧区域展示 点击右侧创建的组件中的删除按钮,删除对应的组件 删除对应的组件之后,下方的组件位置自动上移 效果图: 代码: 父组件代码(去除了css样式代码): <template> <div class="home"> <div class="container"> <div class="addZujian"> <div>

  • Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法

    我测试过很多遍,想要通过a标签的形式来直接点击url下载文件并重命名但是都失败了,最终只能下载却不能重命名 所以 换了java后台来修改名字.以下代码 我做的网页是点击文件直接下载 直接下载下来了,一开始的文件名是上传到oss时以id命名的名字,现在下载的时候想改名,遇到了问题,所以写了这篇博客 首先是后台代码 /** * 附件下载 * <p> * * @param param * @return ResponseDTO */ @PostMapping(value = "/downl

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

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

  • vue实现点击按钮切换背景颜色的示例代码

    用vue简单的实现点击按钮切换背景颜色,具体代码如下所示: <div class="btnTitle"> <div class="btn-bg" :class="{bg:time == 3}" @click="changeBg(3)">15天</div> <div class="btn-bg" :class="{bg:time == 4}" @c

  • vue实现点击按钮下载文件功能

    项目中需要用到文件下载功能,查了资料发现需要用到a标签的特性,但是这边需要用到点击按钮下载,懒得写样式,于是用了以下代码. <div class="btns"> <el-button size="mini" type="primary" @click="$router.push(`/portal/${item.id}/detail`)">查看软件</el-button> <el-lin

  • Vue实现点击按钮下载文件的操作代码(后端Java)

    上篇文章给大家介绍过vue实现点击按钮下载文件功能,今天继续vue点击按钮下载文件的话题. 最近项目中需要实现点击按钮下载文件的需求,前端用的vue,因为文件是各种类型的,比如图片.pdf.word之类的.这里后端是可以返回文件的地址给前端的,但我看了下网上各种五花八门的答案,感觉都不是我想要的. 因为不确定文件是哪种类型的,所以我们在保存文件到数据库的时候,应该把文件的 Content-Type 一起存入,这样从数据库取出返回前端的时候,带上 Content-Type 标识是哪种类型的文件,前

  • 使用JS代码实现点击按钮下载文件

    正文 有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 font-awesome 上面的.使用时,首先将 font-awesome 整个文件夹下载下来,利用bower或者是自己去官网上面下载都行. 将整个文件夹放在项目文件中之后,在页面上面引入css文件 <link href="libs/font-awesome-4.7.0/css/font

  • vue内点击url下载文件的最佳解决方案分享

    目录 前言 解决方案: 代码实现 注意: 总结 前言 开发中经常遇到这样的功能,用户将文件或附件上传到服务器,后端将文件放到ftp或是其他位置,在前端页面内有下载的入口,有时候,后端返回的是blob,这种情况当然是最好的,但是为了方便,后端也可能返回文件所在位置的url,这时,对前端来说,可能遇到一些问题,比如,下载文件时候浏览器可能会出现闪动,下载图片,json文件等浏览器支持的文件时候,不会下载,而是直接在浏览器内打开这类文件,下面的方法可以完美解决此类问题 解决方案: 封装自定义指令 将u

  • Vue中点击url下载文件的案例详解

    目录 代码实现 使用 注意 封装自定义指令 将url转成bold,在创建a标签下载blob 代码实现 在src 下面的 directive 文件夹下新建目录 downLoadUrl downLoadUrl / index.js文件 /* * 后端返回文件的url,前端创建a标签来下载 * * 1. 解决了若文件为图片或浏览器支持的格式类型,点击下载会直接打开文件的问题, * 2. 下载文件时,浏览器会有闪动的问题 * * 页面内使用 * 1. 引入指令 import downLoad from

  • 使用vue实现点击按钮滑出面板的实现代码

    在通信的时候容易出错,或者信息根本传不过来.那么这里就示例一下,怎么通过组件之间的通信完成点击事件. index.vue文件中: <div> <el-button type="primary" @click="onShow">点我</el-button> </div> 传递中介 <addForm :show="formShow" @onHide="formShow = false&q

  • Vue实现点击按钮复制文本内容的例子

    点击复制功能主要通过 clipboard.js 来实现 在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话,则复制不成功,使用步骤如下: 1.引入clipboard.js,方法如下: 第一种直接npm安装:npm install clipboard --save 第二种:<script src="js/clipboard.min.js"></script>(下载地址:https://clipboardjs.

  • php实现当前页面点击下载文件的实例代码

    php控制器中代码 public function downFile($path = ''){ if(!$path) header("Location: /"); download($path); } download文件下载函数代码 function download($file_url,$new_name=''){ if(!isset($file_url)||trim($file_url)==''){ echo '500'; } if(!file_exists($file_url)

  • Vue.js 点击按钮显示/隐藏内容的实例代码

    实例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <d

随机推荐