Skip to content

G
GaoQuYingJiH5-ASD
Commit cde0f8f3 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add：pdfjs附件测试文件demo

parent 9cf2006f
Show whitespace changes
Inline Side-by-side
Showing with 214 additions and 0 deletions
src/_pdf_viewer.html 0 → 100644
View file @ cde0f8f3
<!DOCTYPE html>
<html>
<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, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewport-fit:cover">
<title>PDF预览Demo</title>
<!-- 引入pdf.js核心库（CDN方式） -->
<script src="https://unpkg.com/pdfjs-dist@2.16.105/build/pdf.min.js"></script>
<style>
/* 全局重置样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'PingFang SC', sans-serif; background: #f5f5f5; }
/* 主内容区 */
.main-content { padding: 0.3rem; }
/* 附件链接样式 */
.attachment-section {
background: #fff;
border-radius: 8px;
padding: 0.3rem;
margin-bottom: 0.3rem;
}
.attachment-title {
font-size: 0.32rem;
color: #333;
font-weight: 600;
margin-bottom: 0.2rem;
}
.attachment-link {
display: flex;
align-items: center;
gap: 0.15rem;
padding: 0.2rem;
background: #f8f9fa;
border-radius: 6px;
color: #1081E3;
font-size: 0.28rem;
cursor: pointer;
transition: background 0.2s;
}
.attachment-link:hover { background: #f0f2f5; }
/* PDF预览模态框 */
.pdf-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 9999;
padding: 0.5rem 0;
}
.pdf-container {
position: relative;
width: 90%;
height: 90%;
margin: 0 auto;
background: #fff;
border-radius: 8px;
overflow: auto; /* 长文档滚动支持 */
}
.pdf-controls {
position: absolute;
bottom: 0.2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 0.3rem;
color: #fff;
font-size: 0.3rem;
}
.control-btn {
padding: 0.1rem 0.3rem;
background: rgba(0, 0, 0, 0.6);
border-radius: 4px;
cursor: pointer;
}
.close-btn {
/* position: absolute;
top: -0.6rem;
right: 0;
color: #fff;
font-size: 0.6rem;
cursor: pointer; */
position: absolute;
top: 0.4rem;
right: 6px;
color: #211a1a;
font-size: 0.6rem;
cursor: pointer;
width: 1rem;
height: 1rem;
z-index: 99999;
background: #000;
}
</style>
</head>
<body>
<div class="main-content">
<!-- 附件入口 -->
<div class="attachment-section">
<h3 class="attachment-title">相关附件</h3>
<!-- 点击触发PDF预览 -->
<div class="attachment-link" onclick="previewPdf()">
<van-icon name="paperclip" size="0.32rem" />
<span>危险化学品存储规范.pdf</span>
</div>
</div>
</div>
<!-- PDF预览模态框 -->
<div class="pdf-modal" id="pdfModal">
<!-- <div class="control-btn" onclick="closePreview()">关闭</div> -->
<div class="pdf-container" style="padding-top: 1rem;">
<div id="pdfViewer"></div> <!-- PDF内容渲染区 -->
<div class="pdf-controls">
<div class="control-btn" onclick="prevPage()">上一页</div>
<span>第 <span id="currentPage">1</span> 页 / 共 <span id="totalPages">1</span> 页</span>
<div class="control-btn" onclick="nextPage()">下一页</div>
</div>
<van-icon name="cross" class="close-btn" onclick="closePreview()" />
</div>
</div>
<script>
// pdf.js核心配置（解决Worker跨域问题）
// 修改后
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://unpkg.com/pdfjs-dist@2.16.105/build/pdf.worker.min.js';
let pdfDoc = null; // PDF文档实例
let currentPageNum = 1; // 当前页码
// 预览PDF主函数
async function previewPdf(pdfUrl) {
pdfUrl = "http://192.168.2.11:8848/gaoquyingjih5-asd-jpaas/src/test/testPdf.pdf"
try {
// 1. 加载PDF文档（异步）
pdfDoc = await pdfjsLib.getDocument(pdfUrl).promise;
console.log(pdfDoc, 'pdfjsLib.getDocument')
const totalPages = pdfDoc.numPages;
// 2. 更新总页数显示
document.getElementById('totalPages').textContent = totalPages;
// 3. 渲染第一页
currentPageNum = 1;
await renderPage(currentPageNum);
// 4. 显示模态框
document.getElementById('pdfModal').style.display = 'block';
} catch (error) {
console.error('PDF加载失败:', error);
alert('PDF加载失败，请检查文件地址或网络');
}
}
// 渲染指定页码
async function renderPage(pageNum) {
const pdfViewer = document.getElementById('pdfViewer');
pdfViewer.innerHTML = ''; // 清空旧内容
// 获取指定页并渲染到canvas
const page = await pdfDoc.getPage(pageNum);
const viewport = page.getViewport({ scale: 1.2 }); // 调整缩放比例控制清晰度
// 创建canvas并设置尺寸
const canvas = document.createElement('canvas');
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.width = '100%'; // 自适应容器宽度
// 渲染到canvas
const context = canvas.getContext('2d');
await page.render({ canvasContext: context, viewport: viewport }).promise;
// 添加到DOM
pdfViewer.appendChild(canvas);
// 更新当前页码显示
document.getElementById('currentPage').textContent = pageNum;
}
// 上一页
function prevPage() {
if (pdfDoc && currentPageNum > 1) {
currentPageNum--;
renderPage(currentPageNum);
}
}
// 下一页
function nextPage() {
if (pdfDoc && currentPageNum < pdfDoc.numPages) {
currentPageNum++;
renderPage(currentPageNum);
}
}
// 关闭预览
function closePreview() {
alert('关闭')
document.getElementById('pdfModal').style.display = 'none';
pdfDoc = null; // 释放资源
currentPageNum = 1;
}
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment