解决IE下找不到pdf.worker.js的问题；预览显示支持选择缩放级别

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

@@ -16,10 +16,10 @@
 			<button id="next" title="下页">
 				<i class="fa fa-arrow-right fa-lg" aria-hidden="true"></i>
 			</button>
-			<span>Page: <input id="page_index" type="text" /> / <span
-				id="page_size"></span></span>
+			<span>Page: <input id="pageIndex" type="text" /> / <span
+				id="pageSize"></span></span>
 		</div>
-		
+
 		<div id="toobarViewerCenter">
 			<button id="zoomOut" title="缩小">
 				<i class="fa fa-minus fa-lg" aria-hidden="true"></i>
@@ -27,27 +27,39 @@
 			<button id="zoomIn" title="放大">
 				<i class="fa fa-plus fa-lg" aria-hidden="true"></i>
 			</button>
-			<button id="scaleSelect">自动缩放</button>
+			<label class="select"> <select id="scaleSelect">
+					<option value="auto" selected="selected">自动缩放</option>
+					<option value="page_width">适合页宽</option>
+					<option value="0.5">50%</option>
+					<option value="0.75">75%</option>
+					<option value="1" title="原始宽度">100%</option>
+					<option value="1.25">125%</option>
+					<option value="1.5">150%</option>
+					<option value="2">200%</option>
+					<option value="3">300%</option>
+					<option value="4">400%</option>
+			</select>
+			</label>
 		</div>
 
 		<div id="toolbarViewerRight">
 			<button id="print" title="打印">
 				<i class="fa fa-print fa-lg" aria-hidden="true"></i>
 			</button>
-			<button id="download_pdf" title="下载PDF">
+			<button id="downloadPdf" title="下载PDF">
 				<i class="fa fa-file-pdf-o fa-lg" aria-hidden="true"></i>
 			</button>
-			<button id="download_excel_with_only_data" title="下载Excel（仅数据）">
+			<button id="downloadExcelWithOnlyData" title="下载Excel（仅数据）">
 				<i class="fa fa-file-excel-o fa-lg" aria-hidden="true"></i>
 			</button>
 		</div>
 	</div>
 
 	<div id="viewerContainer">
-		<canvas id="the-canvas"></canvas>
+		<canvas id="theCanvas"></canvas>
 	</div>
 
-	<iframe id="hiddenframe" hidden='true'></iframe>
+	<iframe id="hiddenFrame" hidden='true'></iframe>
 </body>
 
 <script src="static/lib/pdf.js/build/pdf.js"></script>

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

@@ -4,7 +4,7 @@ body {
 	font-family: courier;
 }
 
-button, #toolbarContainer {
+button, .select, #toolbarContainer, #scaleSelect {
 	background-color: #404040;
 	color: #fff;
 }
@@ -21,29 +21,66 @@ button {
 	height: 40px;
 	line-height: 40px;
 }
-#toolbarViewerLeft,#toobarViewerCenter,#toolbarViewerRight{
-	width:31%;
-	float:left;
+
+#toolbarViewerLeft, #toobarViewerCenter, #toolbarViewerRight {
+	width: 31%;
+	float: left;
 }
+
 #toolbarViewerLeft {
 	margin-left: 3.5%;
 }
 
 #toobarViewerCenter {
-	text-align:center;
+	text-align: center;
 }
 
 #toolbarViewerRight {
 	margin-right: 3.5%;
-	text-align:right;
+	text-align: right;
 }
 
-#page_index {
-	width: 40px;
+#pageIndex {
+	width: 50px;
+	height: 20px;
 	border: 0;
+	border-radius: 10%;
 	text-align: center;
 	background-color: #606060;
 	color: #fff;
+	border: 0;
+}
+
+select {
+	border: solid 1px #888;
+	border-radius: 10%;
+	padding: 0px 30px 0px 10px;
+	height: 25px;
+	font-family: microsoft yahei ui;
+	/*清除默认的样式*/
+	appearance: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+}
+
+.select {
+	position: relative;
+	overflow: hidden;
+}
+
+.select:before {
+	/*使用FontAwesome图标作为背景*/
+	font-family: FontAwesome;
+	font-size: 10px;
+	content: "\f0dc";
+	position: absolute;
+	right: 10px;
+	pointer-events: none;
+}
+
+/*清除IE的选择框样式：隐藏下拉箭头*/
+select::-ms-expand {
+	display: none;
 }
 
 #viewerContainer {

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

@@ -1,13 +1,16 @@
-//pdf文件的路径
+//IE下找不到pdf.worker.js，需要手动赋值
+PDFJS.workerSrc = 'static/lib/pdf.js/build/pdf.worker.js';
+
+// pdf文件的路径
 var url;
 var pdfDoc = null;
 var pageIndex = 1;
 var pageSize = 1;
 var scale;
-var canvas = document.getElementById('the-canvas');
+var canvas = document.getElementById('theCanvas');
 var ctx = canvas.getContext('2d');
 // 隐藏的iframe，用于加载pdf，以便打印（pdf.js自带的打印有问题）
