使用pdf.js把PDF檔案轉圖片
阿新 • • 發佈:2018-12-26
專案需求把客戶上傳的pdf檔案轉換成圖片並執行下載,網上資料查了一下,覺得pdf.js
實現比較方便。
1.瞭解pdf.js
PDF.js是基於開放的 HTML5 及 JavaScript 技術實現的開源產品,可以實現在html下直接瀏覽pdf文件。
2.進行核心檔案的引入
pdf.js主要包含兩個庫檔案,一個pdf.js和一個pdf.worker.js,,一個負責API解析,一個負責核心解析
<script src="pdf.js" type="text/javascript"></script>
測試程式碼:
<html>
<head >
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.lightbox{
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 7;
opacity: 0.3;
display : block;
background-color: rgb(0, 0, 0);
}
.pop{
position: absolute;
left: 50%;
width: 894px;
margin-left: -447px;
z-index: 9;
}
</style>
<script src="pdf.js" type="text/javascript"></script >
<script type="text/javascript">
function showPdf() {
var container = document.getElementById("container");
container.style.display = "block";
var url = 'p1.pdf';
PDFJS.workerSrc = 'pdf.worker.js';
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
}
</script>
</head>
<body>
<h1><a href="javascript:void(0)" target="_blank" onclick="showPdf()">顯示pdf文件</a></h1>
<div id="container" style="display: none;">
<div class="lightbox"></div>
<div id="pop" class="pop">
<canvas id="the-canvas"></canvas>
</div>
</div>
</body>
</html>