前端使用PDF.js渲染pdf文件
项目地址 下载地址
将下载好的源码复制到项目文件中
在这里我使用的是flask框架，将pdfjs源码复制到 static/js目录下
# pdfjs项目目录
├── build/
│ ├── pdf.js
│ └── ...
├── web/
│ ├── viewer.css
│ ├── viewer.html
│ └── ...
└── LICENSE
在 templates目录下创建一个 index.heml，渲染 static/pdffiles目录下的pdf文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ pdf_name }}</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
overflow: hidden; /* 防止页面滚动 */
}
#pdf-container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden; /* 防止PDF溢出屏幕 */
}
#pdf-viewer {
border: none;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="pdf-container">
<iframe id="pdf-viewer" src="/static/js/pdfjs/web/viewer.html?file=/static/pdffiles/{{ pdf_name }}.pdf" title="webviewer"></iframe>
</div>
</body>
</html>
调用 viewer.html?file=渲染pdf文件。
评论区