-var hiddenframe = document.getElementById("hiddenframe");
+var hiddenframe = document.getElementById("hiddenFrame");
 var winHeight;
 var winWidth;
 
@@ -29,10 +32,10 @@ $("#prev").click(prevPage);
 $("#next").click(nextPage);
 
 // 手动输入页码
-$("#page_index").keypress(function(event) {
+$("#pageIndex").keypress(function(event) {
 	// 按Enter键
 	if (event.keyCode == 13) {
-		var value = document.getElementById("page_index").value;
+		var value = document.getElementById("pageIndex").value;
 		// 以非0开头的整数
 		var regExp = /^([1-9]+\d*)$/;
 		if (regExp.test(value) && value >= 1 && value <= pageSize) {
@@ -43,39 +46,45 @@ $("#page_index").keypress(function(event) {
 			pageIndex = value;
 			getDocument();
 		} else {
-			document.getElementById("page_index").value = pageIndex;
+			document.getElementById("pageIndex").value = pageIndex;
 		}
 	}
 });
 
-// 缩小，最小至原大小的0.2倍
+// 缩小，最小不小于原大小的0.2/1.2倍
 $("#zoomOut").click(function() {
 	if (scale >= 0.2) {
-		scale = scale * 0.9;
+		scale = scale / 1.2;
 		renderPage();
 	}
 });
 
-// 放大，最大至原大小的5倍
+// 放大，最大不大于原大小的5*1.2倍
 $("#zoomIn").click(function() {
 	if (scale <= 5) {
-		scale = scale * 1.1;
+		scale = scale * 1.2;
 		renderPage();
 	}
 });
 
+// 选择缩放倍数
+$("#scaleSelect").change(function() {
+	scale = this.value;
+	renderPage();
+});
+
 // 打印
 $("#print").click(function() {
 	hiddenframe.contentWindow.print();
 });
 
 // 下载pdf
-$("#download_pdf").click(function() {
+$("#downloadPdf").click(function() {
 	window.location = downloadUrl("pdf");
 });
 
 // 下载纯数据excel
-$("#download_excel_with_only_data").click(function() {
+$("#downloadExcelWithOnlyData").click(function() {
 	window.location = downloadUrl("xls_with_only_data");
 });
 
@@ -131,13 +140,13 @@ function loadPdfData() {
 			// 获取所对应的分页的pdf文件路径
 			url = pdfPath.replace(".pdf", "_" + pageIndex + ".pdf");
 			pageSize = data.pageSize;
-			document.getElementById('page_size').textContent = pageSize;
+			document.getElementById('pageSize').textContent = pageSize;
 			document.title = getParameter("reportName");
 			getDocument();
 		},
 		error : function(XMLHttpRequest) {
 			var viewerContainer = document.getElementById("viewerContainer");
-			viewerContainer.removeChild(document.getElementById("the-canvas"));
+			viewerContainer.removeChild(document.getElementById("theCanvas"));
 			var p = document.createElement("p");
 			p.style.color = "#fff";
 			p.style.textAlign = "left";
@@ -153,7 +162,7 @@ function loadPdfData() {
 function getDocument() {
 	PDFJS.getDocument(url).then(function(pdfDoc_) {
 		// 更新页码
-		document.getElementById('page_index').value = pageIndex;
+		document.getElementById('pageIndex').value = pageIndex;
 		pdfDoc = pdfDoc_;
 		// Initial/first page rendering
 		renderPage();
@@ -164,9 +173,14 @@ function getDocument() {
 function renderPage() {
 	// 每个pdf只有一页
 	pdfDoc.getPage(1).then(function(page) {
-		if (!scale) {
-			autoScale(page);
+		if (!scale || scale == "auto") {
+			// 调整为适合的宽度
+			scale = getScale(page, 0.75);
+		} else if (scale == "page_width") {
+			// 调整pdf显示的宽度接近窗口宽度
+			scale = getScale(page, 0.95);
 		}
+		console.log(scale);
 		var viewport = page.getViewport(scale);
 		canvas.height = viewport.height;
 		canvas.width = viewport.width;
@@ -180,13 +194,18 @@ function renderPage() {
 	});
 }
 
-// 自动调整pdf显示的大小
-function autoScale(page) {
-	// 首先获取1倍大小
-	var viewport = page.getViewport(1);
-	var viewportWidth = viewport.width;
-	// 根据窗口宽度，自动调整宽度为其0.75倍
-	scale = 0.75 / (viewportWidth / winWidth);
+/**
+ * 调整pdf显示的宽度为窗口宽度的multipleOfWindowWidth倍
+ * 
+ * @param page
+ *            pdf数据
+ * @param multipleOfWindowWidth
+ *            窗口宽度的倍数
+ */
+function getScale(page, multipleOfWindowWidth) {
+	// 首先获取pdf原始宽度
+	var viewportWidth = page.getViewport(1).width;
+	return multipleOfWindowWidth / (viewportWidth / winWidth);
 }
 
 // 预览前一页