sailun-agent/script/js/pdf_plugins.js

(function(window){
	var canvasPdf = {};
  //创建canvas元素
		function createPdfContainer(id, className,el) {
			var pdfContainer = document.getElementById('canvas');
			var canvasNew = document.createElement('canvas');
			canvasNew.id = id;
			canvasNew.className = className;
			pdfContainer.appendChild(canvasNew);
		};
    //建议给定pdf宽度
		function renderPDF(pdf, i, id,canvasWidth,canvasHeight) {
			pdf.getPage(i).then(function (page) {
				var scale =0.5; //scale的值是canvas的渲染尺寸，影响清晰度

				var viewport = page.getViewport({
					scale: scale
				});

				//  准备用于渲染的 canvas 元素
				var canvas = document.getElementById(id);
				var context = canvas.getContext('2d');
				canvas.width = canvasWidth;
				canvas.height = canvasHeight;
				// 将 PDF 页面渲染到 canvas 上下文中
				var renderContext = {
					canvasContext: context,
					viewport: viewport
				};
				page.render(renderContext);
			});
		};

		//创建和pdf页数等同的canvas数
		function createSeriesCanvas(num, template) {
			var id = '';
			for (var j = 1; j <= num; j++) {
				id = template + j;
				createPdfContainer(id, 'pdfClass');
			}
		}
		//读取pdf文件，并加载到页面中
		canvasPdf.loadPDF = function LoadPDF(fileURL,canvasWidth,canvasHeight) {
			pdfjsLib.getDocument(fileURL).promise.then(function (pdf) {
				//用 promise 获取页面
				var id = '';
				var idTemplate = 'cw-pdf-';
				var pageNum = pdf.numPages; //pdf文件总页数
				//根据页码创建画布
				createSeriesCanvas(1, idTemplate);//pageNum
				// $("#pdf-canvas canvas").css("width", "100%"); //canvas展示宽度
				//将pdf渲染到画布上去
				for (var i = 1; i <= 1; i++) {
					id = idTemplate + i;
					renderPDF(pdf, i, id,canvasWidth,canvasHeight);
				}
			});
		}

	window.$canvasPdf = canvasPdf;
})(window);