标签：vue elink springboot filePath 下载 const data response 服务端

     开发中会遇到，通过浏览器下载服务器端返回的文件功能，本文使用springboot+vue实现该功能。

后端代码：

注：后端返回的文件名遇到中文就会乱码，一直也没得到很好的解决方案，最后就统一返回1.xxx的文件，文件名称由前端最终改成实际的文件名（包含中文也没问题）

/**
     * 资源下载。
     *
     * @param filePath 文件路径
     * @return AjaxResult
     */
    @PostMapping("/download")
    @ResponseBody
    public void downloadWord(HttpServletResponse response, HttpServletRequest request,@Valid  String filePath) {

        try {
            //获取文件的路径
            File file = ResourceUtils.getFile(fileSavePath+filePath);

            //文件后缀名
            String suffex = filePath.split("\\.")[1];

            // 读到流中
            InputStream inStream = new FileInputStream(file);//文件的存放路径
            // 设置输出的格式
            response.reset();
            response.setContentType("bin");
            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通信模块

const instanceImage = axios.create({
    baseURL: config.baseUrl.dev,
    timeout: 60000,
    responseType: 'blob',
    withCredentials: true,
    crossDomain: true,
    // post 使用form-data
    transformRequest: [function(data) {
        data = qs.stringify(data);
        return data;
    }],
    headers: {
        
    }
});

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

export const resourceDownload = (params) => postBlob("download",params);

页面上的调用下载和方法

         
        <span style="cursor:pointer;color:#0000FF" @click="downLoadResource()">资源下载</span>


        
          //调用下载的方法



          downLoadResource() {

                let paramter = {
                    filePath: '/resource/1.jpg',
                };
                resourceDownload(paramter).then(res => {
                        const content = res.data
                        const blob = new Blob([content])
                        const fileName = '测试.jpg';

                        const elink = document.createElement('a')
                        elink.download = fileName
                        elink.style.display = 'none'
                        elink.href = URL.createObjectURL(blob)
                        document.body.appendChild(elink)
                        elink.click()
                        URL.revokeObjectURL(elink.href) // 释放URL 对象
                        document.body.removeChild(elink)

                    })
                    .catch(error => {});

                this.$Message.info('资源下载！');
                
            },

标签：vue,elink,springboot,filePath,下载,const,data,response,服务端
来源： https://www.cnblogs.com/yclh/p/16401936.html

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