[在线DEMO]（https://oktools.net/pdf2img）
原理
使用pdf.js预览图片，pdf.js将pdf通过canvas将每一页渲染出来，然后我们通过canvas的toDataURL方法保存为jpg或png格式。
pdf.js是Mozilla开源的一个js库，无需任何本地支持就可以在浏览器上显示pdf文档。唯一的要求就是浏览器必须支持HTML5。
依赖
需要pdf.min.js和pdf.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(); }); } 预览:
