mcc-html-to-pdf

Cordova plugin that converts an HTML string to a PDF file on-device.

• Android: uses the native WebView → PdfDocument pipeline (no third-party libs required).
• Other platforms: falls back to a pure-JS renderer (SVG foreignObject → JPEG → hand-built PDF).

Installation

cordova plugin add mcc-html-to-pdf
cordova plugin add cordova-plugin-file

To open the generated PDF after saving:

cordova plugin add cordova-plugin-file-opener2

Usage

document.addEventListener('deviceready', function () {
  var htmlToPdf = cordova.plugins.mcc.htmlToPdf;

  htmlToPdf.convert(
    {
      html: '<h1>Hello PDF</h1><p>This is a test.</p>',
      fileName: 'output.pdf',
      pdf: {
        orientation: 'p',   // 'p' (portrait) | 'l' (landscape)
        format: 'a4'
      }
    },
    function (result) {
      // result.fullPath — absolute path on device
      // result.name     — file name
      // result.type     — 'application/pdf'

      var path = result.fullPath;
      if (path.indexOf('file://') !== 0) path = 'file://' + path;

      cordova.plugins.fileOpener2.open(path, 'application/pdf', {
        success: function () {},
        error: function (e) { console.error('Open error', e); }
      });
    },
    function (err) {
      console.error('mcc-html-to-pdf error:', err);
    }
  );
});

API

cordova.plugins.mcc.htmlToPdf.convert(
  options: {
    html: string;               // HTML string to render (required)
    fileName?: string;          // Output file name. Default: mcc-html-<timestamp>.pdf
    pdf?: {
      orientation?: 'p' | 'l'; // Portrait or landscape. Default: 'p'
      format?: 'a4' | number[]; // Page format or [widthMm, heightMm]. Default: 'a4'
    };
    // JS-fallback only options (non-Android):
    selector?: string;          // CSS selector of a DOM element to capture
    element?: HTMLElement;      // Direct DOM element reference
    quality?: number;           // JPEG quality 0–1. Default: 1.0
    scale?: number;             // Render scale factor. Default: 2
  },
  success: (result: { fullPath: string; name: string; type: string }) => void,
  error:   (err: string) => void
): void;

How It Works

Android (native)

1. An off-screen WebView loads the HTML string.
2. After render, PdfDocument draws each page of the WebView onto a Canvas.
3. The PDF is written to getExternalFilesDir() and the path is returned.

JS fallback (non-Android)

1. The HTML string (or DOM element) is rendered to a <canvas> via SVG foreignObject.
2. Each page is sliced from the canvas and encoded as JPEG.
3. A valid PDF binary is assembled in memory and saved via cordova-plugin-file.

Dependencies

| Plugin | Required | |---|---| | cordova-plugin-file | Yes (JS fallback file save) | | cordova-plugin-file-opener2 | No (only to open the PDF) |

License

MIT © MCC