1,在官網下載需要的插件與編輯器:
2、需要注意的是:
銳浪Grid++Report報表插件不能運行在64位瀏覽器中,相關報表與打印功能將無法正常運新,請改用32位瀏覽器(官網給出的說明)
3、根據官網給出的demo設計以下調用的流程:
1、需要使用的頁面拼接需具體打印信息的url(包括模板名稱,標題,請求具體數據url的地址)
2、具體打印頁面接收對應的參數數據,然後顯示對應的打印頁面
4、具體代碼
頁面調用js:
比如(http://localhost:8080/test/PrintReport.jsp?title=%E6%89%93%E5%8D%B0%E8%8D%89%E5%8D%95
&report=TsCD8.grf&data=http%3a%2f%2flocalhost%3a8080%2ftest%2fservlet%2fGetData%3fid%3d100)
/*
*將需要打印數據地址拼接,並跳轉到對應打印頁面
*Title:打印頁面標題
*ReportURL:報表模板名稱
*DataURL:ajax返回具體數據地址
*/
var printFunction = function (Title, ReportURL, DataURL) {
//具體需要跳轉的地址
var printURL = "http://localhost:8080/test/"
+ "PrintReport.jsp?title=" + encodeURIComponent(Title)
+ "&report=" + encodeURIComponent(ReportURL)
+ "&data=" + encodeURIComponent(DataURL);
//再新窗口打開這個打印頁面
window.open(printURL, '_blank');
}
打印頁面:PrintReport.jsp
<%@ page contentType="text/html; charset=utf-8"%>
<%@ page import="java.net.URLDecoder"%>
<html>
<head>
<title>報表打印 - <%=URLDecoder.decode(request.getParameter("title"), "UTF-8")%></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="js/CreateControl.js" type="text/javascript"></script>
<style type="text/css">
html,body {
margin:0;
height:100%;
}
</style>
</head>
<body style="margin:0">
<script type="text/javascript">
var Report = "<%=request.getParameter("report")%>";
if (Report == "null")
Report = "";
else if (Report != "")
Report = "grf/" + Report;//具體放置模板文件的地址
var Data = "<%=request.getParameter("data")%>";
if (Data == "null")
Data = "";
else if (Data != "")
Data = Data;
//生成打印頁面
CreatePrintViewerEx("100%", "100%", Report, Data, true, "");
</script>
</body>
</html>
ajax返回數據格式:
5、打印頁面結果:
6、總結:
1、因爲使用了打印頁面是跳轉的新頁面的形式,打印前打判斷可以在調用js跳轉方法前實現。
2、具體打印頁面也可以不使用jsp來實現,可以使用html頁面來實現,然後使用js來獲取對應傳過來的url參數也是可行的
3、具體返回打ajax格式需要根據模板設計的不同來格式會有所改變
4、具體的模板繪製方法請參考官方教程