Javascript网页设计案例：通过PDF.js实现一款PDF阅读器，包括预览、页面旋转、页面切换、放大缩小、黑夜模式等功能

前言

目前功能包括：

切换到首页。
切换到尾页。
上一页。
下一页。
添加标签。
标签管理
页面旋转
页面随意拖动
双击后还原位置

其实按照自己的预期来说，有很多功能还没有开发完，配色也没有全都搞完，先发出来吧，后期有需要继续添加功能。

功能预览

1.加载后的主页面

白天模式
在这里插入图片描述
黑夜模式

2.功能区

在这里插入图片描述

一、关于这款PDF阅读器的功能说明

1. 基本布局与样式

具有响应式设计，通过meta标签设置视口以适应不同设备宽度。
支持主题切换（明暗模式），定义了一系列CSS变量来管理颜色和布局相关属性，方便切换不同主题风格。

2. 工具栏功能

导航功能：包含首页、上一页、下一页、末页的导航按钮，对应firstPage()、prevPage()、nextPage()、lastPage()函数。
缩放功能：有缩小、放大按钮，分别对应zoomOut()和zoomIn()函数，还提供了一个范围输入控件#zoomControl用于更精确地控制缩放比例。
旋转功能：顺时针旋转和逆时针旋转按钮，对应rotateClockwise()和rotateCounterClockwise()函数。
书签功能：可以输入书签名称，点击添加书签按钮（addBookmark()函数）添加书签，还有书签管理按钮（toggleBookmarkPanel()函数）用于管理已添加的书签。
主题切换：有一个主题切换按钮（toggleTheme()函数），点击可切换明暗主题。

3. 侧边栏与缩略图

侧边栏（.sidebar）用于显示PDF文档的缩略图，缩略图容器为#thumbnails，每个缩略图项（.thumbnail-item）包含一个canvas元素用于显示缩略图，点击缩略图项可进行相关操作。

4. 主内容区域

主内容区域（.main-content）包含PDF文档的显示区域（#pdf-container），其中有一个canvas元素（#pdf-canvas）用于渲染PDF页面，用户可以通过鼠标抓取操作（cursor: -webkit-grab）进行交互。
状态栏（.status-bar）用于显示一些状态信息，如页码等。

5. 模态窗口

书签管理模态窗口（#bookmarks-modal），默认隐藏，用于管理已添加的书签，包含书签列表（#bookmarks-list）和一些操作按钮（.modal-buttons）。

