pdfjs库使用3
.App {
text-align: center;
height: 100vh;
display: flex;
flex-direction: column;
background-color: #f5f5f5;
}
/* PDF 查看器容器样式 */
.pdf-viewer {
flex: 1;
padding: 20px;
max-width: 100%;
margin: 0 auto;
box-sizing: border-box;
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 控制按钮样式 */
.pdf-controls {
padding: 10px;
background-color: #fff;
border-bottom: 1px solid #eee;
position: sticky;
top: 0;
z-index: 100;
}
.pdf-controls button {
padding: 8px 16px;
margin: 0 10px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: white;
font-size: 14px;
cursor: pointer;
transition: background-color 0.2s;
}
.pdf-controls button:hover {
background-color: #0056b3;
}
.pdf-controls button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.pdf-controls span {
font-size: 14px;
color: #666;
}
/* PDF 内容容器样式 */
.pdf-container {
margin-top: 20px;
padding: 0 10px;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* 为 iOS 设备提供平滑滚动 */
}
/* Canvas 容器样式 */
canvas {
max-width: 100%;
height: auto;
margin: 0 auto;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* 移动设备适配 */
@media screen and (max-width: 768px) {
.pdf-viewer {
padding: 10px;
}
.pdf-controls {
padding: 8px;
}
.pdf-controls button {
padding: 6px 12px;
font-size: 12px;
}
.pdf-controls span {
font-size: 12px;
}
}
/* BlackBerry Access 浏览器特定优化 */
@supports (-webkit-touch-callout: none) {
.pdf-container {
/* 防止 iOS 设备上的橡皮筋效果 */
overscroll-behavior: none;
}
/* 优化触摸响应 */
.pdf-controls button {
min-height: 44px; /* 确保触摸目标足够大 */
touch-action: manipulation; /* 优化触摸事件 */
}
}
/* 加载状态样式 */
.loading {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
color: #666;
}
/* 错误状态样式 */
.error {
color: #dc3545;
padding: 20px;
text-align: center;
}
/* 页面计数器样式 */
.page-counter {
margin: 0 15px;
font-weight: 500;
}
/* 确保整个应用程序填充视口 */
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/* 滚动条样式优化 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}