1.公式サイト： https: //mozilla.github.io/pdf.js/
2. 使い方
1) 公式 Web サイトから pdfJs プラグイン パッケージをダウンロードし、プロジェクトに配置します。
window.open("./js/pdfJS/web/viewer.html?file=AngularJS权威指南.pdf" );
2) ダウンロードした pdfJS プラグインパッケージをサーバーに置いて pdfJS プロジェクトを実行する. この場合は tomcat 経由で pdfJS ファイルをデプロイする.
3) ファイルと viewer.html のパスが異なる場合 (必ずファイルのパス、それ以外の場合は正常にプレビューできません)
4) ファイルがリモート サーバー上のファイルであり、ファイルのパスがある場合、http パスをトランスコードする必要があります。
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);
}
(たとえば、ドメイン間でリモート サーバー上のファイルをプレビューするには、次のようにします。
- vierwe.js でクロスドメイン認証に注釈を付けるだけです (プロテストは有効です)。
- リモート ファイルをファイル ストリームに置き換え、それをパラメータとして直接渡します: file=file stream data (未試行)
)
注: 上記 4 つの書き込み方法の効果は次のとおりです。
// 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) プラグイン パッケージの pdf.js を参照して、pdf ファイルのコンテンツを読み取り、キャンバスを介してページにレンダリングする.
この方法にはいくつかの欠点があります。
- ページ単位でのみ PDF をレンダリングできます。独自のページャーを作成する必要があります。
- ページめくり効果は、パスを介して直接 pdf をプレビューする上記の方法ほど美しくありません。
- ダウンロード、印刷などの操作を行う場合は、関連する機能を自分で実装する必要がありますが、上記のパスから直接 pdf をプレビューする方法にはこれらの機能があり、それらを非表示にすることもできます。
このプレビュー方法を実現するには、主に次の手順があります。
- pdf.jsをインポート
- PDF 情報を取得します。
- PDF 情報を取得したら、pdf.getPage(pageNum).then(function(page) {}) を操作します。ここまでで、単一ページの情報が取得され、キャンバスを介してページをレンダリングできます。
- コードは次のようになります。
<!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>
注:
このメソッドのプレビュー効果は次のとおりです (ここでは、ページ レイアウトとページャーは機能を実現するための単純なものです)
【終了】