如何前端显示pdf的base64文件 · php7进阶到架构师

## 如何前端显示pdf的base64文件？后台返回pdf的base64字段，可以用pdf.js展示，完整代码如下，文末附上完整可以运行代码包 ``` <!DOCTYPE html> <html lang="en-GB"> <head> <meta http-equiv="Content-Type" content="application/x-javascript; charset=utf-8"/> <script src="http://libs.baidu.com/jquery/1.5.2/jquery.min.js"></script> <script src="pdf.js"></script> <script src="pdf.worker.js"></script> <script> //PDF.js插件定义的对象，给定pdf文件的URL或者一个Uint8Array数组，调用PDFJS.getDocument()可以获取 var pdfDoc = null; //缩放比例 var scale = 1.5; //pdf文件的总页数 var count = 1; $(document).ready(function() { var data = char2buf(window.atob($("#pdfCache").text())); PDFJS.getDocument(data).then(function(pdfDoc_) { pdfDoc = pdfDoc_; count = pdfDoc.numPages; //绘制所有的页面 renderAll(); }); }); function renderAll(){ for(var curPage=1;curPage<=count;curPage++){ //新建一个<canvas>用于，并将对应页面的内容绘制到这个canvas上 var canvas = document.createElement("canvas"); var div = document.createElement("div"); $(div).attr("id","page"+curPage); $(div).attr("class","page"); $(div).append(canvas); $("#pdfContainer").append(div); renderPage(curPage,canvas); } } function renderPage(num,canvas) { // Using promise to fetch the page pdfDoc.getPage(num).then(function(page) { var ctx = canvas.getContext('2d'); 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); // Wait for rendering to finish renderTask.promise.then(function() { //这是每次绘制一页内容之后的回调函数 console.log("Page"+num+" rendered"); }); }); } function zoomOut(){ scale+=0.4; $("#pdfContainer").empty(); renderAll(); } function zoomIn(){ scale-=0.4; $("#pdfContainer").empty(); renderAll(); } /*string -> Unit8Array*/ function char2buf(str){ var out = new ArrayBuffer(str.length); var u16a= new Uint8Array(out); var strs = str.split(""); for(var i =0 ; i<strs.length;i++){ u16a[i]=strs[i].charCodeAt(); } return u16a; } </script> <title>LoadPDF_fromArrayBuffer</title> </head> <body> <div> <button onclick="zoomOut()">放大</button> <button onclick="zoomIn()">缩小</button> </div> <div id="pdfContainer"></div> <div id=pdfCache style=display:none;>------这里是pdf的base64码，如JVBERi0xLjcKJcKzx9gNCjEgxxxxxxx-------  </div> </body> </html> ``` ## 完整可运行代码包链接：https://pan.baidu.com/s/1Q-l06Ys8gfkXqhdrkWfoNw 提取码：3g0f