1. Official website: https://mozilla.github.io/pdf.js/
2. How to use
1) Through the official website, download the pdfJs plug-in package and put it in the project;
window.open("./js/pdfJS/web/viewer.html?file=AngularJS权威指南.pdf" );
2) Put the downloaded pdfJS plug-in package in the server to run the pdfJS project. In this case, deploy the pdfJS file through tomcat
3) When the path of the file and viewer.html are different (be sure to pay attention to the path of the file, otherwise it cannot be previewed normally)
4) When the file is a file on a remote server and we have the path of the file, we need to transcode the http path:
function methodsOne() { //法一
// window.open("./js/pdfJS/web/viewer.html?fileAngularJS权威指南.pdf" );//文件和viewer.html同路径
// window.open("http://localhost:8888/pdfJS/web/viewer.html?file=AngularJS权威指南.pdf" );//文件和viewer.html同路径
// window.open("./js/pdfJS/web/viewer.html?file=/pdf/files/AngularJS权威指南.pdf"); //文件和viewer.html 不同路径，注意路径
let fileUrl = encodeURIComponent('http://10.162.201.40:8005/dev/leck/2022/0215/11_.122qqq_1_092319.pdf') //将路径转码
window.open("http://localhost:8888/pdfJS/web/viewer.html?file=" + fileUrl);
}
(For example, to preview files on a remote server across domains:
- Just annotate the cross-domain authentication in vierwe.js (pro-test is valid):
- Replace the remote file with a file stream, and pass it directly as a parameter: file=file stream data (not tried)
)
Note: The effects of the above four writing methods are as follows:
// window.open("./js/pdfJS/web/viewer.html?fileAngularJS权威指南.pdf" );//文件和viewer.html同路径
// window.open("http://localhost:8888/pdfJS/web/viewer.html?file=AngularJS权威指南.pdf" );//文件和viewer.html同路径
window.open("./js/pdfJS/web/viewer.html?file=/pdf/files/AngularJS权威指南.pdf");//文件和viewer.html 不同路径，注意路径
5) By referring to pdf.js in the plug-in package, read the content in the pdf file, and render it on the page through the canvas.
All this method has several disadvantages:
- You can only render the pdf page by page, you need to make your own pager;
- The page turning effect is not as beautiful as the above-mentioned method of previewing the pdf directly through the path;
- If you want to download, print and other operations, you need to implement related functions yourself, but the above-mentioned method of previewing pdf directly through the path has these functions, and you can also hide them;
To realize this preview method, there are mainly the following steps:
- Import pdf.js
- Get pdf information: pdfjsLib.getDocument('./files/AngularJS Authoritative Guide.pdf'), this method puts back a promise, and you can get pdf through loadingTask.promise.then(function(pdf) {});
- After getting the pdf information, operate on the pdf, pdf.getPage(pageNum).then(function(page) {}), so far you have got the information of a single page, and you can render the page through canvas
- The code looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#pdfBD {
margin-left: 50%;
transform: translateX(-50%);
}
#pdf-pagination {
position: fixed;
width: 100%;
font-size: 14px;
top: 100px;
left: 10 px;
z-index: 100;
}
span {
margin-right: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<canvas id="pdfBD"> </canvas>
<div id="pdf-pagination">
<span id="before" onclick="paginationClick(-1)">上一页</span>
<span id="current">1</span>
<span id="next" onclick="paginationClick(1)">下一页</span>
</div>
</body>
<!-- <script src="https://lib.baomitu.com/pdf.js/2.7.570/pdf.js" type="text/javascript" charset="utf-8"></script> -->
<script src="js/pdfJS/build/pdf.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let pdfValue = null;
let pageContent = {
//法二，读取到的pdf信息记录
currentPage: 0,//当前页
countPage: 0,//总页数
}
window.onload = function() {
// methodsOne()
methodsTwo()
}
function methodsOne() {
//法一
// window.open("./js/pdfJS/web/viewer.html?fileAngularJS权威指南.pdf" );//文件和viewer.html同路径
// window.open("http://localhost:8888/pdfJS/web/viewer.html?file=AngularJS权威指南.pdf" );//文件和viewer.html同路径
window.open("./js/pdfJS/web/viewer.html?file=/pdf/files/AngularJS权威指南.pdf"); //文件和viewer.html 不同路径，注意路径
document.getElementById("pdf-pagination").display = 'none'; //隐藏分页器
}
function methodsTwo() {
//法二
var loadingTask = pdfjsLib.getDocument('./files/AngularJS权威指南.pdf');
loadingTask.promise.then(function(pdf) {
console.log(pdf)
pdfValue = pdf;
pageContent.countPage = pdf.numPages;
changePage(pdf, 1)
});
document.getElementById("pdf-pagination").display = 'block'; //显示分页器
}
//翻页 type：1 下一页；-1：上一页
function paginationClick(type) {
if (type == 1) {
//下一页
pageContent.currentPage == pageContent.countPage ? "" : pageContent.currentPage += 1
} else {
//上一页
pageContent.currentPage == 1 ? "" : pageContent.currentPage -= 1
}
document.getElementById("current").innerHTML = pageContent.currentPage
changePage(pdfValue, pageContent.currentPage)
}
//通过页码，渲染当前页currentPage信息：pdf：读取的总的pdf信息，pageNum：需要获取的页数
function changePage(pdf, pageNum) {
if (pdf == null) return;
pdf.getPage(pageNum).then(function(page) {
// you can now use *page* here
var scale = 1.5;//放大倍数
var viewport = page.getViewport({
scale: scale,
});
// Support HiDPI-screens.
var outputScale = window.devicePixelRatio || 1;
var canvas = document.getElementById('pdfBD');
var context = canvas.getContext('2d');
canvas.width = Math.floor(viewport.width * outputScale);
canvas.height = Math.floor(viewport.height * outputScale);
canvas.style.width = Math.floor(viewport.width) + "px";
canvas.style.height = Math.floor(viewport.height) + "px";
var transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] :
null;
var renderContext = {
canvasContext: context,
transform: transform,
viewport: viewport
};
page.render(renderContext);
});
}
</script>
</html>
Note:
The preview effect of this method is as follows (here the page layout and pager are only simple to realize the function)
【End】