自学内容网 自学内容网

Java后端请求文件,解决前端下载问题

Java后端请求文件,解决前端下载问题

问题描述

前端有文件下载需求,已知文件的远程下载路径,但是与当前项目路径不一致,使用前端访问文件url下载的方式失败;
在这里插入图片描述

解决思路

1、方式1:使用nginx对文件地址进行代理;
2、方式2:java后端下载图片之后,使用二进制传输到前端

限制

服务器限不给配置代理,因此选择方式2

@RequestMapping("/download")
    public ResponseEntity<byte[]> downloadFile(@RequestParam("fileUrl") String fileUrl) {
        try {

            fileUrl = fileViewDomain + fileUrl;
            // 通过传入的远程文件URL创建URL对象
            URL url = new URL(fileUrl);
            // 打开连接获取URLConnection对象,用于后续获取输入流等操作
            URLConnection connection = url.openConnection();
            // 获取输入流,为了提高读取效率,使用BufferedInputStream进行包装
            InputStream inputStream = new BufferedInputStream(connection.getInputStream());

            byte[] buffer = new byte[4096];
            int bytesRead;
            // 使用ByteArrayOutputStream来临时存储读取到的文件字节内容
            ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
            while ((bytesRead = inputStream.read(buffer))!= -1) {
                outputStream.write(buffer, 0, bytesRead);
            }

            byte[] bytes = outputStream.toByteArray();

            // 设置响应头信息
            HttpHeaders headers = new HttpHeaders();
            // 设置内容类型,尝试从远程文件获取Content-Type头信息来设置,若获取不到则按二进制流形式设置
            String contentType = connection.getContentType();
            if (contentType!= null) {
                headers.setContentType(MediaType.parseMediaType(contentType));
            } else {
                headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
            }

            // 设置下载时的文件名,这里简单假设文件名在远程文件路径的最后部分(可根据实际情况优化解析文件名的方式)
            String fileName = fileUrl.substring(fileUrl.lastIndexOf('/') + 1);
            // 以附件形式设置Content-Disposition头信息,确保文件名能正确显示在下载提示中
            headers.add("Content-Disposition", "attachment; filename=\"" + fileName + "\"");

            // 关闭输入流和临时的输出流,释放资源
            inputStream.close();
            outputStream.close();

            // 返回响应实体,包含文件内容字节数组、响应头以及状态码(这里使用200表示成功)
            return new ResponseEntity<>(bytes, headers, HttpStatus.OK);
        } catch (IOException e) {
            e.printStackTrace();
            // 如果出现异常,返回一个表示服务器内部错误的响应实体,可根据实际业务需求优化错误提示等信息
            return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
        }
    }

前端代码

async function downloadFile(fileUrl) {
        fileUrl = '${ctxBase}/common/file/download?fileUrl='+fileUrl
        const response = await fetch(fileUrl);
        const blob = await response.blob();
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = '附件' + getFileType(fileUrl);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(url);
    }

    function getFileType(fileUrl){
        const parts = fileUrl.split('/');
        const fileNameWithExtension = parts[parts.length - 1];
        return fileNameWithExtension.split('.').pop();
    }

这样子点击下载之后,就能完成下载了
在这里插入图片描述
在这里插入图片描述


原文地址:https://blog.csdn.net/weixin_43159039/article/details/143891452

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!