Ajax 请求返回字节码图片文件 XMLHttpRequest请求并处理数据

最新推荐文章于 2024-03-06 13:00:32 发布

xp_zzp

最新推荐文章于 2024-03-06 13:00:32 发布

阅读量511

点赞数

分类专栏： JS 文章标签： js ajax

本文链接：https://blog.csdn.net/xp_zzp/article/details/108616461

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

公司客户要求在系统中打印标签，标签中含有条形码、二维码，二维码中还含有GS，RS，EOT这种特殊字符，小白第一次遇见直接当字符串处理了，打印用的是一款叫Stimulsoft Reports插件，这个插件支持在网页上打印，感觉还是比较好用的，但是这个插件打印条形码的效果不行，用手机扫描或者条码枪都很难识别出来，而且不支持插入特殊字符，我的处理方式可以看另一篇文章（）。
痛点还是打印出来条形码的效果不行，所以改用Bartender打印，研究了很长时间都不能在网页上打印，能打印也只限在本地打印，最后改成在客户端上安装一个打印服务，服务端调用本地的这个服务，这个服务调用Bartender程序去打印，最后测试可行，具体可看我的这篇文章（）。
既然是打印，就需要预览界面，所以需要Bartender把打印的标签保存成图片返回给服务端，一开始天真的以为返回图片路径就可以，结果浏览器报错说：不能加载本地连接，哭。
进入正题，服务加载图片文件后返回字节码。用Postman测试可以返回一张图片，首先在服务端用Ajax发送返回数据，返回的数据在后端进行处理，结果发现接收的数据总是会前面加一段莫名的乱码，大概是标识这是一张图片。由于乱码无法识别，后端也无法截取，也就无法生成图片。在网上找了一通，发现Ajax并不能识别字节码，需要用到原生的XMLHttpRequest 参考链接:。
Postman
下面是代码：（注释内容是Ajax，F()是FineUI插件）

function ShowLabel(labeldata) {
            if (labeldata.length > 0) {
                console.log("打印数据:" + labeldata);
                var printername = F(clientPrinter).getValue();
                var templetname = F(templet).getValue();
                var url = "http://localhost:8101/api/print?PrinterName=" + printername + "&Copies=1&Template=" + templetname + ".btw&Action=File";

                console.log("打印地址:" + url);
                F.getActiveWindow().window.resizeWindow();
                $("#imgcontainer").html('<div align="center" style="font-size: 24px;font-weight: bold;">预览加载中,请稍后...</div>');
                
                var xhr = new XMLHttpRequest();    
                xhr.open("POST", url, true);
                xhr.responseType = "blob";
                xhr.onload = function () {
                    if (this.status == 200) {
                        var blob = this.response;

                        var img = document.createElement("img");
                        img.onload = function (e) {
                            window.URL.revokeObjectURL(img.src);
                        };
                        img.src = window.URL.createObjectURL(blob);
                        $("#imgcontainer").html(img);
                    }
                };
                xhr.send(labeldata);


                //$.ajax({
                //    type: "POST",
                //    contentType: "text/plain; charset=utf-8",
                //    url: url,
                //    async: false,
                //    //dataType: 'text',
                //    data: labeldata,
                //    success: function (data, textStatus, request) {
                //        debugger
                //        console.log(data);
                //        //__doPostBack("", "Label$" + result);
                //    },
                //    //请求失败，包含具体的错误信息
                //    error: function (e) {
                //        console.log(e.status);
                //        console.log(e.responseText);
                //    }
                //});
            }
            else {
                F.alert("没有打印数据");
            }
        }