二、Html代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"><title>PDF阅读器</title><style>:root {--primary-color: #2196F3;--hover-color: #1976D2;--background-color: #1a1a1a;--surface-color: #2d2d2d;--toolbar-bg: #333333;--text-color: #ffffff;--error-color: #ff4444;--border-radius: 8px;--gap: 20px;--toolbar-height: 60px;}body {font-family: Arial, sans-serif;margin: 0;padding: 20px;background-color: var(--background-color);color: var(--text-color);box-sizing: border-box;}.pdf-reader-container {display: flex;gap: var(--gap);max-width: 100%;min-width: 800px;margin: 0 auto;background-color: var(--surface-color);border-radius: var(--border-radius);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);padding: var(--gap) ; /* 0 上下内边距 */margin-top: var(--toolbar-height);box-sizing: border-box;flex-wrap: nowrap;}.toolbar {position: fixed;top: 0;left: 0;right: 0;height: var(--toolbar-height);display: flex;align-items: center;justify-content: space-between;padding: 0 var(--gap);background-color: var(--toolbar-bg);border-radius: 0 0 var(--border-radius) var(--border-radius);box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);z-index: 1000;box-sizing: border-box;}.logo {display: flex;align-items: center;padding: 0 20px;height: 60%;}.logo img {height: 100%;object-fit: contain; transition: transform 0.3s ease; }.toolbar-buttons {display: flex;gap: 10px;}/* 修改按钮样式部分 */button {padding: 8px 12px;font-size: 16px;cursor: pointer;background-color: var(--primary-color);color: var(--text-color);border: none;border-radius: 50%;aspect-ratio: 1/1;transition: all 0.3s ease;display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;position: relative;}button:hover {background-color: var(--hover-color);transform: translateY(-2px);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}button::before {font-family: "Font Awesome 5 Free";font-weight: 900;}/* 为每个按钮指定图标 */button:nth-child(1)::before { content: "\f100"; } /* 首页 */button:nth-child(2)::before { content: "\f104"; } /* 上一页 */button:nth-child(3)::before { content: "\f105"; } /* 下一页 */button:nth-child(4)::before { content: "\f101"; } /* 末页 */button:nth-child(5)::before { content: "\f068"; } /* 缩小 */button:nth-child(7)::before { content: "\f067"; } /* 放大 */button:nth-child(8)::before { content: "\f2f9"; } /* 顺时针旋转 */button:nth-child(9)::before { content: "\f2ea"; } /* 逆时针旋转 */button:nth-child(11)::before { content: "\f02e"; } /* 添加书签 */button:nth-child(12)::before { content: "\f02e"; } /* 书签管理 */button span {display: none;}.toolbar-buttons {display: flex;gap: 8px;align-items: center;}#zoomControl {width: 100px;height: 6px;background: var(--surface-color);border-radius: 3px;}#bookmarkLabel {padding: 8px;border-radius: var(--border-radius);border: 1px solid var(--primary-color);background: var(--surface-color);color: var(--text-color);}button::after {content: attr(aria-label);position: absolute;bottom: -30px;left: 50%;transform: translateX(-50%);background: var(--toolbar-bg);color: var(--text-color);padding: 4px 8px;border-radius: 4px;font-size: 12px;white-space: nowrap;opacity: 0;transition: opacity 0.2s;pointer-events: none;}button:hover::after {opacity: 1;}::-webkit-scrollbar {width: 8px;}::-webkit-scrollbar-track {background-color: var(--toolbar-bg);border-radius: 4px;}::-webkit-scrollbar-thumb {background-color: var(--primary-color);border-radius: 4px;}::-webkit-scrollbar-thumb:hover {background-color: var(--hover-color);}/* 侧边栏样式 */.sidebar {flex: 0 0 250px;background-color: var(--toolbar-bg);border-radius: var(--border-radius);padding: 16px;height: calc(100vh - var(--toolbar-height) - var(--gap)*2 - 40px);overflow-y: auto;box-sizing: border-box;}.thumbnail-container {display: flex;flex-direction: column;gap: 10px;}.thumbnail-item {position: relative;cursor: pointer;border-radius: 4px;overflow: hidden;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}.thumbnail-item canvas {width: 100%;height: auto;}.thumbnail-item.active  {border: 2px solid var(--primary-color);}.main-content {flex: 1;background-color: var(--surface-color);border-radius: var(--border-radius);/* padding: 16px; */height: calc(100vh - var(--toolbar-height) - var(--gap)*2 - 40px);box-sizing: border-box;}#pdf-container {width: 100%;height: 96%;/* height: calc(100vh - var(--toolbar-height) - var(--gap)*2 - 80px - 40px); */border: 1px solid var(--toolbar-bg);border-radius: var(--border-radius);overflow: auto;background-color: #333333;/* padding: 16px; */box-sizing: border-box;overflow-x: hidden;}.status-bar {height: 4%;font-size: 14px;color: var(--text-color);/* padding: 5px; */background-color: var(--toolbar-bg);border-radius: var(--border-radius);margin-top: auto;}.error-message {color: var(--error-color);padding: 10px;margin-top: 10px;background-color: #4d4d4d;border-radius: var(--border-radius);}/* 模态窗口样式 */.modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 1000;transition: opacity 0.3s ease;}.modal-content {background-color: var(--toolbar-bg);margin: 15% auto;padding: 20px;width: 80%;max-width: 500px;position: relative;border-radius: var(--border-radius);}.close {position: absolute;right: 20px;top: 10px;font-size: 28px;cursor: pointer;color: var(--text-color);}.close:hover {color: var(--primary-color);}#bookmarks-list {list-style-type: none;padding: 0;margin: 0;}#bookmarks-list li {padding: 8px;margin: 4px 0;cursor: pointer;border-radius: 4px;}#bookmarks-list li:hover {background-color: var(--primary-color);color: var(--text-color);}.modal-buttons {margin-top: 20px;}.modal-buttons button {margin: 0 5px;}canvas#pdf-canvas {position: relative;cursor: -webkit-grab;}.theme-toggle {position: relative;display: inline-block;}.light-theme {--background-color: #f9fafb; --surface-color: #ffffff;--toolbar-bg: #e5e7eb; --text-color: #374151;--error-color: #ef4444;--primary-color: #3b82f6;--hover-color: #2563eb; }.light-theme .toolbar {background-color: var(--toolbar-bg);}.light-theme .sidebar {background-color: var(--toolbar-bg);}.light-theme .main-content {background-color: var(--surface-color);}.light-theme button {background-color: var(--primary-color);color: var(--text-color);}.light-theme .status-bar {background-color: var(--toolbar-bg);}</style>
</head>
<body><div class="toolbar"><div class="logo"><img src="logo.png"  alt="Logo"></div><div class="toolbar-buttons"><button onclick="firstPage()" aria-label="首页"><span>首页</span></button><button onclick="prevPage()" aria-label="上一页"><span>上一页</span></button><button onclick="nextPage()" aria-label="下一页"><span>下一页</span></button><button onclick="lastPage()" aria-label="末页"><span>末页</span></button><button onclick="zoomOut()" aria-label="缩小"><span>缩小</span></button><input type="range" min="0.5" max="2.0" step="0.1" value="1.0" id="zoomControl"><button onclick="zoomIn()" aria-label="放大"><span>放大</span></button><button onclick="rotateClockwise()" aria-label="顺时针旋转"><span>顺时针旋转</span></button><button onclick="rotateCounterClockwise()" aria-label="逆时针旋转"><span>逆时针旋转</span></button><input type="text" id="bookmarkLabel" placeholder="输入书签名称"><button onclick="addBookmark()" aria-label="添加书签"><span>添加书签</span></button><button onclick="toggleBookmarkPanel()" aria-label="书签管理"><span>书签管理</span></button><button onclick="toggleTheme()" aria-label="切换主题" class="theme-toggle"><i class="fas fa-moon"></i></button></div></div><div class="pdf-reader-container"><div class="sidebar"><div class="thumbnail-container" id="thumbnails"></div></div><div class="main-content"><div id="pdf-container"><canvas id="pdf-canvas"></canvas></div><div class="status-bar" id="status-bar"></div></div></div><div id="bookmarks-modal" class="modal" style="display: none;"><div class="modal-content"><span class="close" onclick="closeBookmarkPanel()">&times;</span><h3>书签管理</h3><ul id="bookmarks-list"></ul><div class="modal-buttons"><button onclick="addBookmark()">添加书签</button><button onclick="clearBookmarks()">清除书签</button><button onclick="closeBookmarkPanel()">关闭</button></div></div></div><script src="pdf.min.js"></script> <script src="pdf-reader.js"></script> 
</body>
</html>

