Skip to content

feat(export): add PDF, DOC, and HTML export functionality with UI dropdown#98

Open
arindam-sahoo wants to merge 8 commits intotanabe:mainfrom
arindam-sahoo:feat-download
Open

feat(export): add PDF, DOC, and HTML export functionality with UI dropdown#98
arindam-sahoo wants to merge 8 commits intotanabe:mainfrom
arindam-sahoo:feat-download

Conversation

@arindam-sahoo
Copy link

@arindam-sahoo arindam-sahoo commented Nov 4, 2025

This pull request adds client-side export functionality to Markdown Live Preview, enabling users to download their rendered Markdown as PDF, DOC, or HTML files — directly from the web UI, without any server dependencies.

✨ Key Features

  • Added Export menu (download icon) in the header with dropdown options:

    • Export as HTML — generates a standalone HTML file with GitHub Markdown styling.
    • Export as PDF — opens print-ready preview in a new tab, using the browser’s print-to-PDF.
    • Export as DOC — builds a Word-compatible .doc file using inline HTML markup.
  • All exports are handled entirely client-side for privacy and speed.

  • Integrated responsive dropdown menu styling for better UX.

  • Included print-specific CSS rules to ensure clean PDF layouts.

📸 UI Preview

Dropdown button in header (right side) →
⬇️ Export → [HTML | PDF | DOC]
image

Introduces a new download menu in the header, allowing users to export
the rendered Markdown content.

This commit:
- Adds a "Download" button with a dropdown menu for export options.
- Integrates jsPDF and html2canvas libraries to enable PDF generation
  from the live preview content.
- Includes Font Awesome for the download icon.
- Adds a placeholder link for future DOC download functionality.
- Updates package dependencies to include html2canvas and its sub-dependencies.
@arindam-sahoo arindam-sahoo marked this pull request as draft November 4, 2025 07:23
Updated the text color for links within dropdown menus from white (`#fff`) to dark gray (`#333`). This change enhances readability, especially when the dropdown background is light. The addition of `!important` ensures the new color is applied consistently, overriding any conflicting styles.
Refactor the document export mechanism, introducing an "Export as HTML" option and renaming existing "Download" options to "Export".

This commit removes the `html2canvas` dependency and its related sub-dependencies, streamlining the project's build. The direct CDN link for `jspdf` was also removed from `index.html`, implying a shift to a bundled version or an alternative PDF generation method. Cache busting versions in `index.html` were updated to reflect these changes.
This commit introduces dedicated print styles to enhance the user experience when printing content directly from the browser or exporting to PDF.

Changes include:
*   Added a comprehensive `@media print` block to `public/css/style.css`. These styles ensure that only the markdown content is visible, UI elements are hidden, and the content is properly paginated and formatted for print.
*   Updated `src/export.js` to load `public/css/style.css` with `media="print"` instead of a separate `print.css` file. This consolidates print-specific styles into the main stylesheet, simplifying maintenance.

These changes provide a cleaner, more readable output for printed documents and PDF exports.
Refactor the `exportAsPDF` function to generate PDF content using Blob URLs. This change
improves the reliability and security of the export process by avoiding direct
`document.write` operations in the new print window.

Additionally, this commit introduces specific print media styles directly into the
generated HTML. These styles ensure consistent page margins, proper content padding,
and basic table formatting, leading to a more professional and readable PDF output.
The print window now automatically closes after printing, and Blob URLs are
revoked for resource cleanup.
@arindam-sahoo arindam-sahoo changed the title feat(export): Add PDF and DOC download functionality feat(export): add PDF, DOC, and HTML export functionality with UI dropdown Nov 4, 2025
@arindam-sahoo arindam-sahoo marked this pull request as ready for review November 4, 2025 14:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant