PDF 预览
最近写了个pdf文件预览,很多插件,最终选了pdf.js,简单。下面是一个极其简单的demo
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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;
}
.pageBox {
position: absolute;
left: 20%;
z-index: 10;
color: red;
}
</style>
</head>
<body>
<button onclick="pdfView.importPDF('./public/Lorem.pdf')">来啊,点我啊,点我直接展示</button>
<div class="pageBox">
<button class="" id="prev" onclick="pdfView.toPrevPage()">上一页</button>
<button class="" id="next" onclick="pdfView.toNextPage()">下一页</button>
</div>
<div class="page_count" id="page_count"></div>
<div id="container" style="display: none;">
<div class="lightbox"></div>
<div id="pop" class="pop">
<canvas id="the-canvas"></canvas>
</div>
</div>
</body>
<script src="./public/pdf.js"></script>
<script type="text/javascript">
class PDFView{
constructor(num){
this.pageNum = num;
this.workUrl = './public/pdf.worker.min.js';
this.PDFobj = null;
}
chooseFile(me){
let vm = this;
console.log(me.files);
console.log(me.value);
vm.importPDF(me.value);
}
importPDF(pdfUrl){
let vm = this;
let container = document.getElementById("container");
container.style.display = "block";
let url = pdfUrl;
PDFJS.workerSrc = vm.workUrl;
PDFJS.getDocument(url).promise.then((pdf) => {
vm.pageTatol = pdf.numPages;
document.getElementById('page_count').textContent = pdf.numPages;
vm.PDFobj = pdf;
vm.showPDF();
}).catch((err) => {
console.log(err);
})
}
showPDF(){
let vm = this;
vm.PDFobj.getPage(vm.pageNum).then((page) => {
let scale = 1.5;
let viewport = page.getViewport(scale);
let canvas = document.getElementById('the-canvas');
let context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
let renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
}
toPrevPage(){
let vm = this;
if (vm.pageNum <= 1) {
alert('不要再点了,已经是第一夜了��');
return;
}
vm.pageNum--;
vm.showPDF();
}
toNextPage(){
let vm = this;
if (vm.pageNum >= vm.pageTatol) {
alert('不要再点了,已经是最后一夜了��');
return;
}
vm.pageNum++;
vm.showPDF();
}
}
var url = './public/lalala.pdf';
/*
* 引用方式
* var pdfView = new PDFView(1,url,workerSrc);
* @{param,param} 初始页,pdf文件路径
*
* pdfView.importPDF() 加载pdf并展示
*
* pdfView.toPrevPage() 上一页
* pdfView.toNextPage() 下一页
*
* */
var pdfView = new PDFView(1);
</script>
</html>
源码包在这里 https://download.csdn.net/download/qq_37261367/10560372
本文纯手打,有不当之处请留言!如果对小伙伴们有帮助的话,点赞啊,谢谢!