项目中遇到一个将前端的图表在后台生成pdf导出的需求。由于前端使用D3.js生成SVG。因此，在后台也需要使用java生成SVG，并转换为图片格式，才能放入到pdf中。
后台java执行javascript
后台java渲染javascript，网上有多种解决方案。最简单的方法是使用 PhantomJS 。
PhantomJS是一个无头浏览器（headless WebKit），可以通过命令行方式执行javascript文件，常用于测试、爬虫等应用。但是要使用PhantomJS，需要先安装到系统中。公司线上环境安全系数比较高，安装软件需要层层审批，很麻烦。因此，我们没有用这个方法。
第二种方案是使用D3.js + react + Nashorn。Nashorn是Java SE 8的一部分，官方提供的原生方式执行JavaScript代码的引擎。这篇博客 中详细介绍了使用方法。但是由于我们项目前端没有使用react，如果使用这个方案，势必需要重新开发页面，成本有些高。因此，这个方案也没有被采用。
第三种方案是使用htmlunit。它原本是用来配合JUnit或TestNg来执行html的单元测试。因此，它可以直接渲染html文件。本文将介绍这套方案的具体实现方式。
htmlunit的用法非常简单，只要实例化WebClient，并执行getPage方法就可以获得渲染后了html页面。如果javascript执行需要较长时间，可以使用waitForBackgroundJavaScript方法，让线程等待一段实现。由于笔者只需要生成的svg图片，因此可以通过getElementById获取特定的Dom节点。
WebClient webClient = new WebClient();
HtmlPage page = webClient.getPage(this.getClass().getClassLoader().getResource("diag.html").toURI().toString());
webClient.waitForBackgroundJavaScript(1000);
String svg = page.getElementById("diagram").asXml();
如果需要将java的数据传给html页面去做渲染，可以在html页面中写一个ajax请求，并在执行getPage的时候拦截请求，修改后，返回给html页面。
loadXMLDoc();
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.responseType = 'json';
xmlhttp.open("GET", "ajax_info.txt", true);
xmlhttp.onload = function(e) {
if (xmlhttp.readyState === XMLHttpRequest.DONE) {// XMLHttpRequest.DONE == 4
getSvg(this.responseText);
}
};
xmlhttp.send();
}
首先需要重写WebClient中的loadWebResponse方法。根据判断ajax请求的url地址中是否包含modifyKey选择性的拦截请求内容。
public class ModifyContentWebClient extends WebClient{
private String modifyKey;
private String modifyContent;
@Override
public WebResponse loadWebResponse(final WebRequest webRequest) throws IOException {
WebResponse response = super.loadWebResponse(webRequest);
if (response.getWebRequest().getUrl().toString().contains(modifyKey)){
final List<NameValuePair> compiledHeaders = new ArrayList<>();
final WebResponseData data = new WebResponseData(modifyContent.getBytes(Charsets.UTF_8), 200, "success", compiledHeaders);
return new WebResponse(data, webRequest, 0);
}
return response;
}
public void setModifyKey(String modifyKey) {
this.modifyKey = modifyKey;
}
public void setModifyContent(String modifyContent) {
this.modifyContent = modifyContent;
}
}
最后在执行getPage前，将modifyKey和modifyContent设置好就可以了。
ModifyContentWebClient webClient = new ModifyContentWebClient();
webClient.setModifyKey("ajax_info");
String links = "hello word";
webClient.setModifyContent(links);
HtmlPage page = webClient.getPage(this.getClass().getClassLoader().getResource("diag.html").toURI().toString());
SVG转图片
java后台图片格式转换最有名的框架应该就是batik了。batik比较坑的地方是有无数的jar包依赖，如果设置不对，就会报各种奇怪的错误。
下面是笔者SVG转JPEG的jar包依赖关系：
<dependency>
<groupId>org.apache.xmlgraphics</groupId>
<artifactId>batik</artifactId>
<version>1.9.1</version>
<type>pom</type>
</dependency>
<dependency>
<groupId>org.apache.xmlgraphics</groupId>
<artifactId>batik-all</artifactId>
<version>1.9.1</version>
</dependency>
<dependency>
<groupId>org.apache.xmlgraphics</groupId>
<artifactId>batik-rasterizer</artifactId>
<version>1.9.1</version>
</dependency>
<dependency>
<groupId>org.apache.xmlgraphics</groupId>
<artifactId>batik-svgpp</artifactId>
<version>1.9.1</version>
</dependency>
生成图片有两种方案：一种是将图片写入临时文件，另一种是将图片保存到内存中并转换成base64编码。下面详细介绍两种实现方式：
生成临时图片文件
首先将生成的SVG字符串读入TranscoderInput
private TranscoderInput getTranscoderInput(String img){
InputStream inputStream = new ByteArrayInputStream(img.getBytes(Charsets.UTF_8));
String parser = XMLResourceDescriptor.getXMLParserClassName();
SAXSVGDocumentFactory f = new SAXSVGDocumentFactory(parser);
Document doc = null;
try {
doc = f.createDocument("", inputStream);
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
inputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
return new TranscoderInput(doc);
}
然后调用Transcoder，将生成的图片写入TranscoderOutput
File file = File.createTempFile("temp-", ".jpg");
OutputStream os = new FileOutputStream(file);
TranscoderOutput transcoderOutput = new TranscoderOutput(os);
JPEGTranscoder transcoder= new JPEGTranscoder();
transcoder.transcode(transcoderInput, transcoderOutput);
os.flush();
os.close();
context.put("img", file.toURI().toURL());
将图片写入内存并转换为base64格式
这种方式不需要生成临时文件，更安全也更加灵活。
在生成图片的过程中，batik原本就是先将图片保存在内存中，再通过TranscoderOuput输出。我们只需要拦截writeImage，将BufferedImage的内容拿出来就可以了。
final BufferedImage[] imagePointer = new BufferedImage[1];
ImageTranscoder t = new ImageTranscoder() {
@Override
public BufferedImage createImage(int w, int h) {
return new BufferedImage(w, h, BufferedImage.TYPE_INT_ARGB);
}
@Override
public void writeImage(BufferedImage image, TranscoderOutput out) {
imagePointer[0] = image;
}
};
//transcode svg to png in bufferedImage
t.transcode(transcoderInput, null);
context.put("img", getBase64(imagePointer[0]));
最后通过ImageIO转换为base64就可以了。
private String getBase64(BufferedImage im) throws IOException {
ByteArrayOutputStream os = new ByteArrayOutputStream();
OutputStream b64 = new Base64.OutputStream(os);
ImageIO.write(im, "png", b64);
return os.toString("UTF-8");
}
batik对中文字体的支持
原本，这篇文章写到这里就结束了。但是笔者在上线过程中遇到了生成的图片无法显示中文的陨石坑。
html页面中使用了微软雅黑字体，而线上linux系统中没有安装字体，导致生成的图片中中文无法显示。网上找不到相关资料，只能自己啃源码。原来batik的transcoder使用了java awt来绘制图片。awt提供了GraphicsEnvironment类来设置字体。所以，只要在transcoder之前设置好环境就可以了。
File fontFile = readResourceFile("/exportpdf/msyh.ttf");
Font font = Font.createFont(Font.TRUETYPE_FONT, fontFile);
GraphicsEnvironment.getLocalGraphicsEnvironment().registerFont(font);
网友评论