admin管理员组文章数量:1649151
PDF转图片 有两种方式，一种是请求所有分页后合成一张图片，一种是分页加载
本文推荐后者，前者在实操中 pdf页码过大时 转换超时导致失败
本文需要的依赖是pdf.js pdf.worker.js jquery.js 当然在git上都可以找到
也可以使用本文上传的资源依赖，在这篇文章的上方下载。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no" />
<title>PDF文件转图片</title>
<script src="/assets/js/jquery.js"></script>
<script src="/assets/v2/js/pdf.js"></script>
<script src="/assets/v2/js/pdf.worker.js"></script>
</head>
<body>
<div class="all_cont" style=" display: flex;flex-direction: column;align-items: center;">
<div class="container_cont" style="margin-top:1%;position: relative;display: flex;align-items: center;justify-content: center;">
<button id="prevpage" style=" width: 120px;height: 30px;background: none;border: 1px solid #b1afaf;border-radius: 5px;font-size: 12px;font-weight: 1000;color: #384240;cursor: pointer;outline: none;margin: 0 0.5%">上一页</button>
<button id="nextpage" style=" width: 120px;height: 30px;background: none;border: 1px solid #b1afaf;border-radius: 5px;font-size: 12px;font-weight: 1000;color: #384240;cursor: pointer;outline: none; margin: 0 0.5%">下一页</button>
<input style="display:none" id="chooseFile" type="file" accept="application/pdf">
</div>
<div class="container_cont">
<div id="container" style=" margin-top: 1%;border-radius: 2px;border: 2px solid #a29b9b;"></div>
<img id="imgloading" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); display:none" src="/assets/images/loading.gif">
</div>
</div>
</body>
<script>
var currentPages, totalPages //声明一个当前页码及总页数变量
var url = '/media/files/db01a18eaeb9f87ca49b22bcb61f2dc17ecd72d4.pdf';
var my_pdf = '';
function init() {
loadPdfFromUrl(url);
}
function loadPdfFromUrl() {
$('#imgloading').css('display', 'block');
$('#container').empty(); //清空上一PDF文件展示图
currentPages = 1; //重置当前页数
totalPages = 0; //重置总页数
pdfjsLib.getDocument(url).promise.then(function(pdf) { //调用pdf.js获取文件
console.log('gl----pdf', pdf);
my_pdf = pdf
if (pdf) {
totalPages = pdf.numPages; //获取pdf文件总页数
$('#currentPages').text('1/');
$('#totalPages').text(totalPages);
//遍历动态创建canvas
for (var i = 1; i <= totalPages; i++) {
var canvas = document.createElement('canvas');
canvas.id = 'pageNum' + i;
$('#container').append(canvas);
var context = canvas.getContext('2d');
renderImg(pdf, i, context);
}
}
});
}
function renderImg(pdfFile, pageNumber, canvasContext) {
console.log('gl---pdfFile', pdfFile);
pdfFile.getPage(pageNumber).then(function(page) { //逐页解析PDF
var viewport = page.getViewport({
scale: 1
}); // 页面缩放比例
var newcanvas = canvasContext.canvas;
//设置canvas真实宽高
newcanvas.width = viewport.width;
newcanvas.height = viewport.height;
//设置canvas在浏览中宽高
newcanvas.style.width = '100%';
newcanvas.style.height = '100%';
//默认显示第一页，其他页隐藏
if (pageNumber != 1) {
newcanvas.style.display = 'none';
}
var renderContext = {
canvasContext: canvasContext,
viewport: viewport
};
page.render(renderContext); //渲染生成
});
$('#imgloading').css('display', 'none');
return;
};
$('#prevpage').click(function() {
if (!currentPages || currentPages <= 1) {
return;
}
nowpage = currentPages;
currentPages--;
$('#currentPages').text(currentPages + '/');
var prevcanvas = document.getElementById('pageNum' + currentPages);
var currentcanvas = document.getElementById('pageNum' + nowpage);
currentcanvas.style.display = 'none';
prevcanvas.style.display = 'block';
})
$('#nextpage').click(function() {
if (!currentPages || currentPages >= totalPages) {
return;
}
nowpage = currentPages;
currentPages++;
$('#currentPages').text(currentPages + '/');
var nextcanvas = document.getElementById('pageNum' + currentPages);
var currentcanvas = document.getElementById('pageNum' + nowpage);
currentcanvas.style.display = 'none';
nextcanvas.style.display = 'block';
})
init()
</script>
</html>
版权声明：本文标题：PDF转图片 + 分页 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1729504815a1203503.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论