feat: PDF对比用PDF.js渲染+滚动同步

2026-04-17 10:05:47 +08:00
2 changed files with 121 additions and 7 deletions
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -75,12 +75,21 @@ body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    height: 70vh;
 }
 .compare-panel {
    padding: 15px;
    border-radius: 5px;
    background-color: #f8f9fa;
    overflow-y: auto;
    height: 100%;
 }
 .compare-panel h5 {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
 }
 .compare-panel.original {
@@ -91,6 +100,27 @@ body {
    border-left: 4px solid var(--success-color);
 }
 .compare-panel iframe {
    width: 100%;
    height: calc(100% - 40px);
    border: none;
 }
 #pdfContainer {
    height: calc(100% - 40px);
    overflow-y: auto;
 }
 #pdfPages {
    padding: 10px;
 }
 .pdf-page-canvas {
    border: 1px solid #ddd;
    border-radius: 3px;
    background: white;
 }
 /* 会员卡片 */
 .pricing-card {
    transition: transform 0.3s ease;
--- a/templates/translation.html
+++ b/templates/translation.html
@@ -7,6 +7,7 @@
    <link rel="icon" href="/static/img/favicon.svg" type="image/svg+xml">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
 </head>
 <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
@@ -76,6 +77,9 @@
        }
        // 切换对比视图
        let syncScrollEnabled = true;
        let pdfDoc = null;
        document.getElementById('toggleCompare').addEventListener('click', async function() {
            showCompare = !showCompare;
@@ -84,29 +88,40 @@
                    const response = await fetch(`/api/compare/${translationId}`);
                    const result = await response.json();
-                    // 原文面板：如果有PDF URL用iframe显示，否则显示提取的文本
+                    // 原文面板：如果有PDF URL用PDF.js渲染，否则显示提取的文本
                    let originalHtml = '';
                    if (result.original_pdf_url) {
-                        originalHtml = `<iframe src="${result.original_pdf_url}" style="width:100%;height:500px;border:none;"></iframe>`;
+                        originalHtml = '<canvas id="pdfCanvas"></canvas><div id="pdfPages"></div>';
                    } else if (result.original && result.original.length > 0) {
-                        originalHtml = `<div style="white-space:pre-wrap;font-family:monospace;">${escapeHtml(result.original)}</div>`;
+                        originalHtml = `<div class="original-text" style="white-space:pre-wrap;font-family:monospace;">${escapeHtml(result.original)}</div>`;
                    } else {
                        originalHtml = '<div class="text-muted">原文内容未找到（可能PDF已被删除）</div>';
                    }
                    document.getElementById('resultContent').innerHTML = `
                        <div class="compare-container">
-                            <div class="compare-panel original">
+                            <div class="compare-panel original" id="originalPanel">
                                <h5>原文 PDF</h5>
-                                ${originalHtml}
+                                <div id="pdfContainer">${originalHtml}</div>
                            </div>
-                            <div class="compare-panel translated">
+                            <div class="compare-panel translated" id="translatedPanel">
                                <h5>译文</h5>
-                                <div>${renderMarkdown(result.translated)}</div>
+                                <div class="translated-content">${renderMarkdown(result.translated)}</div>
                            </div>
                        </div>
                        <div class="text-center mt-2">
                            <small class="text-muted">💡 左右滚动同步，方便逐页对比</small>
                        </div>
                    `;
                    // 如果有PDF，用PDF.js渲染
                    if (result.original_pdf_url) {
                        renderPDF(result.original_pdf_url);
                    }
                    // 启用滚动同步
                    setTimeout(enableSyncScroll, 300);
                } catch (error) {
                    alert('加载对比失败: ' + error.message);
                }
@@ -115,6 +130,75 @@
            }
        });
        // PDF.js渲染PDF
        async function renderPDF(url) {
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
            try {
                const pdf = await pdfjsLib.getDocument(url).promise;
                pdfDoc = pdf;
                const container = document.getElementById('pdfPages');
                container.innerHTML = '';
                // 渲染所有页面
                for (let i = 1; i <= pdf.numPages; i++) {
                    const page = await pdf.getPage(i);
                    const canvas = document.createElement('canvas');
                    canvas.className = 'pdf-page-canvas';
                    canvas.style.width = '100%';
                    canvas.style.display = 'block';
                    canvas.style.marginBottom = '20px';
                    const context = canvas.getContext('2d');
                    const viewport = page.getViewport({ scale: 1.5 });
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    await page.render({
                        canvasContext: context,
                        viewport: viewport
                    }).promise;
                    container.appendChild(canvas);
                    // 添加页码标识
                    const pageNum = document.createElement('div');
                    pageNum.className = 'text-center text-muted mb-3';
                    pageNum.textContent = `— 第 ${i} 页 —`;
                    container.appendChild(pageNum);
                }
            } catch (error) {
                document.getElementById('pdfContainer').innerHTML = 
                    '<div class="text-danger">PDF加载失败: ' + error.message + '</div>';
            }
        }
        // 滚动同步
        function enableSyncScroll() {
            const originalPanel = document.getElementById('originalPanel');
            const translatedPanel = document.getElementById('translatedPanel');
            if (!originalPanel || !translatedPanel) return;
            originalPanel.addEventListener('scroll', function() {
                if (!syncScrollEnabled) return;
                syncScrollEnabled = false;
                const ratio = this.scrollTop / (this.scrollHeight - this.clientHeight);
                translatedPanel.scrollTop = ratio * (translatedPanel.scrollHeight - translatedPanel.clientHeight);
                setTimeout(() => syncScrollEnabled = true, 50);
            });
            translatedPanel.addEventListener('scroll', function() {
                if (!syncScrollEnabled) return;
                syncScrollEnabled = false;
                const ratio = this.scrollTop / (this.scrollHeight - this.clientHeight);
                originalPanel.scrollTop = ratio * (originalPanel.scrollHeight - originalPanel.clientHeight);
                setTimeout(() => syncScrollEnabled = true, 50);
            });
        }
        // 重新翻译
        document.getElementById('retranslateBtn')?.addEventListener('click', async function() {
            const instruction = document.getElementById('retranslateInstruction').value;