vue前端接收后台java传过来得文件流实现文件下载功能

最新推荐文章于 2024-08-22 17:56:44 发布

小白来袭

最新推荐文章于 2024-08-22 17:56:44 发布

阅读量1.1k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_47218793/article/details/119794648

版权

本文介绍了如何在Vue前端应用中，通过接收到后台Java发送的文件流，解密并实现点击按钮直接下载文件的功能。涉及到的技术点包括文件流处理、Base64解密以及前端接口调用。

摘要由CSDN通过智能技术生成

实现点击下载按钮就可以下载文件得功能

文件流：通过base64加密得对应文件得内容

前端：要先解密

接口调用(url,参数根据实际而定)

api

import request from 'axios';

export function downLoad (path,filename){
  return request.post(url,{
    path,
    filename
  });
}

index.vue

//引入接口
import downLoad form 'api地址'

//methods方法
downLoad(path, filename).then((res) => {
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          const byteCharacters = atob(res.data);
          const byteNumbers = new Array(byteCharacters.length);
          for (let i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
          }
          const byteArray = new Uint8Array(byteNumbers);
          const blob = new Blob([byteArray], { type: 'application/vnd.ms-excel' });
          window.navigator.msSaveOrOpenBlob(blob, filename);