代码实现
<!DOCTYPE html> <html> <head> <title>kiamo自定义渲染pdf页demo</title> </head> <body> <input type="file" onchange='handelChange(this)'/> <canvas id="canvas"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.min.js"></script> <script> function handelChange (e) { console.log(e.files) var file = new File(e.files, "kaimo"); var reader = new FileReader(); // readAsDataURL方法可以将读取到的文件编码成DataURL ，可以将资料(例如图片、excel文件)内嵌在网页之中，不用放到外部文件 reader.readAsDataURL(file); console.log(reader) // FileReader 提供一个完整的事件模型，用来捕获读取文件的状态 // onload:文件读取成功时触发 reader.onload = function () { // base64格式PDF console.log(reader.result); // data:application/octet-stream;base64, 长度37 var base64Str = reader.result.substring(37); renderPdf(base64Str); }; // onerror:读取文件错误时触发 reader.onerror = function (error) { console.log('Error: ', error); }; } function renderPdf(base64Str) { var pdfjsLib = window['pdfjs-dist/build/pdf']; // Base64是一组类似的二进制到文本(binary-to-text)的编码规则，使得二进制数据在解释成radix-64的表现形式后可以用ASCII字符串的格式表示出来。Base64编码将数据转为“安全字符”用于传输，编码会使内容变长1/3。 // atob() 对经过 base-64 编码的字符串进行解码。 // btoa() 方法可以将一个二进制字符串（例如，将字符串中的每一个字节都视为一个二进制数据字节）编码为 Base64 编码的 ASCII 字符串。 var pdfData = atob(base64Str); // GlobalWorkerOptions pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.min.js'; // 异步下载pdf var loadingTask = pdfjsLib.getDocument({ data: pdfData }); // 加载pdf loadingTask.promise.then(function(pdf) { console.log('PDF loaded'); // 定义的pdf页面：这里使用第一页进行测试 var pageNumber = 1; // 调用getPage方法获取对应的页面 pdf.getPage(pageNumber).then(function(page) { // 倍数 var scale = 1.5; // 展示的倍数：用于修改 viewer.html 的倍数 var viewport = page.getViewport({scale: scale}); // 使用 canvas 绘制 var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; // 内容 var renderContext = { canvasContext: context, viewport: viewport }; // 渲染 var renderTask = page.render(renderContext); renderTask.promise.then(function () { console.log('渲染完毕'); }); }); }, function(error){ // pdf加载错误 console.error('loading error', error); }) } </script> </body> </html>
实现的效果
我们选择文件，然后确定，这里我选了一个比较大的文件
然后等待一下，就会渲染完毕：
注意：这里只会展示一页。上一页下一页的功能可以自己拓展，另外也可以考虑使用 pdf.js 的预览页面通过 file 传递 blob 地址预览，这种自带额外工具栏，可以下载，翻页等。不过这就需要你把 base64 的数据转为 blob 的地址，还需要依赖 pdf.js 的预览页。
