markdown-pdfjs

v1.0.1

Published

2 months ago

A robust, easy-to-use library to convert Markdown to PDF using marked.js, html2pdf.js, and DOMPurify.

0High
0Medium
0Low

markdown-pdfjs is a lightweight yet robust library that empowers web developers to offer "Export to PDF" functionality from Markdown content without any server-side processing. It intelligently bundles the power of marked, html2pdf.js, and DOMPurify into a simple and configurable API.

Key Features

Standalone: Works out-of-the-box from a CDN with a single script tag. No complex setup required.
Secure: Automatically sanitizes HTML output from Markdown to prevent XSS attacks.
Fully Stylable: Apply custom CSS to control the precise appearance of your PDF document.
Headers and Footers: Easily add custom headers and footers to your generated PDFs.
Configurable: Fine-tune PDF output (page format, orientation, margins) and the Markdown parser.
DOM Rendering: Render the styled HTML directly into a DOM element for previewing before download.

Getting Started

The easiest way to get started is to use the UMD build from a CDN. This requires no build tools or installation.

via CDN

Include the library from a CDN like unpkg or jsDelivr in your HTML file.

<!-- Use a specific version for production -->
<script src="https://unpkg.com/[email protected]/dist/markdown-pdf.umd.js"></script>

<!-- OR from jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-pdf.umd.js"></script>

via NPM

For projects using a build tool (like Vite, Webpack, etc.), you can install the package from npm.

npm install markdown-pdfjs

Then, import it into your project:

import { MarkdownPDF } from 'markdown-pdfjs';
// Or import specific functions as needed
import { download, render } from 'markdown-pdfjs';

Usage Example

Here is a complete, basic example of how to add a "Download PDF" button to your page.

<!DOCTYPE html>
<html>
<head>
    <title>Markdown to PDF Demo</title>
</head>
<body>

    <button id="downloadButton">Download Report as PDF</button>

    <!-- 1. Include the library from a CDN -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-pdf.umd.js"></script>

    <!-- 2. Use the library in your application script -->
    <script>
        const markdownContent = `
# Project Report

## Section 1: Introduction

This document was generated on **${new Date().toLocaleDateString()}**.

*   Point one
*   Point two

---

## Section 2: Data

Here is some tabular data:

| Header 1 | Header 2 |
|----------|----------|
| Cell 1   | Cell 2   |
| Cell 3   | Cell 4   |
`;

        const downloadBtn = document.getElementById('downloadButton');

        downloadBtn.addEventListener('click', () => {
            MarkdownPDF.download(markdownContent, {
                filename: 'project-report.pdf'
            });
        });
    </script>
</body>
</html>

API Reference

The library exposes a global MarkdownPDF object (when used via CDN) with the following methods.

`MarkdownPDF.download(markdown, [options])`

Generates a PDF from a Markdown string and prompts the user to download it.

markdown (String): The Markdown content to convert.
options (Object, optional): A configuration object. See the Options Object section for details.
Returns: Promise<void>

`MarkdownPDF.render(markdown, container, [options])`

Converts Markdown to styled HTML and appends it to a specified container element. This is ideal for previews.

markdown (String): The Markdown content to convert.
container (HTMLElement): The DOM element to render the output into.
options (Object, optional): A configuration object.
Returns: HTMLElement (The generated wrapper element).

`MarkdownPDF.downloadFromElement(element, [options])`

Generates a PDF directly from an existing DOM element. This is useful if you have complex HTML that was not generated from Markdown.

element (HTMLElement): The DOM element to capture as a PDF.
options (Object, optional): A configuration object.
Returns: Promise<void>

`MarkdownPDF.configureMarked(markedOptions)`

Allows you to override the default options for the underlying marked parser.

markedOptions (Object): An object of valid marked options.

// Example: Enable GitHub Flavored Markdown line breaks
MarkdownPDF.configureMarked({
  breaks: true,
  gfm: true
});

Options Object

The options object can be passed to download, render, and downloadFromElement to customize the output.

| Option | Type | Default | Description | | ------------- | ------------------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | filename | String | 'document.pdf' | The name of the downloaded PDF file. | | format | String | 'a4' | The page format. Common values: 'a4', 'letter', etc. See jsPDF formats. | | orientation | String | 'portrait' | Page orientation: 'portrait' or 'landscape'. | | margin | Number | 10 | The page margin in millimeters (mm). | | css | String | '' | A string of custom CSS to be injected for styling the PDF content. | | header | String | Function | null | HTML content for the document header. See Headers and Footers. | | footer | String | Function | null | HTML content for the document footer. See Headers and Footers. | | image | Object | { type: 'jpeg', quality: 0.98 } | Configuration for image compression in the PDF. Passed to html2pdf.js. | | html2canvas | Object | { scale: 2, useCORS: true, ... } | Advanced configuration for html2canvas. See html2canvas options. | | pagebreak | Object | { mode: ['css', 'legacy'] } | Configuration for how page breaks are handled. Passed to html2pdf.js. |

Advanced Usage

Custom Styling with CSS

Use the css option to style your PDF. You can target standard HTML tags or add your own classes in the Markdown.

const myCss = `
  body { font-family: 'Helvetica', sans-serif; color: #333; }
  h1 { color: #005a9c; border-bottom: 2px solid #ccc; }
  blockquote { background: #f0f0f0; border-left: 5px solid #ccc; padding: 10px; }
  .custom-class { color: red; font-weight: bold; }
`;

const myMarkdown = `
# Styled Document

> This is a styled blockquote.

This text has a <span class="custom-class">custom class</span> applied.
`;

MarkdownPDF.download(myMarkdown, {
  css: myCss,
  filename: 'styled-document.pdf'
});

Headers and Footers

You can provide a simple HTML string for static headers and footers.

Important Note: The header and footer are rendered as static blocks at the top and bottom of the entire document content. The underlying html2pdf.js library does not support dynamic content (like page numbers) that updates on each page.

const options = {
  header: `
    <div style="text-align: center; border-bottom: 1px solid #ccc; padding-bottom: 5px;">
        My Company Report
    </div>`,
  footer: `
    <div style="text-align: center; font-size: 10px; border-top: 1px solid #ccc; padding-top: 5px;">
        Confidential Document
    </div>`
};

MarkdownPDF.download("# My Content", options);

Underlying Technology

markdown-pdfjs orchestrates these excellent open-source libraries to provide a seamless experience:

marked: For fast and efficient Markdown-to-HTML conversion.
html2pdf.js: For converting the generated HTML into a PDF.
DOMPurify: For robust sanitization of HTML to protect against XSS vulnerabilities.

License

Distributed under the MIT License. See LICENSE file for more information.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme