JavaScript - Cytoscape Web export network

關於Cytoscape Web這邊要探討的是執行一行JavaScript code來輸出檔案，如pdf, svg, png等，

不過需要在server-side的部分，處理InputStream及加上header的setting，最後是透過OutputStream

來得到我們要的檔案。

而Client的部分只需下一行指令即可，如下：

//vis => new org.cytoscapeweb.Visualization(...)
vis.exportNetwork('png', 'export_network.jsp?type=png');

注意！.exportNetwork的執行需要在vis.ready內。

Server-side的地方是利用Java Server Page撰寫，如下：

String type = request.getParameter("type").toString();
 OutputStream o = response.getOutputStream();
 if(type.equals("png")){
     response.setContentType("image/png");
 }else if(type.equals("pdf")){
     response.setContentType("application/pdf");
 }else if(type.equals("svg")){
     response.setContentType("image/svg+xml");
 }else{
     response.setContentType("text/xml");
 }
 response.setHeader("Content-Disposition","attachment;filename=network."+type);
 byte[] buf = new byte[4096];
 int byteRead = 0;
 while((byteRead = request.getInputStream().read(buf)) != -1){
     o.write(buf, 0, byteRead);
 }
 o.flush();
 o.close();

基本上，與官方網站的PHP範例code算是大同小異，不過要注意的是InputStream

and OutputStream的存取！

---------------------------------------------------------------------------------------
作法二：

照理說，利用cytoscape web exportNetwork就可以順利幫我們把相關的資訊post

到指定的server page，來做串流輸出的動作，搭配指定的標頭。不過，後來新版的chrome

竟然無任何作用！！ 也就是說針對vis.exportNetwork('png',...)指令，chrome無任何作用！

不過，IE是OK的，據說Firefox也OK！

因此，我們可以自己來實作post ，建立個別export item專屬的form，來將相關的value傳輸到

Server page。

HTML部分如下：

<form id="png_form" method="post" action="export_network.jsp">
    <input type="hidden" name="content">
    <input type="hidden" name="type" value="png">
</form>

<form id="svg_form" method="post" action="export_network.jsp">
    <input type="hidden" name="content">
    <input type="hidden" name="type" value="svg">
</form>

<form id="xml_form" method="post" action="export_network.jsp">
    <input type="hidden" name="content">
    <input type="hidden" name="type" value="xml">
</form>

JavaScript部分改寫成：

//vis.exportNetwork('png', 'export_network.jsp?type=png');
$("#png_form [name=content]").val(vis.png());
$("#png_form").submit();

在這邊還是會透過vis.png()取得相關產生圖片的資料，依據官網的說明vis.png()會取得以

Base64編碼的圖片字串，因此在Server page時，需要先解碼再轉成byte code方OK。

Server page部分改寫如下：

String type = request.getParameter("type").toString();
String content = request.getParameter("content").toString();
OutputStream o = response.getOutputStream();
byte nerStr[];
if(type.equals("png")){
   response.setContentType("image/png"); 
   nerStr = Base64.decodeBase64(content.toString());
}else if(type.equals("svg")){
   response.setContentType("image/svg+xml");
   nerStr = content.getBytes();
 }else{
   response.setContentType("text/xml");
   nerStr = content.getBytes();
 }
 response.setHeader("Content-Disposition","attachment;filename=network."+type);
 o.write(nerStr);

在png輸出處理的部分會稍麻煩一點，至於其它的格式只要單純地將string轉成byte即可！

如此一來，即使無法使用exportNetwork method還是可以達到我們要的功能！