三、Javascript代码

let doc = null;
let currentPage = 1;
let scale = 1.5;
let rotation = 0;
let bookmarks = [];
let isDragging = false;
let lastX = 0;
let lastY = 0;
let offsetX = 0;
let offsetY = 0;let thumbnails = [];const thumbnailsContainer = document.getElementById('thumbnails'); const bookmarksList = document.getElementById('bookmarks-list'); 
const bookmarksPanel = document.getElementById('bookmarks-panel'); const container = document.getElementById('pdf-container'); // 新增变量用于存储当前视口的偏移量
let viewportOffsetX = 0;
let viewportOffsetY = 0;// 在window.onload 中添加键盘事件监听
window.addEventListener('keydown',  function(e) {if (e.key  === 'ArrowLeft') {prevPage();} else if (e.key  === 'ArrowRight') {nextPage();}
});// 初始化滚动条 
const zoomControl = document.getElementById('zoomControl'); 
zoomControl.value  = scale.toString(); // 初始化旋转状态 
const savedRotation = localStorage.getItem('pdfRotation'); 
if (savedRotation !== null) {rotation = parseInt(savedRotation);
}// 加载PDF文件 
function loadPDF(fileUrl) {pdfjsLib.getDocument(fileUrl).promise.then(function  (loadedDoc) {doc = loadedDoc;const numPages = doc.numPages; loadPage(currentPage);createThumbnails(numPages);// 更新状态栏 document.getElementById('status-bar').textContent  =`第 ${currentPage} 页 / 共 ${numPages} 页 | 缩放比例: ${scale * 100}% | 旋转: ${rotation}°`;}).catch(function (error) {console.error('Error  loading PDF:', error);showError(`加载PDF时出错：${error.message}`); });
}// 创建缩略图
function createThumbnails(numPages) {thumbnailsContainer.innerHTML  = '';for (let i = 1; i <= numPages; i++) {const thumbnailItem = document.createElement('div'); thumbnailItem.className  = 'thumbnail-item';thumbnailItem.dataset.page  = i;const canvas = document.createElement('canvas'); thumbnailItem.appendChild(canvas); thumbnailsContainer.appendChild(thumbnailItem); loadThumbnail(i, canvas);thumbnailItem.addEventListener('click',  function() {currentPage = i;loadPage(currentPage);updateThumbnailsActiveState();});}
}// 更新缩略图活动状态
function updateThumbnailsActiveState() {const items = thumbnailsContainer.querySelectorAll('.thumbnail-item'); items.forEach(item  => {item.classList.remove('active'); });const currentItem = thumbnailsContainer.querySelector(`[data-page="${currentPage}"]`); if (currentItem) {currentItem.classList.add('active'); }
}// 加载指定页面 
// 修改loadPage函数
function loadPage(pageNum) {if (!doc) {showError('未加载PDF文件，请检查文件路径。');return;}doc.getPage(pageNum).then(function  (page) {while (container.firstChild)  {container.removeChild(container.firstChild); }const defaultViewport = page.getViewport({  scale: scale });const containerWidth = container.clientWidth; const containerHeight = container.clientHeight; const newScale = Math.min( containerWidth / defaultViewport.width, containerHeight / defaultViewport.height );const finalScale = Math.max(0.5,  Math.min(2.0,  newScale));const viewport = page.getViewport({ scale: scale,rotation: rotation});const canvas = document.createElement('canvas'); canvas.id  = 'pdf-canvas';container.appendChild(canvas); adjustCanvasSize(canvas, viewport);const context = canvas.getContext('2d'); if (!context) {showError('无法获取Canvas上下文，请检查浏览器支持。');return;}page.render({ canvasContext: context,viewport: viewport}).promise.then(()  => {console.log('Page  rendered successfully');hideError();// 初始化偏移量viewportOffsetX = (container.clientWidth - canvas.width) / 2;viewportOffsetY = 0;updateCanvasPosition();}).catch(error => {console.error('Error  rendering page:', error);showError(`渲染页面时出错：${error.message}`); });document.getElementById('status-bar').textContent  =`第 ${pageNum} 页 / 共 ${doc.numPages}  页 | 缩放比例: ${Number(scale.toFixed(1))  * 100}% | 旋转: ${rotation}°`;}).catch(error => {console.error('Error  getting page:', error);showError(`获取页面时出错：${error.message}`); });}// 调整Canvas尺寸以适应页面内容 
function adjustCanvasSize(canvas, viewport) {canvas.width  = viewport.width; canvas.height  = viewport.height; const containerRect = container.getBoundingClientRect(); const canvasRect = canvas.getBoundingClientRect(); canvas.style.left  = `${(containerRect.width  - canvasRect.width)  / 2}px`;canvas.style.top  = `${(containerRect.height  - canvasRect.height)  / 2}px`;
}// 修改导航函数
function firstPage() {currentPage = 1;loadPage(currentPage);
}function prevPage() {currentPage = Math.max(1,  currentPage - 1);loadPage(currentPage);
}function nextPage() {currentPage = Math.min(doc.numPages,  currentPage + 1);loadPage(currentPage);
}function lastPage() {currentPage = doc.numPages; loadPage(currentPage);
}// 缩放功能 
function zoomIn() {scale = Math.min(2.0,  scale + 0.1);zoomControl.value  = scale.toString(); updateZoomButtons();loadPage(currentPage);
}function zoomOut() {scale = Math.max(0.5,  scale - 0.1);zoomControl.value  = scale.toString(); updateZoomButtons();loadPage(currentPage);
}// 错误提示功能 
function showError(message) {const errorDiv = document.createElement('div'); errorDiv.className  = 'error-message';errorDiv.textContent  = message;document.body.appendChild(errorDiv); 
}function hideError() {const errorDiv = document.querySelector('.error-message'); if (errorDiv) {errorDiv.remove(); }
}// 旋转功能 
function rotateClockwise() {rotation += 90;if (rotation >= 360) rotation = 0;localStorage.setItem('pdfRotation',  rotation);loadPage(currentPage);
}function rotateCounterClockwise() {rotation -= 90;if (rotation < 0) rotation += 360;localStorage.setItem('pdfRotation',  rotation);loadPage(currentPage);
}// 初始化PDF阅读器 
window.onload  = function () {const fileUrl = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'; loadPDF(fileUrl);// 恢复旋转状态 if (savedRotation !== null) {rotation = parseInt(savedRotation);loadPage(currentPage);}// 加载保存的书签 loadSavedBookmarks();// 新增事件监听const PDF = document.getElementById('pdf-container'); console.log(PDF);PDF.addEventListener('mousedown',  startDrag);PDF.addEventListener('mousemove',  drag);PDF.addEventListener('mouseup',  stopDrag);PDF.addEventListener('wheel',  zoomWithWheel);PDF.addEventListener('dblclick',  resetPosition);const currentTheme = localStorage.getItem('theme')  || 'dark';if (currentTheme === 'light') {document.body.classList.add('light-theme'); }};// 新增拖拽功能
function startDrag(e) {if (e.button  === 0) { // 左键点击isDragging = true;lastX = e.clientX; lastY = e.clientY; }
}// 双击还原
function resetPosition(e) {canvas = document.getElementById("pdf-canvas");viewportOffsetX = (container.clientWidth - canvas.width) / 2;viewportOffsetY = 0;updateCanvasPosition();
}function drag(e) {if (isDragging) {const deltaX = e.clientX  - lastX;const deltaY = e.clientY  - lastY;// 更新偏移量viewportOffsetX += deltaX;viewportOffsetY += deltaY;// 限制偏移范围const canvas = document.getElementById('pdf-canvas'); // 更新canvas位置updateCanvasPosition();lastX = e.clientX; lastY = e.clientY; }
}function stopDrag() {isDragging = false;
}// 新增滚轮缩放功能
function zoomWithWheel(e) {e.preventDefault(); const delta = e.deltaY; if (delta > 0) {zoomOut();} else {zoomIn();}
}// 更新canvas位置
function updateCanvasPosition() {const canvas = document.getElementById('pdf-canvas'); if (canvas) {canvas.style.left  = `${viewportOffsetX}px`;canvas.style.top  = `${viewportOffsetY}px`;}
}/*** 更新缩放按钮的显示 */
function updateZoomButtons() {const buttons = document.querySelectorAll('button'); buttons.forEach(button  => {if (button.onclick  === zoomIn) {button.textContent  = `放大 (${scale.toFixed(1)})`; } else if (button.onclick  === zoomOut) {button.textContent  = `缩小 (${scale.toFixed(1)})`; }});
}/*** 处理滚动条输入事件 */
zoomControl.addEventListener('input',  function (e) {const inputValue = parseFloat(e.target.value); // 反向计算 scale 值 scale = inputValue - 0.1;updateZoomButtons();// 使用节流处理以优化性能 throttledLoadPage(currentPage);
});/*** 节流函数 * @param {function} func 目标函数 * @param {number} wait 延迟时间（毫秒）* @returns {function} 节流后的函数 */
function throttle(func, wait) {let timeout;return function (...args) {if (!timeout) {func.apply(this,  args);timeout = setTimeout(() => {timeout = null;}, wait);}};
}// 对 loadPage 进行节流处理 
const throttledLoadPage = throttle(loadPage, 100);// 监听窗口调整大小事件 
window.addEventListener('resize',  function () {if (doc && currentPage) {loadPage(currentPage);}
});// 切换书签面板显示状态 
function toggleBookmarkPanel() {const isHidden = bookmarksPanel.style.display  === 'none';bookmarksPanel.style.display  = isHidden ? 'block' : 'none';if (isHidden) {loadBookmarks();}
}// 关闭书签面板 
function closeBookmarkPanel() {bookmarksPanel.style.display  = 'none';
}// 添加当前页面为书签 
function addBookmark() {const bookmarkLabel = document.getElementById('bookmarkLabel').value.trim(); if (!bookmarkLabel) {showError('请输入书签名称');return;}const bookmark = {page: currentPage,scale: scale,label: bookmarkLabel };bookmarks.push(bookmark); saveBookmarks();loadBookmarks();document.getElementById('bookmarkLabel').value  = ''; // 清空输入框 
}// 加载并显示所有书签 
function loadBookmarks() {const bookmarksList = document.getElementById('bookmarks-list'); bookmarksList.innerHTML  = '';bookmarks.forEach((bookmark,  index) => {const li = document.createElement('li'); li.innerHTML  = `<span>${bookmark.label}</span> <button onclick="jumpToBookmark(${index})">跳转</button><button onclick="deleteBookmark(${index})">删除</button>`;li.style.backgroundColor  = '#4CAF50';li.style.color  = 'white';li.style.padding  = '8px';li.style.margin  = '4px 0';li.style.borderRadius  = '4px';bookmarksList.appendChild(li); });
}// 删除指定索引的书签 
function deleteBookmark(index) {bookmarks.splice(index,  1);saveBookmarks();loadBookmarks();
}// 清除所有书签 
function clearBookmarks() {bookmarks = [];saveBookmarks();loadBookmarks();
}// 跳转到指定书签 
function jumpToBookmark(index) {const bookmark = bookmarks[index];currentPage = bookmark.page; scale = bookmark.scale; loadPage(currentPage);
}// 保存书签到 localStorage 
function saveBookmarks() {localStorage.setItem('pdfBookmarks',  JSON.stringify(bookmarks)); 
}// 加载保存的书签 
function loadSavedBookmarks() {const saved = localStorage.getItem('pdfBookmarks'); if (saved) {bookmarks = JSON.parse(saved); loadBookmarks();}
}function toggleBookmarkPanel() {const modal = document.getElementById('bookmarks-modal'); modal.style.display  = 'block';loadBookmarks();
}function closeBookmarkPanel() {const modal = document.getElementById('bookmarks-modal'); modal.style.display  = 'none';
}// 加载缩略图
function loadThumbnail(pageNum, canvas) {doc.getPage(pageNum).then(function  (page) {const viewport = page.getViewport({  scale: 0.5 });canvas.width  = viewport.width; canvas.height  = viewport.height; const context = canvas.getContext('2d'); if (!context) return;page.render({ canvasContext: context,viewport: viewport}).promise.then(()  => {if (pageNum === currentPage) {thumbnailItem.classList.add('active'); }});});
}function toggleTheme() {document.body.classList.toggle('light-theme'); const root = document.documentElement; root.style.setProperty('--background-color',  document.body.classList.contains('light-theme')  ? '#f5f5f5' : '#1a1a1a');root.style.setProperty('--surface-color',  document.body.classList.contains('light-theme')  ? '#ffffff' : '#2d2d2d');root.style.setProperty('--toolbar-bg',  document.body.classList.contains('light-theme')  ? '#f0f0f0' : '#333333');root.style.setProperty('--text-color',  document.body.classList.contains('light-theme')  ? '#333333' : '#ffffff');root.style.setProperty('--error-color',  document.body.classList.contains('light-theme')  ? '#cc0000' : '#ff4444');}