预览显示支持缩小放大

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

@@ -19,6 +19,16 @@
 			<span>Page: <input id="page_index" type="text" /> / <span
 				id="page_size"></span></span>
 		</div>
+		
+		<div id="toobarViewerCenter">
+			<button id="zoomOut" title="缩小">
+				<i class="fa fa-minus fa-lg" aria-hidden="true"></i>
+			</button>
+			<button id="zoomIn" title="放大">
+				<i class="fa fa-plus fa-lg" aria-hidden="true"></i>
+			</button>
+			<button id="scaleSelect">自动缩放</button>
+		</div>
 
 		<div id="toolbarViewerRight">
 			<button id="print" title="打印">

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

@@ -21,15 +21,21 @@ button {
 	height: 40px;
 	line-height: 40px;
 }
-
+#toolbarViewerLeft,#toobarViewerCenter,#toolbarViewerRight{
+	width:31%;
+	float:left;
+}
 #toolbarViewerLeft {
-	margin-left: 20px;
-	float: left;
+	margin-left: 3.5%;
+}
+
+#toobarViewerCenter {
+	text-align:center;
 }
 
 #toolbarViewerRight {
-	margin-right: 20px;
-	float: right;
+	margin-right: 3.5%;
+	text-align:right;
 }
 
 #page_index {

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

@@ -3,7 +3,7 @@ var url;
 var pdfDoc = null;
 var pageIndex = 1;
 var pageSize = 1;
-var scale = 1;
+var scale;
 var canvas = document.getElementById('the-canvas');
 var ctx = canvas.getContext('2d');
 // 隐藏的iframe，用于加载pdf，以便打印（pdf.js自带的打印有问题）
@@ -48,6 +48,22 @@ $("#page_index").keypress(function(event) {
 	}
 });
 
+// 缩小，最小至原大小的0.2倍
+$("#zoomOut").click(function() {
+	if (scale >= 0.2) {
+		scale = scale * 0.9;
+		renderPage();
+	}
+});
+
+// 放大，最大至原大小的5倍
+$("#zoomIn").click(function() {
+	if (scale <= 5) {
+		scale = scale * 1.1;
+		renderPage();
+	}
+});
+
 // 打印
 $("#print").click(function() {
 	hiddenframe.contentWindow.print();
@@ -148,23 +164,31 @@ function getDocument() {
 function renderPage() {
 	// 每个pdf只有一页
 	pdfDoc.getPage(1).then(function(page) {
+		if (!scale) {
+			autoScale(page);
+		}
 		var viewport = page.getViewport(scale);
-		var viewportWidth = viewport.width;
-		// 自动调整宽度为窗口宽度的0.75倍
-		scale = scale * 0.75 / (viewportWidth / winWidth);
-		viewport = page.getViewport(scale);
 		canvas.height = viewport.height;
 		canvas.width = viewport.width;
-
 		// Render PDF page into canvas context
 		var renderContext = {
 			canvasContext : ctx,
 			viewport : viewport
 		};
+		// 开始渲染
 		var renderTask = page.render(renderContext);
 	});
 }
 
+// 自动调整pdf显示的大小
+function autoScale(page) {
+	// 首先获取1倍大小
+	var viewport = page.getViewport(1);
+	var viewportWidth = viewport.width;
+	// 根据窗口宽度，自动调整宽度为其0.75倍
+	scale = 0.75 / (viewportWidth / winWidth);
+}
+
 // 预览前一页
 function prevPage() {
 	if (pageIndex <= 1) {