您的位置:首页 > Web前端 > JavaScript

jsp中含有多个Highcharts的统计图,还有一些其他资料,生成pdf文件

2015-05-14 11:51 316 查看
解决步骤

1.将highcharts的多个统计图同时生成图片

2.生成pdf

highcharts提供了单个统计图的生成图片,网上也有资料,但都是单个下载

一、修改highcharts的源码

因为highcharts源码中生成图片是表单形式提交,但我们需要ajax提交,这样才可以同时生成多个图片

exporting.js(建议先格式化一下,否则不好看懂呀)

修改exportChart方法,改为

exportChart: function(b, a) {
var b = b || {},
d = this.options.exporting,
d = this.getSVG(k({
chart: {
borderRadius: 0
}
},
d.chartOptions, a, {
exporting: {
sourceWidth: b.sourceWidth || d.sourceWidth,
sourceHeight: b.sourceHeight || d.sourceHeight
}
})),
b = k(this.options.exporting, b);
$.ajax({
type: 'POST',
url: b.url,
data: {
filename: b.filename || "chart",
type: b.type,
width: b.width || 0,
scale: b.scale || 2,
svg: d
},
async:false
});
/* f.post(b.url, {
filename: b.filename || "chart",
type: b.type,
width: b.width || 0,
scale: b.scale || 2,
svg: d
},
b.formAttributes,'json')*/
},

二.生成图片

jsp页面中,其它部分已省略,就加了重点的部分

var container2 = new Highcharts.Chart({

exporting:{
enabled: false,
filename:'container2',
<a target=_blank href="'<%=basePath%>export/export'//">url:'<%=basePath%>export/export'//</a>这里是一个重点哦,也可以修改exporting.js中对应的url
}

});

页面导出时触发事件

$("#download").click(function(){
chart.exportChart();//生成图片
container2.exportChart();//生成图片
window.open("<%=basePath%>export/toShow");
});
});

后台代码

/***
*
* 导出图片 只生成png图片(此处可以改为jpg)
*
* @author zhangjing
* @date 2015-5-14
* @param request
* @throws Exception
* @see
*/
@RequestMapping("export")
@ResponseBody
public void export(HttpServletRequest request) throws Exception {
String path = new String(this.getClass().getResource("/").getPath()
.replace("%20", " "));// 当前工程的路径
String filePath = path.substring(1, path.lastIndexOf("WEB-INF"))
+ "images/temp/";
String filename = request.getParameter("filename");
filename = filename == null ? "chart" : filename;
OutputStream out = new FileOutputStream(new File(filePath + filename
+ ".png"));
String type = request.getParameter("type");
String svg = request.getParameter("svg");

if (null != type && null != svg) {
svg = svg.replaceAll(":rect", "rect");
Transcoder t = new PNGTranscoder();
TranscoderInput input = new TranscoderInput(new StringReader(svg));
TranscoderOutput output = new TranscoderOutput(out);
t.transcode(input, output);
} else {
log.info("Usage:\n\tParameter [svg]: The DOM Element to be converted."
+ "\n\tParameter [type]: The destination MIME type for the elment to be transcoded.");
}
out.flush();
out.close();
}

三.生成pdf

jsp中的样式最好不要过于复杂,java写样式是不太好写的

/***
*
* 导出文件生成pdf
* @author zhangjing
* @date 2015-5-14
* @param request
* @param response
* @throws Exception
* @see
*/
@RequestMapping("toShow")
public void toShow(HttpServletRequest request,HttpServletResponse response) throws Exception {

String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
response.setContentType("application/pdf;charset=utf-8");
ServletOutputStream out = response.getOutputStream();
response.addHeader("Content-Disposition", "attachment; filename=temp.pdf");
response.addHeader("Content-Type", "no-cache");

Document document = new Document();
ByteArrayOutputStream buffer = new ByteArrayOutputStream();
PdfWriter writer = PdfWriter.getInstance(document, buffer);//向pdf中写数据,不可去掉
document.open();
// 设置中文字体
BaseFont bfChinese = BaseFont.createFont("STSong-Light", "UniGB-UCS2-H",BaseFont.NOT_EMBEDDED);
// 标题字体风格
Font titleFont = new Font(bfChinese, 18, Font.BOLD);

// 标题字体风格
Font contenFont = new Font(bfChinese, 10, Font.BOLD);

Paragraph titlep = new Paragraph("运维评价",titleFont);
titlep.setAlignment(Element.ALIGN_CENTER);
document.add(titlep);

//绘制表格
Table table = new Table(2);

Cell c1 = new Cell();
Paragraph cp1 = new Paragraph("人员基本信息",contenFont);
c1.add(cp1);
c1.setColspan(2);
table.addCell(c1);

Cell c21 = new Cell();
Paragraph cp21 = new Paragraph("运维公司:5",contenFont);
c21.add(cp21);
table.addCell(c21);

Cell c22 = new Cell();
Paragraph cp22 = new Paragraph("运维人员:10",contenFont);
c22.add(cp22);
table.addCell(c22);

Cell c3 = new Cell();
Paragraph cp3 = new Paragraph("在线监测站库基本信息",contenFont);
c3.add(cp3);
c3.setColspan(2);
table.addCell(c3);

Cell c41 = new Cell();
Paragraph cp4 = new Paragraph("废水口数:5",contenFont);
c41.add(cp4);
table.addCell(c41);

Cell c42 = new Cell();
Paragraph cp42 = new Paragraph("废气口数:10",contenFont);
c42.add(cp42);
table.addCell(c42);

document.add(table);
//添加图片
Image container = Image.getInstance(basePath+"images/temp/container.png");
Image container2 = Image.getInstance(basePath+"images/temp/container2.png");
container.scalePercent(70);
container.setAlignment(Element.ALIGN_CENTER);
container2.scalePercent(70);
container2.setAlignment(Element.ALIGN_CENTER);
document.add(container);
document.add(container2);

document.close();
DataOutput output = new DataOutputStream(out);
byte[] bytes = buffer.toByteArray();
response.setContentLength(bytes.length);
for (int i = 0; i < bytes.length; i++) {
output.writeByte(bytes[i]);
}
out.flush();
out.close();
}

到此就导出为pdf了,该过程中需要的java包:

1.org.apache.batik.transcoder.jar

2.iText-2.1.7.jar-----版本不要过高,5以上版本的包名都改了,对应的iTextAsian.jar包却一直都没有,汉字输出就会有问题

3.iTextAsian.jar---iText语言支持,不加该包,汉字无法输出
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