report-parent/src/main/webapp/resources/js/preview/app.js

//IE下找不到pdf.worker.js，需要手动赋值
PDFJS.workerSrc = 'resources/lib/pdf.js/build/pdf.worker.js';

var canvas = document.getElementById('theCanvas');
var ctx = canvas.getContext('2d');
// 隐藏的iframe，用于加载pdf，以便打印（pdf.js自带的打印有问题）
var hiddenFrame = document.getElementById("hiddenFrame");
// 用于显示正在加载的提示
var spinner;
var spinnerContainer = document.getElementById('viewerContainer');
var pdfDoc;
// 页码
var pageIndex = 1;
// 总页数
var pageSize;
// 预览的pdf的缩放级别（为pdf原大小的倍数）
var scale;
// 浏览器窗口高度
var winHeight;
// 浏览器窗口宽度
var winWidth;
// 将要打印的pdf相对路径
var pdfPath;
// 参数打印类型，可能为PRINT、PREVIEW
var printType = getParameter("printType");
// 是否正在渲染页面
var rendering = false;
// 下一个要渲染的页面
var nextRenderingPage;

var titleJson = {
	"Purchase" : "采购订单",
	"PurchaseIn" : "采购验收单",
	"PurchaseOut" : "采购验退单",
	"OtherIn" : "其它入库单",
	"OtherOut" : "其它出库单",
	"Sale" : "销售订单",
	"SaleOut" : "出货单",
	"SaleIn" : "销售退货单",
	"PayBalance" : "付款单",
	"OthReceipts" : "其它收入单",
	"OthSpendings" : "其它支出单",
	"Verification" : "核销单"
};

var title = titleJson[getParameter("reportName")];
document.title = title ? title : getParameter("reportName");

getWindowWidth();
loadData();

// 缩小，最小不小于原大小的0.2/1.2倍
$("#zoomOut").click(function() {
	if (scale >= 0.2) {
		scale = scale / 1.2;
		changeTextOfSelectScale();
		renderPage(pageIndex);
	}
});

// 放大，最大不大于原大小的5*1.2倍
$("#zoomIn").click(function() {
	if (scale <= 5) {
		scale = scale * 1.2;
		changeTextOfSelectScale();
		renderPage(pageIndex);
	}
});

// 选择缩放倍数
$("#scaleSelect").change(function() {
	scale = this.value;
	renderPage(pageIndex);
});

// 上页
$("#prev").click(prevPage);

// 下页
$("#next").click(nextPage);

// 手动输入页码
$("#pageIndex").keypress(function(event) {
	if (!pdfDoc) {
		return;
	}
	// 按Enter键
	if (event.keyCode == 13) {
		var value = document.getElementById("pageIndex").value;
		// 整数
		var regExp = /^-*\d+$/;
		if (regExp.test(value)) {
			value = parseInt(value);
			if (value < 1) {
				value = 1;
			}
			if (value > pageSize) {
				value = pageSize;
			}
			if (value == pageIndex) {
				// 此时输入值可能是在前面修改的，所以要清除输入
				document.getElementById("pageIndex").value = pageIndex;
				return;
			}
			pageIndex = value;
			renderPage(pageIndex);
		} else {
			// 输入不合法，需要清除输入
			document.getElementById("pageIndex").value = pageIndex;
		}
	}
});

// 打印
$("#print").click(function() {
	if (!pdfDoc) {
		return;
	}
	printPdf();
});

// 下载pdf
$("#downloadPdf").click(function() {
	if (!pdfDoc) {
		return;
	}
	window.open(downloadUrl("pdf"));
});

// 下载word
$("#downloadWord").click(function() {
	if (!pdfDoc) {
		return;
	}
	window.open(downloadUrl("doc"));
});

// 下载excel
$("#downloadExcel").click(function() {
	if (!pdfDoc) {
		return;
	}
	window.open(downloadUrl("xls"));
});

// 下载纯数据excel
$("#downloadExcelData").click(function() {
	if (!pdfDoc) {
		return;
	}
	window.open(downloadUrl("xls_data"));
});

// 键盘左右键进行翻页
$("body").keydown(function(event) {
	// 如果在选中input输入框或select下拉列表时按左右键，不进行翻页
	var activeElementNodeName = document.activeElement.nodeName.toLowerCase();
	if (activeElementNodeName == "input" || activeElementNodeName == "select") {
		return;
	}
	if (event.keyCode == 37) {// left
		prevPage();
	} else if (event.keyCode == 39) {// right
		nextPage();
	}
});

/**
 * 获取窗口宽度
 */
function getWindowWidth() {
	if (window.innerWidth)
		winWidth = window.innerWidth;
	else if ((document.body) && (document.body.clientWidth))
		winWidth = document.body.clientWidth;
	// 获取窗口高度
	if (window.innerHeight)
		winHeight = window.innerHeight;
	else if ((document.body) && (document.body.clientHeight))
		winHeight = document.body.clientHeight;
	// 通过深入 Document 内部对 body 进行检测，获取窗口大小
	if (document.documentElement && document.documentElement.clientHeight
			&& document.documentElement.clientWidth) {
		winHeight = document.documentElement.clientHeight;
		winWidth = document.documentElement.clientWidth;
	}
}

/**
 * 发送请求，服务器端进行填充报表、生成pdf文件等操作
 */
