Java动态生成HTML调用JS展示Base64图片遇语法错误排查

问题根源 #

Java动态生成HTML时，直接将Base64字符串作为参数传入displayImage函数，未用引号包裹。Base64字符串长达80k，JS会将其中字符解析为语法片段，触发「unexpected token」语法错误。

解决方案 #

修改Java拼接HTML的代码，给传入displayImage的Base64字符串添加单引号包裹（标准Base64字符集不含单引号，无需额外转义），确保JS识别其为完整字符串参数。

修改后的Java代码 #

// Base64生成代码保持不变
String base64Image = Base64.getEncoder().encodeToString(CscmFcnaRes1.getImage()).trim();

// 修正HTML拼接逻辑
StringBuffer sb = new StringBuffer();
sb.append("<A href=\"#\"")
  .append(" onClick=\"displayImage('")
  .append(base64Image)
  .append("')\">查看图片</A>");

验证生成的HTML格式 #

生成后的HTML需符合以下结构，确保Base64字符串被正确包裹：

<A href="#" onClick="displayImage('JVBERi0xLjMK...（完整Base64内容）...')">查看图片</A>

原代码参考 #

Java生成Base64代码 #

String base64Image = Base64.getEncoder().encodeToString(CscmFcnaRes1.getImage()).trim();

原HTML拼接代码（错误版本） #

.append("<A href=\"#\"")
.append(" onClick=displayImage(")
.append(base64Image)
.append(">")

JavaScript函数代码 #

function displayImage(base64Image) {
    var newTab = window.open();   
    newTab.document.open();   
    var isPdf = base64Image.substring(0, 4) === 'JVBER';
    var mimeType = isPdf ? 'application/pdf' : 'image/jpeg';      
    var htmlContent = '<html><body>';
    htmlContent += '<embed width="100%" height="100%" src="data:' + mimeType + ';base64,' + base64Image + '">';
    htmlContent += '</body></html>';      
    newTab.document.write(htmlContent);
    newTab.document.close();
}

补充说明：手动解码Base64字符串可正常查看图片，字符串长度约80k字符；生产环境无法引入新框架，需解决该语法错误实现需求。

内容的提问来源于stack exchange，提问作者Ramanamark Suriyamoorthy