JS實現(xiàn)逐頁將PDF文件轉(zhuǎn)為圖片格式
更新時間：2023年05月29日 17:05:16 作者：程序員Winn
這篇文章主要為大家分享了如何通過前端js將pdf文件轉(zhuǎn)為圖片格式，并且支持翻頁預(yù)覽、以及圖片打包下載，文中的示例代碼簡潔易懂，需要的可以參考一下
背景
年前的時候，開發(fā)一個電子雜志項目，功能需求是通過上傳pdf文件，將其轉(zhuǎn)為圖片格式，所以雜志的內(nèi)容其實就是一張張圖片
不過當(dāng)時技術(shù)要求用后端實現(xiàn)，所以使用的是PHP實現(xiàn)該功能。項目完成后，尋思著在前端是否也能實現(xiàn)pdf轉(zhuǎn)圖片的功能。一番研究后，果真可行。以下就分享如何通過前端js將pdf文件轉(zhuǎn)為圖片格式，并且支持翻頁預(yù)覽、以及圖片打包下載
所需工具
- pdf.js（負(fù)責(zé)API解析，可將pdf文件渲染成canvas實現(xiàn)預(yù)覽）
- pdf.worker.js（負(fù)責(zé)核心解析）
- jszip.js（將圖片打包成生成.zip文件）
- Filesaver.js（保存下載zip文件）
工具下載
一、pdf.js及pdf.worker.js下載地址：
mozilla.github.io/pdf.js/getting_started
1.選擇穩(wěn)定版下載
2.解壓后將bulid中的pdf.js及pdf.worker.js拷貝到項目中
二、jszip.js及Filesaver.js下載地址：
1.點擊download.JSZip
2.解壓后將dist文件夾下的jszip.js文件以及vendor文件夾下的FileSaver.js文件拷貝到項目中
至此，所需工具已齊全。以下直接附上項目完整代碼（代碼可直接復(fù)制使用，查看效果。 對應(yīng)的文件需自行下載引入）
代碼實現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>PDF文件轉(zhuǎn)圖片</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/pdf.js"></script>
<script type="text/javascript" src="js/pdf.worker.js"></script>
<script type="text/javascript" src="js/jszip.js"></script>
<script type="text/javascript" src="js/FileSaver.js"></script>
<style type="text/css">
button {
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:hover {
background: #ccc;
}
#container {
width: 600px;
height: 780px;
margin-top: 1%;
border-radius: 2px;
border: 2px solid #a29b9b;
}
.pdfInfos {
margin: 0 2%;
}
</style>
</head>
<body>
<div style="margin-top:1%">
<button id="prevpage">上一頁</button>
<button id="nextpage">下一頁</button>
<button id="exportImg">導(dǎo)出圖片</button>
<button onclick="choosePdf()">選擇一個pdf文件</button>
<input style="display:none" id='chooseFile' type='file' accept="application/pdf">
</div>
<div style="margin-top:1%">
<span class="pdfInfos">頁碼：<span id="currentPages"></span><span id="totalPages"></span></span>
<span class="pdfInfos">文件名：<span id="fileName"></span></span>
<span class="pdfInfos">文件大?。?lt;span id="fileSize"></span></span>
</div>
<div style="position: relative;">
<div id="container"></div>
<img id="imgloading" style="position: absolute;top: 20%;left: 2%;display:none" src="loading.gif">
</div>
</body>
<script>
var currentPages,totalPages //聲明一個當(dāng)前頁碼及總頁數(shù)變量
var scale = 2; //設(shè)置縮放比例，越大生成圖片越清晰
$('#chooseFile').change(function() {
var pdfFilePath = $('#chooseFile').val();
if(pdfFilePath) {
$("#imgloading").css('display','block');
$("#container").empty(); //清空上一PDF文件展示圖
currentPages=1; //重置當(dāng)前頁數(shù)
totalPages=0; //重置總頁數(shù)
var filesdata = $('#chooseFile')[0].files; //jquery獲取到文件 返回屬性的值
var fileSize = filesdata[0].size; //文件大小
var mb;
if(fileSize) {
mb = fileSize / 1048576;
if(mb > 10) {
alert("文件大小不能>10M");
return;
}
}
$("#fileName").text(filesdata[0].name);
$("#fileSize").text(mb.toFixed(2) + "Mb");
var reader = new FileReader();
reader.readAsDataURL(filesdata[0]); //將文件讀取為 DataURL
reader.onload = function(e) { //文件讀取成功完成時觸發(fā)
pdfjsLib.getDocument(this.result).then(function(pdf) { //調(diào)用pdf.js獲取文件
if(pdf) {
totalPages = pdf.numPages; //獲取pdf文件總頁數(shù)
$("#currentPages").text("1/");
$("#totalPages").text(totalPages);
//遍歷動態(tài)創(chuàng)建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) {
pdfFile.getPage(pageNumber).then(function(page) { //逐頁解析PDF
var viewport = page.getViewport(scale); // 頁面縮放比例
var newcanvas = canvasContext.canvas;
//設(shè)置canvas真實寬高
newcanvas.width = viewport.width;
newcanvas.height = viewport.height;
//設(shè)置canvas在瀏覽中寬高
newcanvas.style.width = "100%";
newcanvas.style.height = "100%";
//默認(rèn)顯示第一頁，其他頁隱藏
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";
})
//導(dǎo)出圖片
$("#exportImg").click(function() {
if (!$('#chooseFile').val()) {
alert('請先上傳pdf文件')
return false;
}
$("#imgloading").css('display','block');
var zip = new JSZip(); //創(chuàng)建一個JSZip實例
var images = zip.folder("images"); //創(chuàng)建一個文件夾用來存放圖片
//遍歷canvas，將其生成圖片放進文件夾images中
$("canvas").each(function(index, ele) {
var canvas = document.getElementById("pageNum" + (index + 1));
//將圖片放進文件夾images中
//參數(shù)1為圖片名稱，參數(shù)2為圖片數(shù)據(jù)（格式為base64，需去除base64前綴 data:image/png;base64）
images.file("photo-" + (index + 1) + ".png", splitBase64(canvas.toDataURL("image/png", 1.0)), {
base64: true
});
})
//打包下載
zip.generateAsync({
type: "blob"
}).then(function(content) {
saveAs(content, "picture.zip"); //saveAs依賴的js文件是FileSaver.js
$("#imgloading").css('display','none');
});
});
//截取base64前綴
function splitBase64(dataurl) {
var arr = dataurl.split(',')
return arr[1]
}
function choosePdf(){
$("#chooseFile").click()
}
</script>
</html>項目實現(xiàn)原理分析
首先利用pdf.js將上傳的pdf文件轉(zhuǎn)化成canvas
然后使用jszip.js將canvas打包圖片生成.zip文件
最后使用Filesaver.js將zip文件保存下載
項目注意要點
由于pdf文件是通過上傳的，因此需要通過js的FileReader()對象將其讀取為DataURL，pdf.js文件才可讀取渲染
JSZip對象的.file()函數(shù)中第二個參數(shù)傳入的是base64格式圖片，但是要去掉base64前綴標(biāo)識
以上就是JS實現(xiàn)逐頁將PDF文件轉(zhuǎn)為圖片格式的詳細(xì)內(nèi)容，更多關(guān)于JS PDF轉(zhuǎn)圖片的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JavaScript字符串插入、刪除、替換函數(shù)使用示例
本文為大家介紹下JavaScript字符串的插入、刪除、替換函數(shù)的在實際中的應(yīng)用，想要學(xué)習(xí)的朋友可以參考下哈，希望對初學(xué)者有所幫助2013-07-07
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)數(shù)字跳動到指定數(shù)字，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
學(xué)習(xí)JavaScript設(shè)計模式之迭代器模式
這篇文章主要為大家介紹了JavaScript設(shè)計模式中的迭代器模式，對JavaScript設(shè)計模式感興趣的小伙伴們可以參考一下2016-01-01
如何用JavaScript實現(xiàn)功能齊全的單鏈表詳解
這篇文章主要給大家介紹了關(guān)于如何用JavaScript實現(xiàn)功能齊全的單鏈表的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
鼠標(biāo)移到div,浮層顯示明細(xì),彈出層與div的上邊距左邊距重合(示例代碼)
這篇文章主要介紹了鼠標(biāo)移到div,浮層顯示明細(xì),彈出層與div的上邊距左邊距重合的實例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
JavaScript在IE中“意外地調(diào)用了方法或?qū)傩栽L問”
FF是正常的，IE報“意外地調(diào)用了方法或?qū)傩栽L問”。2008-11-11
這篇文章主要介紹了JS實現(xiàn)隊列的先進先出功能,結(jié)合實例形式分析了基于JS的隊列初始化、賦值等相關(guān)操作技巧,需要的朋友可以參考下2017-05-05
詳解js中構(gòu)造流程圖的核心技術(shù)JsPlumb（2）
這篇文章主要介紹了js中構(gòu)造流程圖的核心技術(shù)JsPlumb，jsPlumb是一個強大的JavaScript連線庫，它可以將html中的元素用箭頭、曲線、直線等連接起來，適用于開發(fā)Web上的圖表、建模工具等，需要的朋友可以參考下2015-12-12
這篇文章主要為大家詳細(xì)介紹了js鍵盤事件實現(xiàn)人物的行走，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要為大家詳細(xì)介紹了如何簡單實現(xiàn)js浮動框，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12