function loadData() {
	spinner = showLoading(spinner, spinnerContainer);
	var loadPdfDataUrl = "print/pdfPath" + window.location.search
			+ "&flush=true";
	$.ajax({
		type : "get",
		async : true,
		url : loadPdfDataUrl,
		success : function(path) {
			pdfPath = path;
			hiddenFrame.src = pdfPath;
			PDFJS.getDocument(pdfPath).then(function(pdfDoc_) {
				pdfDoc = pdfDoc_;
				pageSize = pdfDoc.numPages;
				document.getElementById('pageSize').textContent = pageSize;
				renderPage(pageIndex);
				if (printType == "PRINT") {
					setTimeout("printPdf()", 1000);
				}
			});
		},
		error : function(XMLHttpRequest) {
			showError(XMLHttpRequest);
		}
	});
};

/**
 * Get page info from document, resize canvas accordingly, and render page
 */
function renderPage(pageIndex) {
	if (rendering) {
		nextRenderingPage = pageIndex;
		return;
	}
	rendering = true;
	// 更新页码
	document.getElementById("pageIndex").value = pageIndex;
	spinner = hideLoading(spinner);
	if (!pdfDoc) {
		return;
	}
	if (printType == "PRINT") {
		spinner = showLoading(spinner, spinnerContainer);
	}
	pdfDoc.getPage(pageIndex).then(function(page) {
		if (!scale || scale == "auto") {
			// 调整为适合的宽度
			scale = getScale(page, 0.75);
		} else if (scale == "page_width") {
			// 调整pdf显示的宽度接近窗口宽度
			scale = getScale(page, 0.95);
		}
		var 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);
		renderTask.promise.then(function() {
			rendering = false;
			if (nextRenderingPage) {
				pageIndex = nextRenderingPage;
				renderPage(pageIndex);
				nextRenderingPage = undefined;
			}
		});
	});
}

/**
 * 获取缩放级别（将pdf显示的宽度调整为窗口宽度的multipleOfWindowWidth倍，获取该情况下pdf宽度为原宽度的倍数）
 * 
 * @param page
 *            pdf数据
 * @param multipleOfWindowWidth
 *            窗口宽度的倍数
 * @returns {Number} 缩放级别（pdf原宽度的倍数）
 */
function getScale(page, multipleOfWindowWidth) {
	// 首先获取pdf原始宽度
	var viewportWidth = page.getViewport(1).width;
	return multipleOfWindowWidth / (viewportWidth / winWidth);
}

/**
 * 修改缩放下拉框所显示的内容
 */
function changeTextOfSelectScale() {
	var hiddenOption = document.getElementById("hiddenOption");
	hiddenOption.removeAttribute("hidden");
	hiddenOption.text = (scale * 100).toFixed() + "%";
	hiddenOption.selected = true;
	hiddenOption.hidden = true;
}

/**
 * 预览前一页
 */
function prevPage() {
	// 验证pdfDoc不存在，是为了避免报表出现编译失败等问题时，仍然试图翻页
	if (!pdfDoc || pageIndex <= 1) {
		return;
	}
	pageIndex--;
	renderPage(pageIndex);
}

/**
 * 预览后一页
 */
function nextPage() {
	if (!pdfDoc || pageIndex >= pageSize) {
		return;
	}
	pageIndex++;
	renderPage(pageIndex);
}

/**
 * 打印
 */
function printPdf() {
	spinner = hideLoading(spinner);
	if (!pdfDoc) {
		return;
	}
	spinner = showLoading(spinner, spinnerContainer);
	checkBrowser();
	setTimeout(
			"hiddenFrame.contentWindow.print();spinner = hideLoading(spinner)",
			1000);
}

/**
 * 下载报表
 * 
 * @param exportFileType
 *            导出文件的格式
 * @returns {String} 下载链接
 */
function downloadUrl(exportFileType) {
	var downloadUrl = "print/export" + window.location.search;
	exportFileType = exportFileType || "pdf";
	// 导出文件的格式
	downloadUrl += "&exportFileType=" + exportFileType + "&flush=true";
	return downloadUrl;
}

/**
 * 检查浏览器并提示
 */
function checkBrowser() {
	var userAgent = navigator.userAgent;
	console.log(userAgent);
	if (userAgent.indexOf("Chrome") == -1 || userAgent.indexOf("Edge") !== -1) {
		alert(spinnerContainer, "建议使用最新版Chrome浏览器打印");
	}
}

/**
 * 展示错误信息
 * 
 * @param XMLHttpRequest
 */
function showError(XMLHttpRequest) {
	$("#theCanvas").remove();
	spinner = hideLoading(spinner);
	$("#errorMessageContainer").removeAttr("hidden");
	var result = JSON.parse(XMLHttpRequest.responseText);
	var message = result.message;
	$("#message").html(message);
	var detailedMessage = result.detailedMessage;
	if (detailedMessage) {
		// 处理后台传输的自定义的换行标志
		detailedMessage = detailedMessage.replace(/\n/g, '<br/>').replace(
				/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;');
		$("#detailedMessageButton").removeAttr("hidden");
		$("#detailedMessage").html(detailedMessage);
	}
	function hiddenDetailMessage() {
		$("#detailedMessage").attr("hidden", "true");
		$("#detailedMessageButton").html("展开");
		$("#detailedMessageButton").unbind();
		$("#detailedMessageButton").click(showDetailMessage);
	}
	function showDetailMessage() {
		$("#detailedMessage").removeAttr("hidden");
		$("#detailedMessageButton").html("收起");
		$("#detailedMessageButton").unbind();
		$("#detailedMessageButton").click(hiddenDetailMessage);
	}
	hiddenDetailMessage();
}