起因
最近，笔者接到一个需求，需要在前端把PDF转成图片，再把图片转成Base64，传给小程序。然后发现，只有PDF.js这个库，才能满足我们的需求。
核心代码
renderPage(url) { return new Promise((resolve, reject) => { const loadingTask = pdfjsLib.getDocument(url); loadingTask.promise.then((pdf) => { const pages = pdf.numPages; // 添加canvas, 根据pdf的页数添加 for (let i = 1; i <= pages; i++) { const canvas = document.createElement('canvas'); const showPdf = document.getElementById('show-pdf'); canvas.setAttribute('id', 'canvas' + i.toString()); showPdf.appendChild(canvas); } let count = 0; for (let i = 1; i <= pages; i++) { pdf.getPage(i).then((page) => { const viewport = page.getViewport({ scale: 1.5 }); const canvas = document.getElementById(('canvas' + i).toString()); const context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; const renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext) }); } }); }); } // 推送 push(record) { this.renderPage(record.url).then(() => { const canvas = document.querySelectorAll('#show-pdf > canvas'); let datas = []; for(let i = 0; i < canvas.length; i++) { datas.push(canvas[i].toDataURL("image/png")); } }); }
这段代码写完之后，调试，发现获取出来的Base64，无法还原图片。才疏学浅，死活找不到原因。找了好久，终于看到一篇文章，要看全文，还得关注公众号，获取二维码解锁。emmm，然后，我就解锁了。看到最最关键的两行代码，抱着试试的心态，写上。
居然成功了！！！
然后，反思我的代码哪里不对，几次尝试之后，找到问题了，page.render 绘制有延迟。。。把page.render代码修改如下。
page.render(renderContext).promise.then(() => { count++; // 已全部完成绘制 if(count == pages) { resolve(); } });
大功告成，完美解决。
