pdfjs（2.13.216）浏览器展示pdf文件
Posted 胖鹅68
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了pdfjs（2.13.216）浏览器展示pdf文件相关的知识，希望对你有一定的参考价值。
文章目录
一、参考
1.1 使用场景
- 直接将pdf 在浏览器中展示出来
- 将word转为pdf,然后再通过浏览器展示出来
二、两个库文件
- 一个pdf.js; 一个负责API解析
加载pdf文件
PDFJS.getDocument('helloworld.pdf').then(function(pdf)
);
逐页解析PDF
pdf.getPage(1).then(function(page)
);
- 一个pdf.worker.js; 负责核心解析。
三、案例（版本 2.13.216 ）
工程目录结构
3.1 自定义，使用canvase 展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/pdfjs/build/pdf.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<canvas id="the-canvas" height="500" width="500"></canvas>
</body>
<script>
$(function ()
const PDFJS = pdfjsLib
PDFJS.workerSrc = './lib/pdfjs/build/pdf.worker.js';
/*
加载 url pdf资源
const pdfUrl = './lib/1.pdf'
var loadingTask = PDFJS.getDocument(pdfUrl);
*/
/*
加载 base64 pdf资源
*/
var pdfData = atob(
'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');
var loadingTask = PDFJS.getDocument(data: pdfData);
loadingTask.promise.then(function(pdf) // 加载pdf文件完成 触发的事件
console.log('PDF loaded');
// pdf 页面数
var pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) // 加载pdf第 pageNumber 页 触发的事件
console.log('Page loaded');
var scale = 1.5;
// 这里使用的版本是 2.13.216 , 传递的是一个 JSON 对象
var viewport = page.getViewport(scale: scale);
var outputScale = window.devicePixelRatio || 1;
var canvas = document.getElementById('the-canvas');
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); // 渲染到 canvas 中
);
, function (reason)
console.error(reason);
);
)
</script>
</html>
备注： 版本不同，page.getViewport(scale: scale); 方法不一样，需要注意
3.2 自定义分页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./lib/pdfjs/build/pdf.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<canvas id="the-canvas" height="500" width="500"></canvas>
<div>
当前页数：<div id="pageCount" ></div>
</div>
<div>
<button id="prev">上一页</button>
</div>
<div>
<button id="next">下一页</button>
</div>
</body>
<script>
const PDFJS = pdfjsLib
PDFJS.workerSrc = './lib/pdfjs/build/pdf.worker.js';
const pdfUrl = './lib/1.pdf'
var pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 0.8,
canvas = document.getElementById("the-canvas"),
ctx = canvas.getContext("2d");
/**
* Get page info from document, resize canvas accordingly, and render page.
* @param num Page number.
*/
function renderPage(num)
pageRendering = true;
pdfDoc.getPage(num).then(function (page)
var viewport = page.getViewport(scale: scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext =
canvasContext: ctx,
viewport: viewport,
;
var renderTask = page.render(renderContext);
renderTask.promise.then(function ()
pageRendering = false;
if (pageNumPending !== null)
renderPage(pageNumPending);
pageNumPending = null;
);
);
document.getElementById("pageCount").innerHTML = num;
function queueRenderPage(num)
if (pageRendering)
pageNumPending = num;
else
renderPage(num);
function onPrevPage()
if (pageNum <= 1)
return;
pageNum--;
queueRenderPage(pageNum);
document.getElementById("prev").addEventListener("click", onPrevPage);
function onNextPage()
if (pageNum >= pdfDoc.numPages)
return;
pageNum++;
queueRenderPage(pageNum);
document.getElementById("next").addEventListener("click", onNextPage);
PDFJS.getDocument(pdfUrl).promise.then(function (pdfDoc_)
pdfDoc = pdfDoc_;
document.getElementById("pageCount").textContent = pdfDoc.numPages;
renderPage(pageNum);
);
</script>
</html>
3.3 使用pdfjs 库的 viewer.html 展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/pdfjs/build/pdf.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<iframe width="1024px" height="960px" frameborder="0" id="myiframe"></iframe>
</body>
<script>
$(function ()
// pdf 的资源文件地址
const pdfUrl = 'http://127.0.0.1:5501/lib/1.pdf'
// 访问 pdfjs 库的 viewer.html 文件，file参数值为 pdf 的访问地址
iframeUrl = `/lib/pdfjs/web/viewer.html?file=$encodeURIComponent(pdfUrl)`
$("#myiframe").attr('src', iframeUrl)
)
</script>
</html>
以上是关于pdfjs（2.13.216）浏览器展示pdf文件的主要内容，如果未能解决你的问题，请参考以下文章
vue+vite中直接打开pdf文件（插件pdfjs-dist）