<!doctype html>
<html lang=zh_cn>
<meta charset=utf-8>
<title>PDF转图片|PDF转JPG - 在线工具 - OKTools</title>
<meta name=keywords content=PDF转图片、PDF转JPG>
<meta name=description content=在线PDF转JPG工具,使用pdf.js将PDF转为JPG图片>
<link rel="shortcut icon" href=/favicon.ico>
<link href=https://cdn.bootcss.com/font-awesome/5.10.0-11/css/all.min.css rel=stylesheet>
<link rel=stylesheet href=/static/css/style.css>
<aside><h1 class="logo"><a href= />OKTools</a></h1><nav class="side-nav"><p>JSON<ul><li><a href=/json>JSON格式化</a><li><a href=/json2xml>JSON/XML转换</a><li><a href=/json2yaml>JSON/YAML转换</a><li><a href=/json2go>JSON转Go Struct</a></ul><p>Base64<ul><li><a href=/base64>Base64编码解码</a><li><a href=/image2base64>图片Base64编码</a></ul><p>转换<ul><li><a href=/timestamp>Unix时间戳</a><li><a href=/morse>摩斯电码</a><li><a href=/color>颜色值转换</a><li><a href=/number>进制转换</a><li><a href=/url>URL编码解码</a><li><a href=/unicode>Unicode编码转换</a><li><a href=/pdf2img>PDF转图片</a></ul><p>Hash<ul><li><a href=/hash>Hash计算</a><li><a href=/file-hash>文件Hash计算</a></ul><p>加密<ul><li><a href=/aes>AES加密解密</a><li><a href=/des>DES加密解密</a><li><a href=/rsa>RSA加密解密</a></ul><p>其他<ul><li><a href=/ip>IP地址信息</a><li><a href=/tinyimg>图片压缩</a><li><a href=/qrcode>二维码制作</a><li><a href=http://oktools.net/websocket>WebSocket测试</a><li><a href=/regex>正则表达式测试</a><li><a href=/placeholder>SVG占位图</a></ul></nav></aside>
<script>var _hmt=_hmt||[];let hm=document.createElement("script");hm.src="https://hm.baidu.com/hm.js?e3d5bc397b23c3f6a8036739dae1557b";let s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s);let tools=document.querySelectorAll('.side-nav li');for(let i=0;i<tools.length;i++){let node=tools[i];if(node.querySelector('a').getAttribute('href').endsWith(document.location.pathname)){node.classList.add('active');break}}</script>
<main>
<div class="container">
<h1>PDF转图片</h1><div class="file fullwidth mt-2">
<span class="file-cta">
<input id=input_file class="file-input" type=file accept=application/pdf onchange=loadPDF(this.files[0])>
<span class="file-icon"><i class="fas fa-upload"></i></span><span class="file-button">选择一个PDF文件</span>
</span>
<span id=file_name class="file-name"></span>
</div><div class="content-center mt-2">
<div class="group">
<button class="button" onclick=prevPage()>
<i class="fa fa-arrow-left"></i><span>上一页</span>
</button>
<button class="button" onclick=nextPage()>
<span>下一页</span>
<i class="fa fa-arrow-right"></i>
</button>
</div><div id=out_type class="group">
<button class="button primary">
<span>JPG</span>
</button>
<button class="button">
<span>PNG</span>
</button>
</div><button class="button primary" onclick=save()>
<span>保存本页</span>
</button>
<button class="button primary" onclick=saveAll()>
<span>全部保存</span>
</button>
</div><p id=page_num><div class="content-center mt-2"><canvas id=preview class="bordered" hidden></canvas></div>
</div>
</main>
<script src=https://cdn.bootcss.com/pdf.js/2.2.228/pdf.min.js></script>
<script>
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');}});function loadPDF(file){pdfFile=file;file_name.innerHTML=file.name;let reader=new FileReader();reader.onload=(e)=>showPDF(e.target.result);reader.readAsDataURL(file);}
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();});}</script>