前端使用pdf.js實(shí)現(xiàn)pdf轉(zhuǎn)為圖片
更新時(shí)間：2024年04月03日 11:35:06 作者：cqwuliu
這篇文章主要為大家詳細(xì)介紹了前端如何使用pdf.js實(shí)現(xiàn)pdf轉(zhuǎn)為圖片功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
PDF.js是一個(gè)用于在網(wǎng)頁中顯示PDF文檔的JavaScript庫。它是由Mozilla開發(fā)的，是一個(gè)完全免費(fèi)、開源的工具。
安裝 PDF.js
安裝PDF.js有兩種方法：
方法1：通過npm安裝
可以通過npm安裝PDF.js，使用以下命令：
npm install pdfjs-dist
這樣就會(huì)在你的項(xiàng)目中安裝PDF.js。
方法2：手動(dòng)下載
也可以從官方網(wǎng)站https://mozilla.github.io/pdf.js/getting_started/手動(dòng)下載PDF.js。下載后，將pdf.js和pdf.worker.js文件放到你的項(xiàng)目中。
前端pdf.js將pdf轉(zhuǎn)為圖片，尤其適合電子發(fā)票打印
示例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>PDF文件轉(zhuǎn)圖片</title>
<script type="text/javascript" src="js/jquery-3.6.4.min.js"></script>
<script type="text/javascript" src="js/2.2.228pdf.min.js"></script>
<script type="text/javascript" src="js/2.2.228.pdf.worker.min.js"></script>
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js" integrity="sha512-Q0SyiCpjyVOjMJ28RDpmCxi0Drmc9cr7fBQuW2F5F7yiS0yTWtbbltd+H5BYhaA7Izpm6nyIXAUppQfdm6zt1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.worker.min.js" integrity="sha512-kxBikBDcUHWvfvzNZVSRe+1mJ2MSHFe5+WVUCdTTUN3oHo/3GWPDUhiO0jtFCUcs+VnSk6BMGYC3IGuwe3qXVg==" crossorigin="anonymous" referrerpolicy="no-referrer"></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: 65%;
height: 75%;
margin-top: 1%;
border-radius: 2px;
/*border: 2px solid #a29b9b;*/
}
.pdfInfos {
margin: 0 2%;
}
</style>
</head>
<body>
<div class="showdata" style="margin-top:1%">
<button id="pdf_tourl">合并多個(gè)pdf為一個(gè)</button>
<button id="prevpage">上一頁</button>
<button id="nextpage">下一頁</button>
<button id="exportImg">導(dǎo)出每一張圖片</button>
<button onclick="wind_print()">打印</button>
<button onclick="choosePdf()">選擇多個(gè)pdf文件</button>
<input style="display:none" id='chooseFile' type='file' accept="application/pdf" multiple="multiple">
</div>
<div class="showdata" 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>
$("#pdf_tourl").click(function(){
alert("可以使用PDF Arranger軟件");
});
function wind_print(){
$(".showdata").hide();
$("#container").css("width","100%");
$("#container").css("height","100%");
window.print();
$(".showdata").show();
$("#container").css("width","65%");
$("#container").css("height","75%");
}
var currentPages, totalPages //聲明一個(gè)當(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ù)
debugger
var filesdata = $('#chooseFile')[0].files; //jquery獲取到文件 返回屬性的值
//文件大小
var fileSize=0;
for (let i = 0; i < filesdata.length; i++) {
fileSize += filesdata[i].size;
}
var mb;
if (fileSize) {
mb = fileSize / 1048576;
if (mb > 10) {
alert("文件大小不能>10M");
return;
}
}
if (filesdata.length === 1) {
$("#fileName").text(filesdata[0].name);
} else {
$("#fileName").text(filesdata[0].name + "等 " + filesdata.length + " 個(gè)文件");
}
$("#fileSize").text(mb.toFixed(2) + "Mb");
//reader.readAsDataURL(filesdata[0]); //將文件讀取為 DataURL
for (let j = 0; j < filesdata.length; j++) {
var reader = new FileReader();
reader.readAsDataURL(filesdata[j]);
reader.onload = function(e) { //文件讀取成功完成時(shí)觸發(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);
//遍歷動(dòng)態(tài)創(chuàng)建canvas
for (var i = 1; i <= totalPages; i++) {
var canvas = document.createElement('canvas');
var cid=j+i;
canvas.id = "pageNum" + cid;
$("#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真實(shí)寬高
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('請(qǐng)先上傳pdf文件')
return false;
}
//$("#imgloading").css('display', 'block');
var zip = new JSZip(); //創(chuàng)建一個(gè)JSZip實(shí)例
var images = zip.folder("images"); //創(chuàng)建一個(gè)文件夾用來存放圖片
//遍歷canvas，將其生成圖片放進(jìn)文件夾images中
$("canvas").each(function(index, ele) {
var canvas = document.getElementById("pageNum" + (index + 1));
//將圖片放進(jìn)文件夾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
saveAs(content, "imgFiles.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>效果圖
到此這篇關(guān)于前端使用pdf.js實(shí)現(xiàn)pdf轉(zhuǎn)為圖片的文章就介紹到這了,更多相關(guān)pdf.js實(shí)現(xiàn)pdf轉(zhuǎn)圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解TypeScript中的箭頭函數(shù)如何實(shí)現(xiàn)重載
這篇文章主要為大家詳細(xì)介紹了TypeScript中的箭頭函數(shù)是如何實(shí)現(xiàn)重載的，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，需要的可以參考一下2023-05-05
阻止別人不那么容易下載或查看到你的CSS文件,高手可能阻止不了,不過新手們一時(shí)會(huì)不知所措,費(fèi)一番周折了2009-10-10
在前端開發(fā)中，有時(shí)候我們需要判斷一個(gè)元素是否在可視區(qū)域內(nèi)，本文主要介紹了js如何對(duì)元素可視區(qū)域進(jìn)行判定，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
大多數(shù)人系統(tǒng)學(xué)習(xí)過的程序設(shè)計(jì)語言，在這些語言的學(xué)習(xí)過程中最早學(xué)到的幾個(gè)要點(diǎn)之一就是值類型和引用類型的區(qū)別。下面我們來看一下在 JavaScript 中基本數(shù)據(jù)類型（Primitive Types)和引用類型（Reference Types)的區(qū)別。2015-05-05
javascript模擬git diff命令實(shí)現(xiàn)文本文件差異比較
這篇文章主要為大家詳細(xì)介紹了javascript如何模擬git diff命令實(shí)現(xiàn)文本文件差異比較效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考下2023-12-12
通過判斷JavaScript的版本實(shí)現(xiàn)執(zhí)行不同的代碼
有時(shí)候需要根據(jù)JavaScript的版本來分別執(zhí)行一些代碼,那么就可能需要用到下面的代碼.2010-05-05
這篇文章主要給大家介紹了關(guān)于JS算法題之查找數(shù)字在數(shù)組中的索引位置的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
如何通過setTimeout理解JS運(yùn)行機(jī)制詳解
這篇文章主要給大家介紹了關(guān)于如何通過setTimeout理解JS運(yùn)行機(jī)制的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
本文主要介紹了拖動(dòng)時(shí)防止選中的小知識(shí)點(diǎn)。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
簡單實(shí)現(xiàn)Bootstrap標(biāo)簽頁
這篇文章主要教大家簡單實(shí)現(xiàn)Bootstrap標(biāo)簽頁，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12