PDF转图片,在线PDF转JPG/PNG

匿名 (未验证) 提交于 2019-12-02 23:56:01

使用pdf.js预览图片,pdf.js将pdf通过canvas将每一页渲染出来,然后我们通过canvas的toDataURL方法保存为jpg或png格式。
pdf.js是Mozilla开源的一个js库,无需任何本地支持就可以在浏览器上显示pdf文档。唯一的要求就是浏览器必须支持HTML5。

需要pdf.min.jspdf.worker.min.js两个js文件

 pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.bootcss.com/pdf.js/2.2.228/pdf.worker.min.js';      const preview = document.getElementById('preview');     const page_num = document.getElementById('page_num');     const out_type = document.getElementById('out_type');      let pdfFile, pdf, pageNum, context = preview.getContext('2d');      out_type.querySelectorAll('.button').forEach(function (btn) {         btn.onclick = function () {             out_type.querySelector('.primary').classList.remove('primary');             btn.classList.add('primary');         }     });      // 加载PDF文件     function loadPDF(file) {         pdfFile = file;         file_name.innerHTML = file.name;          let reader = new FileReader();         reader.onload = (e) => showPDF(e.target.result);         reader.readAsDataURL(file);     }      // 预览PDF     function showPDF(url) {         let loadingTask = pdfjsLib.getDocument(url);         loadingTask.promise.then(function (doc) {             pdf = doc;             pageNum = 1;             preview.hidden = false;             readerPage()         }, function (reason) {             alert(reason)         });     }      // 预览上一页     function prevPage() {         if (pageNum <= 1) {             return;         }         pageNum--;         readerPage()     }      //预览下一页     function nextPage() {         if (pageNum >= pdf.numPages) {             return;         }         pageNum++;         readerPage()     }          //渲染页面     function readerPage(callback) {         pdf.getPage(pageNum).then(function (page) {             let scale = 1.5;             let viewport = page.getViewport({scale: scale});              preview.height = viewport.height;             preview.width = viewport.width;              let renderContext = {                 canvasContext: context,                 viewport: viewport             };             page.render(renderContext).promise.then(callback);         });         page_num.innerText = `页码 : ${pageNum} / ${pdf.numPages}`;     }      // 保存当前页     function save() {         let a = document.createElement('a');         let event = new MouseEvent('click');         let type = out_type.querySelector('.primary').innerText.toLowerCase();         a.download = pdfFile.name + '-' + pageNum + '.' + type;         a.href = preview.toDataURL(type === 'png' ? 'image/png' : 'image/jpeg');         a.dispatchEvent(event)     }      //保存全部页面     function saveAll() {         pageNum = 1;         savePage()     }      function savePage() {         if (pageNum > pdf.numPages) {             alert('全部保存成功');             return         }          readerPage(function () {             save();             pageNum++;             savePage();         });     }

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!