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

2022-04-06 18:33:29 阅读：256 来源： 互联网

标签：vue 服务器端 spingboot filePath url axios file data response

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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