1、前端需要引入pdf.js、pdf.worker.js
/** * 预览pdf文件 * pop 用于显示pdf文件的jquery对象 * workerSrc pdf.worker.js相对于调用showPdf方法文件的路径 * 如：../../../lib/pdf/pdf.worker.js * data pdf的base64数据 */ pageNS.showPdf = function(pop,data,workerSrc) { debugger; $(pop).empty(); var url = convertDataURIToBinary(data); PDFJS.workerSrc = workerSrc; PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf){ pages = pdf.numPages; for(var i = 1; i <= pdf.numPages; i++){ var id = 'page-id-' + i; $(pop).append('<canvas id="' + id + '"></canvas>'); showAll(url,i,id); } }); } var showAll = function(url,page,id){ PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf){ pdf.getPage(page).then(function getPageHelloWorld(page){ var scale = 1; var viewport = page.getViewport(scale); var canvas = document.getElementById(id); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext:context, viewport:viewport }; page.render(renderContext); }); }); }; var convertDataURIToBinary = function(dataURI) { //将encodeBase64解码 dataURI = dataURI.replace(/[\r\n]/g,''); var raw = window.atob(dataURI); var rawLength = raw.length; //转换成pdf.js能直接解析的Uint8Array类型,见pdf.js-4068 var array = new Uint8Array(new ArrayBuffer(rawLength)); for(i = 0; i < rawLength; i++) { array[i] = raw.charCodeAt(i)&0xff; } return array; }; 2、后端从ftp上获取PDF文件并将其转换成base64数据传给前台
