需求是将前端加载的PDF转化到base64上传服务器
<html>
<head>
</head>
<body>
</body>
<!--<script src="https://cdn.bootcdn.net/ajax/libs/pdf.js/2.5.207/pdf.min.js"></script>-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/pdf.js/2.5.207/pdf.worker.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.min.js"></script>
<script type="text/javascript">
pdfjsLib.getDocument("./2a.pdf").then((pdf) => {
const numPages = pdf.numPages;
const allPromise = [];
for (let i = 1; i <= numPages; i++) {
allPromise.push(pdf.getPage(i))
}
return Promise.all(allPromise)
}).then((allPDF) => {
return renderPDFS(allPDF)
}).then(allRender => {
console.log(allRender)
const allCanvasOKPromises = allRender.map(render => render.renderPromise);
const allCanvas = allRender.map(render => render.canvas);
return Promise.all(allCanvasOKPromises).then(val => {
return allCanvas.map(canvas => {
return canvas.toDataURL();
})
})
}).then(allBase64 => {
allBase64.forEach(base64 => {
const image = new Image();
image.src = base64;
document.body.appendChild(image);
})
})
function renderPDFS(allPDF) {
return allPDF.map(eachPDF => {
return renderPDF2Canvas(eachPDF)
})
}
function renderPDF2Canvas(eachPDF) {
const viewport = eachPDF.getViewport(2);
const canvas = document.createElement("canvas");
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderPromise = eachPDF.render({canvasContext: context, viewport: viewport})
return {canvas, renderPromise}
}
</script>
</html>
太久了已经忘记怎么写，下面是vue的参考代码
function renderPDF2Canvas(eachPDF) {
const viewport = eachPDF.getViewport(2);
const canvas = document.createElement("canvas");
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderPromise = eachPDF.render({canvasContext: context, viewport: viewport})
return {canvas, renderPromise}
}
function renderPDFS(allPDF) {
return allPDF.map(eachPDF => {
return renderPDF2Canvas(eachPDF)
})
}
export function pdf2img(pdfFile) {
// eslint-disable-next-line
return pdfjsLib.getDocument(pdfFile).then((pdf) => {
const numPages = pdf.numPages;
const allPromise = [];
for (let i = 1; i <= numPages; i++) {
allPromise.push(pdf.getPage(i))
}
return Promise.all(allPromise)
}).then((allPDF) => {
return renderPDFS(allPDF)
}).then(allRender => {
console.log(allRender)
const allCanvasOKPromises = allRender.map(render => render.renderPromise);
const allCanvas = allRender.map(render => render.canvas);
return Promise.all(allCanvasOKPromises).then(() => {
return allCanvas.map(canvas => {
return canvas.toDataURL();
})
})
}).then(allBase64 => {
// console.log(allBase64)
return allBase64
})
}
本地调用：
handleFiles1: function (filePDF, fileList) {
console.log(filePDF)
this.companyName = filePDF.name.split(".")[0];
const reader = new FileReader();
reader.readAsArrayBuffer(filePDF.raw);
reader.onload = (e) => {
const myData = new Uint8Array(e.target.result)
const docInitParams = {data: myData};
pdf2img(docInitParams).then(allImages => {
this.sourceImages = allImages
this.showUpload1 = false;
this.$nextTick(() => {
this.judgeLoadTwoPDF();
})
})
}
},
<el-upload
accept="application/pdf"
class="upload-demo"
drag
action=""
:auto-upload="false"
:show-file-list="false"
:on-change="handleFiles1"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将原文件拖到此处，或<em>点击加载</em></div>
<div class="el-upload__tip" slot="tip">只能上传pdf文件</div>
</el-upload>
