refactor: remove HTML report export and implement PDF export options in PDF comparison tool

- Deleted the exportCompareHtmlReport function and its related imports.
- Introduced a dropdown menu for exporting comparison results as PDFs with multiple modes (split, alternating, left, right).
- Updated the comparison logic to utilize caching for page models and comparison results.
- Refactored rendering functions to improve code organization and maintainability.
- Enhanced UI elements for better user experience during PDF export.
This commit is contained in:
alam00000
2026-03-09 23:26:52 +05:30
parent 0fe94795cc
commit d2a1450bc0
15 changed files with 953 additions and 526 deletions

View File

@@ -626,14 +626,55 @@
</label>
</div>
<button
id="export-report-btn"
class="btn bg-gray-700 hover:bg-gray-600 p-1.5 rounded disabled:opacity-50"
disabled
title="Export report"
>
<i data-lucide="download" class="w-4 h-4"></i>
</button>
<div class="relative" id="export-dropdown-wrapper">
<button
id="export-dropdown-btn"
class="btn bg-indigo-600 hover:bg-indigo-500 px-3 py-1.5 rounded text-xs font-semibold flex items-center gap-1.5 disabled:opacity-50"
disabled
>
<i data-lucide="upload" class="w-3.5 h-3.5"></i>
Export
<i data-lucide="chevron-down" class="w-3 h-3"></i>
</button>
<div
id="export-dropdown-menu"
class="hidden absolute right-0 top-full mt-1 w-48 bg-gray-800 border border-gray-600 rounded-lg shadow-xl z-50 py-1"
>
<div
class="px-3 py-1.5 text-[10px] font-semibold text-gray-400 uppercase tracking-wider"
>
Export as PDF
</div>
<button
data-export-mode="split"
class="export-menu-item w-full px-3 py-2 text-sm text-left text-gray-200 hover:bg-gray-700 flex items-center gap-2"
>
<i data-lucide="columns-2" class="w-4 h-4 text-gray-400"></i>
Split view
</button>
<button
data-export-mode="alternating"
class="export-menu-item w-full px-3 py-2 text-sm text-left text-gray-200 hover:bg-gray-700 flex items-center gap-2"
>
<i data-lucide="layers" class="w-4 h-4 text-gray-400"></i>
Alternating
</button>
<button
data-export-mode="left"
class="export-menu-item w-full px-3 py-2 text-sm text-left text-gray-200 hover:bg-gray-700 flex items-center gap-2"
>
<i data-lucide="columns-2" class="w-4 h-4 text-gray-400"></i>
Left Document
</button>
<button
data-export-mode="right"
class="export-menu-item w-full px-3 py-2 text-sm text-left text-gray-200 hover:bg-gray-700 flex items-center gap-2"
>
<i data-lucide="columns-2" class="w-4 h-4 text-gray-400"></i>
Right Document
</button>
</div>
</div>
</div>
<div class="compare-workspace">