重写预览页面的翻页、打印、下载

src/main/webapp/WEB-INF/views/preview2.html

@@ -11,27 +11,31 @@
 
 	<div id="toolbarContainer">
 		<div id="toolbarViewerLeft">
-			<button id="prev">Previous</button>
-			<button id="next">Next</button>
-			&nbsp; &nbsp; <span>Page: <span id="page_index"></span> / <span
+			<button id="prev" title="上页">
+				<i class="fa fa-arrow-left fa-lg" aria-hidden="true"></i>
+			</button>
+			<button id="next" title="下页">
+				<i class="fa fa-arrow-right fa-lg" aria-hidden="true"></i>
+			</button>
+			<span>Page: <span id="page_index"></span> / <span
 				id="page_size"></span></span>
 		</div>
 
 
 		<div id="toolbarViewerRight">
-			<button id="download_pdf" class="toolbarButton hiddenMediumView"
-				title="下载PDF" tabindex="35">
-				<i class="fa fa-file-pdf-o fa-lg"></i>
+			<button id="print" title="打印" tabindex="1">
+				<i class="fa fa-print fa-lg" aria-hidden="true"></i>
+			</button>
+			<button id="download_pdf" title="下载PDF" tabindex="2">
+				<i class="fa fa-file-pdf-o fa-lg" aria-hidden="true"></i>
 			</button>
-			<div class="splitToolbarButtonSeparator"></div>
-			<button id="download_excel" class="toolbarButton hiddenMediumView"
-				title="下载Excel" tabindex="36" hidden="true">
-				<i class="fa fa-file-excel-o fa-lg"></i>
+			<button id="download_excel" title="下载Excel" tabindex="3"
+				hidden="true">
+				<i class="fa fa-file-excel-o fa-lg" aria-hidden="true"></i>
 			</button>
-			<button id="download_excel_with_only_data"
-				class="toolbarButton hiddenMediumView" title="下载Excel（仅数据）"
-				tabindex="37">
-				<i class="fa fa-file-excel-o fa-lg"></i>
+			<button id="download_excel_with_only_data" title="下载Excel（仅数据）"
+				tabindex="4">
+				<i class="fa fa-file-excel-o fa-lg" aria-hidden="true"></i>
 			</button>
 		</div>
 	</div>

src/main/webapp/resources/css/preview2.css

@@ -1,6 +1,6 @@
 body {
-	background-color: #404040;
-	height: 32px;
+	background-color: #474747;
+	font-family: courier;
 }
 
 button {
@@ -10,17 +10,10 @@ button {
 	cursor: pointer;
 }
 
-#viewerContainer {
-	position: relative;
-	top: 34px;
-	margin: 2px;
-}
-
 #toolbarContainer {
 	width: 100%;
 	background-color: #fff;
 	color: #fff;
-	cursor: default;
 }
 
 #toolbarViewerLeft {
@@ -33,11 +26,8 @@ button {
 	float: right;
 }
 
-.splitToolbarButtonSeparator {
-  padding: 8px 0;
-  width: 1px;
-  background-color: hsla(0,0%,0%,.5);
-  box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
-  display: inline-block;
-  margin: -5px 0;
+#viewerContainer {
+	position: relative;
+	top: 34px;
+	margin: 2px;
 }

src/main/webapp/resources/js/preview2/app.js

@@ -34,6 +34,25 @@ $("#next").click(function() {
 	getDocument();
 });
 
+// 打印
+$("#print").click(function() {
+	if (hiddenframe.src) {
+		hiddenframe.contentWindow.print();
+	} else {
+		window.document.write("Hidden pdf iframe did not load");
+	}
+});
+
+// 下载pdf
+$("#download_pdf").click(function() {
+	window.location = downloadUrl("pdf");
+});
+
+// 下载纯数据excel
+$("#download_excel_with_only_data").click(function() {
+	window.location = downloadUrl("xls_with_only_data");
+});
+
 // 获取窗口宽度
 function getWindowWidth() {
 	if (window.innerWidth)
@@ -92,8 +111,8 @@ function renderPage() {
 	pdfDoc.getPage(1).then(function(page) {
 		var viewport = page.getViewport(scale);
 		var viewportWidth = viewport.width;
-		// 自动调整宽度为窗口宽度的0.8倍
-		scale = scale * 0.8 / (viewportWidth / winWidth);
+		// 自动调整宽度为窗口宽度的0.75倍
+		scale = scale * 0.75 / (viewportWidth / winWidth);
 		viewport = page.getViewport(scale);
 		canvas.height = viewport.height;
 		canvas.width = viewport.width;