fix: replace Alpine.js button with anchor tag for PDF download

Issue: PDF download button wasn't working because Alpine.js doesn't
automatically initialize on dynamically loaded HTMX content. The
result.html template is loaded via HTMX polling, and the x-data
directive wasn't being processed on the new DOM elements.

Solution: Replaced the Alpine.js-powered button with a simple anchor
tag styled as a button. This works immediately without requiring
Alpine initialization and properly triggers browser download behavior.

Changes:
- Removed x-data, @click, :disabled, :class Alpine directives
- Changed <button> to <a> with href="{{ url_for('download_pdf') }}"
- Added download attribute for proper download hint
- Kept all styling and accessibility features
- Simplified implementation without loading state (unnecessary for downloads)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-02-04 14:15:50 -05:00
parent 694273b065
commit 664cbca4b8

View File

@ -107,20 +107,18 @@
{# PDF Download Button #}
<div class="has-text-centered mt-6"
x-data="{ downloading: false }"
role="region"
aria-label="Download options">
<button class="button is-primary is-medium"
@click="downloading = true; window.location.href = '{{ url_for('download_pdf') }}'; setTimeout(() => downloading = false, 2000)"
:disabled="downloading"
:class="{ 'is-loading': downloading }"
aria-label="Download SWOT analysis as PDF report"
style="background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%); border: none; font-weight: 600; padding: 0.75rem 2rem; box-shadow: var(--shadow-md); transition: all 0.3s ease;">
<a href="{{ url_for('download_pdf') }}"
class="button is-primary is-medium"
download
aria-label="Download SWOT analysis as PDF report"
style="background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%); border: none; font-weight: 600; padding: 0.75rem 2rem; box-shadow: var(--shadow-md); transition: all 0.3s ease; display: inline-flex; align-items: center; text-decoration: none;">
<span class="icon">
<i class="fas fa-file-pdf"></i>
</span>
<span x-text="downloading ? 'Generating PDF...' : 'Download PDF Report'"></span>
</button>
<span>Download PDF Report</span>
</a>
<p class="help mt-2"
style="color: var(--neutral-600);">
Professional PDF report with full SWOT analysis