js 接收后台二进制流转成文件格式

本文介绍了一个简单的Java后台文件导出功能及前端实现文件下载的方法。通过使用@RequestMapping注解处理HTTP请求,并设置Content-Type响应头来指定文件类型。前端利用XMLHttpRequest发起POST请求并设置响应类型为blob,通过FileReader读取文件内容并转化为Base64编码,最后通过创建a标签的方式实现文件下载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

java后台:

    
    @RequestMapping(value = "/audit", method = {RequestMethod.POST, RequestMethod.GET})
    @ResponseBody
    public void audit(@RequestParam("id") long id, @RequestParam("status") String status,HttpServletResponse response) {
        JsonObject jsonObject = new JsonObject();
        try {
           
                String redeemCodeString="";
            
                response.reset();
                OutputStream outputStream = new BufferedOutputStream(response.getOutputStream());
                response.setContentType("application/octet-stream");
                response.setHeader("Content-Disposition","attachment; filename="+"redeemCodeString.txt");
                outputStream.write(redeemCodeString.getBytes(),0,redeemCodeString.getBytes().length);
                outputStream.close();
            

        } catch (Exception e) {
            e.printStackTrace();
            jsonObject.addProperty("msg","系统异常!");
            jsonObject.addProperty("code",1);
        }
    }

js:

            var xhr = new XMLHttpRequest();
	    var str = "id=" + ticketId + "&status=" + status;
            xhr.open('POST', "/admin/audit", true);    //也可以使用POST方式,根据接口
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.responseType = "blob";   //返回类型blob
            xhr.onload = function () {
                //定义请求完成的处理函数
                if (this.status === 200) {
                        var blob = this.response;
                        if(blob.size>0){
                            var reader = new FileReader();
                            reader.readAsDataURL(blob);   // 转换为base64,可以直接放入a标签href
                            reader.onload = function (e) {
                                // 转换完成,创建一个a标签用于下载
                                var a = document.createElement('a');
                                a.download = '兑换码.txt';
                                a.href = e.target.result;
                                $("body").append(a);    // 修复firefox中无法触发click
                                a.click();
                                $(a).remove();
                                window.location.reload();
                            }
                        }else{
                            window.location.reload();
						}
                }
            };
            xhr.send(str);






### Vue 中读取后端返回的二进制文件流并将其转换为图片显示的方法 在 Vue 应用程序中实现这一功能的核心在于正确处理后端返回的二进制数据,并将其转化为可渲染的图像格式。以下是具体的解决方案: #### 后端接口配置 为了确保前端能够接收到正确的二进制数据,后端需要设置响应头 `Content-Type` 为 `image/jpeg`, `image/png` 或其他合适的 MIME 类型[^2]。 #### 前端代码实现 通过 Axios 请求获取二进制数据并将其实现为 Base64 编码字符串以便于展示到 `<img>` 标签中。 ```javascript export default { methods: { fetchAndDisplayImage() { this.$axios.get('/api/image', { // 替换为实际的API路径 responseType: 'arraybuffer' // 设置响应类型为 arraybuffer 来接收二进制数据 }) .then(response => { const mimeType = response.headers['content-type']; // 获取MIME类型 const binaryData = new Uint8Array(response.data); const base64String = btoa(String.fromCharCode.apply(null, binaryData)); // 将二进制数组转为Base64编码 this.imageSrc = `data:${mimeType};base64,${base64String}`; // 构造完整的 data URI 并赋值给 imageSrc 属性 }) .catch(error => { console.error('Error fetching the image:', error); }); } }, data() { return { imageSrc: '' // 存储最终用于 img src 的 Data URL 字符串 }; }, mounted() { this.fetchAndDisplayImage(); // 页面加载完后自动调用此函数来获取并显示图片 } }; ``` #### HTML 部分 将计算好的 `this.imageSrc` 绑定至 `<img>` 元素的 `src` 属性即可完动态加载与显示操作。 ```html <template> <div> <h3>Dynamic Image Display</h3> <!-- 使用 v-bind 动态绑定 src --> <img :src="imageSrc" alt="Loaded from backend"/> </div> </template> ``` 以上代码片段展示了如何利用 Vue.js 和 Axios 插件从服务器拉取一张图片作为二进制流形式的数据包下来之后再把它变可以被浏览器解析出来的可视化的图形内容呈现出来[^3]。 ### 注意事项 - **跨域问题**: 如果前后端分离部署,则需注意 CORS 支持情况。 - **性能优化**: 对于大尺寸或者高分辨率的图片资源传输过程可能会消耗较多时间以及带宽流量,在生产环境中建议压缩后再上传云端存储链接代替直接回传原始像素级位图资料的方式减少不必要的网络负载压力影响用户体验效果最佳实践方案之一就是采用CDN加速服务机制来进行静态素材托管管理从而达到提升访问速度的目的同时也能减轻源站的压力负担程度相对较低一些情况下更为合适的选择策略方向所在之处值得深入探讨研究一番才行哦!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值