PDF 阅读与注释工具（基础版）

1️⃣ 项目结构

pdf_annotator/

│

├─ app.py # Flask 后端

├─ templates/

│ └─ index.html # 前端页面

├─ static/

│ ├─ pdf.js # PDF.js 库（下载自 https://mozilla.github.io/pdf.js/）

│ └─ style.css

└─ uploads/ # 存放上传的 PDF

2️⃣ Flask 后端 app.py

from flask import Flask, render_template, request, send_from_directory, jsonify

import os

from werkzeug.utils import secure_filename

UPLOAD_FOLDER = 'uploads'

ALLOWED_EXTENSIONS = {'pdf'}

app = Flask(__name__)

app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

os.makedirs(UPLOAD_FOLDER, exist_ok=True)

def allowed_file(filename):

return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

# 首页

@app.route('/')

def index():

return render_template('index.html')

# 上传 PDF

@app.route('/upload', methods=['POST'])

def upload():

if 'file' not in request.files:

return jsonify({'error': 'No file part'}), 400

file = request.files['file']

if file.filename == '':

return jsonify({'error': 'No selected file'}), 400

if file and allowed_file(file.filename):

filename = secure_filename(file.filename)

filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)

file.save(filepath)

return jsonify({'filename': filename})

return jsonify({'error': 'Invalid file type'}), 400

# 获取 PDF 文件

@app.route('/uploads/<filename>')

def uploaded_file(filename):

return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

if __name__ == "__main__":

app.run(debug=True)

3️⃣ 前端页面 templates/index.html

<!DOCTYPE html>

<html>

<head>

<title>PDF 阅读与注释工具</title>

</head>

<body>

<h1>PDF 阅读与注释工具</h1>

<div id="drop_zone">拖拽 PDF 到这里上传</div>

const dropZone = document.getElementById('drop_zone');

const fileInput = document.getElementById('file_input');

const canvas = document.getElementById('pdf_canvas');

const ctx = canvas.getContext('2d');

function renderPDF(url) {

const loadingTask = pdfjsLib.getDocument(url);

loadingTask.promise.then(pdf => {

pdf.getPage(1).then(page => {

const viewport = page.getViewport({ scale: 1.5 });

canvas.width = viewport.width;

canvas.height = viewport.height;

const renderContext = {

canvasContext: ctx,

viewport: viewport

};

page.render(renderContext);

});

}

// 拖拽上传

dropZone.addEventListener('dragover', (e) => {

e.preventDefault();

dropZone.style.background = '#e0e0e0';

});

dropZone.addEventListener('dragleave', () => {

dropZone.style.background = '#f8f8f8';

});

dropZone.addEventListener('drop', (e) => {

e.preventDefault();

dropZone.style.background = '#f8f8f8';

const file = e.dataTransfer.files[0];

uploadFile(file);

});

dropZone.addEventListener('click', () => fileInput.click());

fileInput.addEventListener('change', () => {

const file = fileInput.files[0];

uploadFile(file);

});

function uploadFile(file) {

if (file.type !== 'application/pdf') {

alert('只支持 PDF 文件');

return;

}

const formData = new FormData();

formData.append('file', file);

fetch('/upload', { method: 'POST', body: formData })

.then(res => res.json())

.then(data => {

if(data.filename){

const url = '/uploads/' + data.filename;

renderPDF(url);

} else {

alert(data.error);

}

});

}

// 简单注释示例：点击 canvas 添加标记

canvas.addEventListener('click', (e) => {

const rect = canvas.getBoundingClientRect();

const x = e.clientX - rect.left;

const y = e.clientY - rect.top;

ctx.fillStyle = 'red';

ctx.beginPath();

ctx.arc(x, y, 5, 0, Math.PI*2);

ctx.fill();

});

</script>

</body>

</html>

4️⃣ 样式 static/style.css

body {

font-family: Arial, sans-serif;

text-align: center;

margin: 20px;

}

#drop_zone {

border: 2px dashed #aaa;

padding: 40px;

margin-bottom: 20px;

cursor: pointer;

background: #f8f8f8;

}

canvas {

border: 1px solid #ccc;

margin-top: 20px;

}

🔹 功能说明

拖拽或点击上传 PDF

显示 PDF（默认只显示第一页，可扩展多页）

简单注释功能：点击添加红色圆点标记

可扩展：

多页翻页

文字高亮

保存注释到服务器

支持不同颜色、笔刷大小

ITPub博客

python实现一个 PDF 阅读与注释工具（支持拖拽）。

最新文章