<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王作伟_2026作品集</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: #f5f5f5; }
#pdf-container { width: 100%; height: 100vh; }
</style>
<!-- 引入PDF.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>
pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
</script>
</head>
<body>
<div id="pdf-container"></div>
<script>
// 替换成你的PDF文件名！
const pdfUrl = "王作伟_2026作品集.pdf";
const container = document.getElementById("pdf-container");
let pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 1.5; // 缩放比例，可调整
// 渲染单页
function renderPage(num) {
pageRendering = true;
pdfDoc.getPage(num).then(function(page) {
const viewport = page.getViewport({ scale: scale });
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.height = viewport.height;
canvas.width = viewport.width;
container.innerHTML = "";
container.appendChild(canvas);
const renderContext = {
canvasContext: ctx,
viewport: viewport
};
const renderTask = page.render(renderContext);
renderTask.promise.then(function() {
pageRendering = false;
if (pageNumPending !== null) {
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
}
// 加载PDF
pdfjsLib.getDocument(pdfUrl).promise.then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
renderPage(pageNum);
// 滚轮翻页
container.addEventListener("wheel", function(e) {
if (e.deltaY > 0 && pageNum < pdfDoc.numPages) {
pageNum++;
renderPage(pageNum);
} else if (e.deltaY < 0 && pageNum > 1) {
pageNum--;
renderPage(pageNum);
}
e.preventDefault();
});
// 左右方向键翻页
document.addEventListener("keydown", function(e) {
if (e.key === "ArrowRight" && pageNum < pdfDoc.numPages) {
pageNum++;
renderPage(pageNum);
} else if (e.key === "ArrowLeft" && pageNum > 1) {
pageNum--;
renderPage(pageNum);
}
});
});
</script>
</body>
</html>