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");
            //文件名中午乱码的问题没有解决所以，文件名后端都叫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;
    },

标签：vue,服务器端,spingboot,filePath,url,axios,file,data,response
来源： https://www.cnblogs.com/yclh/p/16107844.html