1、简介
使用 pdf.js 库加载和显示 PDF 文件。
实现了翻页、缩放功能。
提供了基本的错误处理。
功能特点：
支持选择本地 PDF 文件。
可以逐页查看 PDF 内容。
支持放大缩小功能。
界面简洁，易于使用。
2、使用方法
PDF 阅读器@编码小哥
PDF 阅读器
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.min.js"></script>
<script>
let pdfDoc = null;
let currentPage = 1;
let scale = 1; // 初始缩放比例
// 加载 PDF 文件
document.getElementById('pdfInput').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
loadPdf(e.target.result);
};
reader.readAsArrayBuffer(file);
}
});
// 加载 PDF 内容
async function loadPdf(arrayBuffer) {
try {
pdfDoc = await pdfjsLib.getDocument(arrayBuffer).promise;
displayPage(currentPage);
} catch (error) {
console.error('无法加载 PDF 文件:', error);
}
}
// 显示指定页码的内容
async function displayPage(pageNum) {
const page = await pdfDoc.getPage(pageNum);
const viewport = page.getViewport({ scale: scale });
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = viewport.width;
canvas.height = viewport.height;
// 渲染页面
await page.render({
canvasContext: ctx,
viewport: viewport
});
// 清除之前的 PDF 内容并添加新的
const pdfContainer = document.getElementById('pdfContainer');
pdfContainer.innerHTML = '';
pdfContainer.appendChild(canvas);
}
// 上一页
function previousPage() {
if (currentPage > 1) {
currentPage--;
displayPage(currentPage);
}
}
// 下一页
function nextPage() {
if (currentPage < pdfdoc.numpages currentpage displaypagecurrentpage function zoomin scale if scale> 2) { // 设置最大缩放比例
scale = 2;
}
displayPage(currentPage);
}
// 缩小
function zoomOut() {
scale -= 0.2;
if (scale < 0.1) {
scale = 0.1;
}
displayPage(currentPage);
}
</script>
将上述代码保存为一个 HTML 文件（例如 pdf-reader.html）。
打开浏览器，加载该文件。
选择 PDF 文件进行查看。
使用控制按钮进行翻页和缩放操作。