参考网址：https://xxlllq.github.io/pdf2img/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pdf转图片与上传</title> </head> <body> <input id='pdf' type='file' accept="application/pdf"> <div id="upload"></div> <div id="imgDiv"></div> </body> <script src="jquery.js"></script> <script src="pdf.js"></script> <script src="pdf.worker.js"></script> <script> var timer = null, page = 0, aCanvas = []; $(function () { clearInterval(timer) }) $("#pdf").change(function () { var pdfFileURL = $('#pdf').val(); if (pdfFileURL) { clearInterval(timer); page = 0; aCanvas = []; $("#imgDiv").empty();//清空上一PDF文件展示图 var files = $('#pdf').prop('files'); //获取到文件 /*pdf.js无法直接打开本地文件,所以利用FileReader转换*/ var reader = new FileReader(); reader.readAsArrayBuffer(files[0]); reader.onload = function (e) { var typedarray = new Uint8Array(this.result); PDFJS.getDocument(typedarray).then(function (pdf) { //PDF转换为canvas $("#imgDiv").css("border", "0"); //清除文本、边框 if (pdf) { timer = setInterval(function () { listenCanvas() },1000); var pageNum = pdf.numPages, html = ""; for (var i = 1; i <= pageNum; i++) { var canvas = document.createElement('canvas'); canvas.id = "pageNum" + i; $("#imgDiv").append(canvas); aCanvas.push(canvas); var context = canvas.getContext('2d'); console.log("pageNumber = " + i) openPage(pdf, i, context); } $("#upload").html(html) } }); }; } }); function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); } function listenCanvas() { console.log("children = "+$("#imgDiv").children().length) console.log("page = "+page) if ($("#imgDiv").children().length == page) { clearInterval(timer); page = 0; var html = ""; for (var i =0; i < aCanvas.length;i++) { console.log(aCanvas[i].id) html += `<img width="100" height="150" style="margin-right: 20px" src="`+aCanvas[i].toDataURL()+`"/>`; console.log("i"+i); let formdata = new FormData(); formdata.append('file', dataURLtoBlob(aCanvas[i].toDataURL())); formdata.append('pagenum', i); $.ajax({ url: "./upload.php", type: 'post', data: formdata, dataType: 'json', async: false, cache: false, contentType: false, processData: false, success(res) { console.log(res) } }) } $("#upload").html(html) } } function openPage(pdfFile, pageNumber, context) { var scale = 1.5; pdfFile.getPage(pageNumber).then(function(page) { viewport = page.getViewport(scale); // reference canvas via context var canvas = context.canvas; canvas.width = viewport.width; canvas.height = viewport.height; canvas.style.width = "100%"; canvas.style.height = "100%"; var renderContext = { canvasContext: context, viewport: viewport }; var renderTask = page.render(renderContext); renderTask.then(function () { console.log("pageNumber = " + pageNumber) window.page = window.page + 1 }) }); return; }; </script> </html>