一,安装pdf.js库
npm install --save pdfjs-dist
vue2版本用@2.14.305
二,js代码
<template>
<div>
<div style="width:800px;margin: auto;">
<div style="width:800px;text-shadow: 2px 2px 5px #777;
line-height: 28px;font-size: 28px;color: rgb(90, 90, 90);
margin-top: 20px;">
pdf转图片
</div>
<div style="width: 800px;margin-top: 20px;">
<div >
选择pdf:
<input type="file" ref="hiddenfile" accept="application/pdf" @change="handlePdf" class="hiddenInput" />
</div>
<div style="width:800px;font-size:12px;margin-top:10px;">单击图片可下载一页</div>
<div style="width:800px;font-size:12px;margin-top:10px;">
<el-button type="info" plain style="width:400px;">全部图片打zip包下载</el-button>
</div>
<div v-for="(item,i) in imgFiles" :key="i" style="width:800px;position: relative;margin-top:10px;">
<canvas :id="`pdf_canvas_${item}`" style="border: 1px solid #eeeeee;float:left;" @click="downJpg(item)"></canvas>
</div>
</div>
</div>
</div>
</template>
<script>
import * as pdfjs from 'pdfjs-dist'
import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker
import {ref} from "vue";
export default {
name: "Pdf2Image",
setup() {
//pdf转成的图片文件,保存在数组中
const imgFiles = ref([]);
//pdf的名字,记录下来
const pdfName = ref("");
//处理pdf
const handlePdf = (e) => {
//显示正在加载
let file = e.target.files[0];
console.log(file);
console.log(file.name);
pdfName.value = file.name.substring(0, file.name.lastIndexOf("."));
console.log(pdfName.value);
var reader = new FileReader();
reader.readAsDataURL(file); //将文件读取为 DataURL
reader.onload = function() { //文件读取成功完成时触发
const loadingTask = pdfjs.getDocument(reader.result)
loadingTask.promise.then((pdf) => {
var pageNum = pdf.numPages;
console.log("页数:" + pageNum);
//准备图片
for (let i = 1; i <= pageNum; i++) {
let one=i;
imgFiles.value.push(one);
}
//处理
for (let i = 1; i <= pageNum; i++) {
//var canvas = document.createElement("canvas");
//canvas.id = "pageNum" + i;
pdf.getPage(i).then((page) => {
const canvas = document.getElementById('pdf_canvas_'+i);
const ctx = canvas.getContext('2d')
const viewport = page.getViewport({ scale: 3 })
// 画布大小,默认值是width:300px,height:150px
canvas.height = viewport.height;
canvas.width = viewport.width;
// 画布的dom大小, 设置移动端,宽度设置铺满整个屏幕
//const clientWidth = document.body.clientWidth;
const destWidth = 398;
canvas.style.width = destWidth + 'px';
// 根据pdf每页的宽高比例设置canvas的高度
canvas.style.height = destWidth * (viewport.height / viewport.width) + 'px';
page.render({
canvasContext: ctx,
viewport,
})
})
//加载完成
} // end for
})
}
}
//下载图片
const downJpg = (i) => {
var canvas = document.getElementById("pdf_canvas_"+i);
var oA = document.createElement("a");
oA.download = pdfName.value+"_"+i+'.jpg';// 设置下载的文件名,默认是'下载'
oA.href = canvas.toDataURL("image/jpeg");
//oA.className = "qrcode"
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
}
return {
imgFiles,
handlePdf,
downJpg,
}
}
}
</script>
<style scoped>
</style>
参考文章vue.js3:pdf文件转图片(pdfjs-dist@2.14.305 / vue@3.2.37) - 刘宏缔的架构森林 - 博客园 (cnblogs.com)