vue+spingboot 实现服务器端文件下载功能

vue3 和springboot配合如何实现服务器端文件的下载。

先看springboot的后台代码：

@PostMapping("/download")
   @ResponseBody
   public void downloadWord(HttpServletResponse response, HttpServletRequest request,@Valid  String filePath) {
 
       try {
           //获取文件的路径filePath是服务器端存放文件的完整地址
           File file = ResourceUtils.getFile(filePath);
 
           //文件后缀名
           String suffex = filePath.split("\\.")[1];
 
           // 读到流中
           InputStream inStream = new FileInputStream(file);//文件的存放路径
           // 设置输出的格式
           response.reset();
           response.setContentType("bin");<br>            //文件名中午乱码的问题没有解决所以，文件名后端都叫1.XXX，最后文件名由前端重新修改
           response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("1."+suffex, "UTF-8"));
           // 循环取出流中的数据
           byte[] b = new byte[200];
           int len;
 
           while ((len = inStream.read(b)) > 0) {
               response.getOutputStream().write(b, 0, len);
           }
           inStream.close();
       } catch (IOException e) {
           e.printStackTrace();
       }
   }

vue端：

网络请求使用axios ，文件下载使用file-saver

npm install file-saver --save

bower install file-saver

注：axios参照vue axiox网络请求，如下代码不在同一个文件内，根据需求自行规划

import axios from "axios"; // 引用axios
import qs from 'qs';


const instance = axios.create({
    baseURL: config.baseUrl.dev,
    timeout: 60000,
    responseType: 'blob', //这里是关键
    withCredentials: true,
    crossDomain: true,
    transformRequest: [function(data) {
        data = qs.stringify(data);
        return data;
    }],
    headers: {
        'apiVersion': 'v1',
    }
});

export function postBlob(url, data = {}) {
    return new Promise((resolve, reject) => {
        instance.post(url, data)
            .then((response) => {
                resolve(response);
            })
            .catch((err) => {
                reject(err);
            });
    });
}

//资源下载的接口定义
export const resourceDownload = (params) => postBlob("/zy/download", params);



//资源下载的方法
downLoadfunction(index) {
        //获得资源的名称
        let fileName = this.getFileName(this.data1[index].resourcesPath);
        //指定资源在服务期端的路径
        let paramter = {
            filePath: this.data1[index].resourcesPath
        };
        resourceDownload(paramter).then(res => {
                var FileSaver = require('file-saver');
                var blob = new Blob([res.data], {
                    type: "text/plain;charset=utf-8"
                });
                FileSaver.saveAs(blob, fileName)
            })
            .catch(error => {});
    },

    //获取文件名
    getFileName(url) {
        let name = "";
        if (url !== null && url !== "") {
            name = url.substring(url.lastIndexOf("/") + 1);
        } else {
            name = "无";
        }
        return name;
    },