PDF.js是一个JavaScript库，可以在现代Web浏览器中渲染和显示PDF文件。它的主要作用是将PDF文件转换为HTML5格式，以便在浏览器上进行展示和交互。
PDF.js的主要功能包括：
总的来说，PDF.js提供了一种在Web浏览器中展示和操作PDF文件的解决方案，使用户能够直接在浏览器中浏览和使用PDF，而无需依赖外部的PDF阅读器插件或专门的PDF编辑工具。
官网
https://mozilla.github.io/pdf.js/
简单显示案例
<!DOCTYPE html>
<html>
<head>
<title>PDF.js Example</title>
<style>
#pdf-container {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id="pdf-container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.js"></script>
<script>
// 指定工作线程脚本的路径
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.js';
// 获取容器元素
var container = document.getElementById('pdf-container');
// 加载PDF文档
pdfjsLib.getDocument('./2.pdf').promise.then(function(pdf) {
// 获取第一页
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport({ scale: scale });
// 创建一个<canvas>元素用于显示PDF页面
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = viewport.width;
canvas.height = viewport.height;
// 将PDF页面渲染到<canvas>元素中
page.render({
canvasContext: context,
viewport: viewport
});
// 将<canvas>元素添加到容器中
container.appendChild(canvas);
});
});
</script>
</body>
</html>
这段代码是使用PDF.js库在浏览器中显示PDF文件的示例。如果你想要修改代码以实现一些功能，可以参考以下示例修改：
var currentPage = 1;
function renderPage(pageNumber) {
container.innerHTML = ''; // 清空容器
pdf.getPage(pageNumber).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport({ scale: scale });
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = viewport.width;
canvas.height = viewport.height;
page.render({
canvasContext: context,
viewport: viewport
});
container.appendChild(canvas);
currentPage = pageNumber;
});
}
// 监听翻页按钮点击事件
document.getElementById('prev-btn').addEventListener('click', function() {
if (currentPage > 1) {
renderPage(currentPage - 1);
}
});
document.getElementById('next-btn').addEventListener('click', function() {
if (currentPage < pdf.numPages) {
renderPage(currentPage + 1);
}
});
在HTML中添加两个按钮：
<button id="prev-btn">Previous</button>
<button id="next-btn">Next</button>
这样就可以通过点击按钮来翻页了。
function search(text) {
var searchParams = {
query: text,
highlightAll: true
};
pdf.getPage(currentPage).then(function(page) {
return page.getTextContent();
}).then(function(textContent) {
pdfjsLib.renderTextLayer({
textContent: textContent,
container: container,
viewport: page.getViewport({ scale: scale }),
textDivs: []
}, searchParams);
});
}
// 监听搜索表单提交事件
document.getElementById('search-form').addEventListener('submit', function(event) {
event.preventDefault();
var searchText = document.getElementById('search-input').value;
search(searchText);
});
在HTML中添加搜索表单：
<form id="search-form">
<input id="search-input" type="text" placeholder="Search">
<button type="submit">Search</button>
</form>
这样就可以在表单中输入关键字进行文本搜索了。
请注意，以上只是示例代码，实际实现中可能需要根据具体需求进行调整和完善。同时，需要确保PDF.js和相关依赖的正确引入，以及正确指定PDF文件的路径和文件名。