Ajax请求二进制流并在页面展示

后端代码：

public void getIntegralQrcode(HttpServletResponse response, String token) throws BizException, IOException, WriterException {
        logger.info("qrcode info ...");
 
        response.setCharacterEncoding("UTF-8");
        response.reset();
        ServletOutputStream os = response.getOutputStream();
 
        // 请求地址
        String url = ConfigProperties.getUrl();
        logger.info("qrcode info request url -- > {}", url);
 
        // 加密内容
        String base64Code = Base64Utils.getBase64Code(WechatQrcodeTypeEnum.H5.getValue(), maculaConfig.getIntegralQrcodeScanName(), null);
        logger.info("qrcode info base64Code -- > {}", base64Code);
 
        // 二维码内容
        String content = WechatQrcodeUtil.getRequestUrl(url, "2", base64Code);
        logger.info("qrcode info -- > {}", content);
 
        QRCodUtil.encodeQRCodeImage(content, null, WechatQrcodeUtil.IMAGE_WIDTH, WechatQrcodeUtil.IMAGE_HEIGHT, os);
        os.flush();
        os.close();
    }

后端工具类：

public class WechatQrcodeUtil {
 
    static Logger logger = LoggerFactory.getLogger(WechatQrcodeUtil.class);
 
    private static final String TYPE = "type";
    private static final String NAME = "name";
    private static final String PARAM = "param";
    
    // 加密内容定义区域key
    private static final String base64= "base64";
 
    private static final String EQUAL_STR = "=";
    private static final String AND_STR = "&";
    private static final String QUE_STR = "?";
 
    public static final int IMAGE_WIDTH = 262;
    public static final int IMAGE_HEIGHT = 262;
 
    /**
     * 放入二维码内容
     *
     * @param url 请求地址
     * @param modelType 请求模块名称
     * @param base64 加密内容
     * @return
     */
    public static String getRequestUrl(String url, String modelType, String base64){
        StringBuffer sb = new StringBuffer();
        sb.append(url);
        sb.append(QUE_STR);
        sb.append(TYPE).append(EQUAL_STR).append(modelType);
        sb.append(AND_STR);
        sb.append(base64).append(EQUAL_STR).append(base64);
        logger.info("request address: {}", sb.toString());
        return sb.toString();
    }
 
    /**
     * 获取加密参数内容
     * @param type 类型 @see{WechatQrcodeTypeEnum}
     * @param name
     *  <li>channelName：</li>
     *  <li>moduleName：</li>
     *  <li>httpurl：在线页面地址</li>
     * @param urlParams key:value,key:value,...
     *
     * @return
     * @throws UnsupportedEncodingException
     */
    public static String getBase64Code(String type, String name, Object... urlParams) throws UnsupportedEncodingException{
        StringBuffer sb = new StringBuffer();
        sb.append(TYPE).append(EQUAL_STR).append(type);
        sb.append(AND_STR);
        sb.append(NAME).append(EQUAL_STR).append(name);
        if(urlParams != null){
            sb.append(AND_STR);
            sb.append(PARAM).append(EQUAL_STR).append(urlParams);
        }
        logger.info("request params: {}", sb.toString());
        return Base64.encode(sb.toString().getBytes());
    }
 
}

前端Ajax请求：

<#--
 * README
 * 在页面定义页面token<i><@macula.formToken /></i>
 *
 * @author add by liuyc in 2018-11-28
 *
-->
 
<div id="qrcode-image" class="bottom-image"></div>
 
<script type="text/javascript">
 
window.onload = function(){
 
    var xhr = new XMLHttpRequest();
 
    var url = base + "/qrcode?token=" + $("input[name='ftoken']").val();
    xhr.open('GET', 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);
            document.getElementById("qrcode-image").appendChild(img);
        }
    }
    xhr.send();
}
 
</script>

写入页面后的展示：