### Dropdown List Example Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/reference/all-tags.html A dropdown list allows users to select one option from a predefined set. This example shows a basic structure. ```html Drop-down list Group item 1 Group item 2 ``` -------------------------------- ### Text Styling Examples Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/reference/all-tags.html Demonstrates various text styling options available in HTML, including bold, italics, code, and subscript/superscript. ```html line break, **bold,** _italics,_ underlined, inaccurate, marked, small, subscript, superscript, abbrev., `code,` **important,** _emphasized,_ inserted, deleted, computer output, keyboard input, variable, title of a work, definition, span (a way of sectioning off text), word break opportunity (for long words), time (for machine readability), data (for machine readability), bi-directional isolation (text direction), bi-directional override, ruby annotation(explanation/pronunciation) ``` -------------------------------- ### Description List Example Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/reference/all-tags.html Description lists are used to define terms and their corresponding descriptions. Each term is followed by its definition. ```html terms paired with their description Another term description ``` -------------------------------- ### Preformatted Text Example Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/reference/all-tags.html Use preformatted text to preserve whitespace and line breaks exactly as they appear in the source. This is useful for code examples or ASCII art. ```html Preformatted text (preserves spaces and line breaks) ``` -------------------------------- ### Ordered List Example Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/reference/all-tags.html Ordered lists are used for sequences where the order of items is important. Items are typically displayed with numbers or letters. ```html 1. Ordered 2. list ``` -------------------------------- ### Unordered List Example Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/reference/all-tags.html Unordered lists are used for items where the order does not matter. Items are typically displayed with bullet points. ```html * Unordered * list ``` -------------------------------- ### Advanced HTML Table Structure Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/reference/all-tags.html An advanced table example including a caption, header row, multiple data rows, and a footer row that spans columns. ```html Table caption Header 1 Header 2 Header 3 Row 1 cell 1 Row 1 cell 2 Row 1 cell 3 Row 2 cell 1 Row 2 cell 2 Row 2 cell 3 Footer 1 Footer 2 (Spanning 2 columns) ``` -------------------------------- ### Configure and Save PDF with html2pdf.js Source: https://github.com/ekoopmans/html2pdf.js/blob/main/README.md Demonstrates the new Promise-based usage for configuring options and saving a PDF. Ensure the element to print is available in the DOM. ```javascript var element = document.getElementById('element-to-print'); var opt = { margin: 1, filename: 'myfile.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } }; // New Promise-based usage: html2pdf().set(opt).from(element).save(); ``` -------------------------------- ### Options Configuration Source: https://github.com/ekoopmans/html2pdf.js/blob/main/README.md The `opt` parameter allows for detailed configuration of the PDF generation process, including margins, filename, image quality, and settings for html2canvas and jsPDF. ```APIDOC ## Options html2pdf.js can be configured using an optional `opt` parameter. ```js var opt = { margin: 1, filename: 'myfile.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } }; // Example usage: html2pdf().set(opt).from(element).save(); ``` ### Option Fields - **margin** (number or array) - Default: `0` - PDF margin (in jsPDF units). Can be a single number, `[vMargin, hMargin]`, or `[top, left, bottom, right]`. - **filename** (string) - Default: `'file.pdf'` - The default filename of the exported PDF. - **pagebreak** (object) - Default: `{mode: ['css', 'legacy']}` - Controls the pagebreak behaviour on the page. See [Page-breaks](#page-breaks) below. - **image** (object) - Default: `{type: 'jpeg', quality: 0.95}` - The image type and quality used to generate the PDF. See [Image type and quality](#image-type-and-quality) below. - **enableLinks** (boolean) - Default: `true` - If enabled, PDF hyperlinks are automatically added ontop of all anchor tags. - **html2canvas** (object) - Default: `{}` - Configuration options sent directly to `html2canvas` ([see here](https://html2canvas.hertzen.com/configuration) for usage). - **jsPDF** (object) - Default: `{}` - Configuration options sent directly to `jsPDF` ([see here](http://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html) for usage). ``` -------------------------------- ### Make PDF Container and Set Visible Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/manual/launcher.html Generates a PDF of a selected element and converts it to a container. It then makes the container visible by setting its opacity. ```javascript function makeContainer () { _window.focus(); var element = _window.document.querySelector(selector.value); html2pdf().from(element).toContainer().then(function () { _window.document.querySelector('.html2pdf__overlay').style.opacity = 1; }); } ``` -------------------------------- ### Include html2pdf.js from local file Source: https://github.com/ekoopmans/html2pdf.js/blob/main/README.md Include the downloaded html2pdf.bundle.min.js file directly in your HTML. ```html ``` -------------------------------- ### HTML Form Input Types Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/reference/all-tags.html Demonstrates various standard HTML form input types, including text, button, checkbox, color, date, and more. ```html Text input: Button input: Checkbox input: Color input: Date input: Datetime input: Email input: File input: Hidden input: Image input: Month input: Number input: Password input: Radio input: Range input: Reset input: Search input: Submit input: Tel input: Time input: URL input: Week input: Label (for text input): Input with datalist: Option 1 Option 2 ``` -------------------------------- ### Basic PDF Generation Source: https://github.com/ekoopmans/html2pdf.js/blob/main/README.md Generates a PDF of the specified element and prompts the user to save it. Ensure the element with id 'element-to-print' exists in your HTML. ```javascript var element = document.getElementById('element-to-print'); html2pdf(element); ``` -------------------------------- ### Include Dependencies Source: https://github.com/ekoopmans/html2pdf.js/blob/main/README.md When using the unbundled script, ensure jsPDF and html2canvas are included before html2pdf.min.js in the correct order. ```html ``` -------------------------------- ### Configure Page Breaks Source: https://github.com/ekoopmans/html2pdf.js/blob/main/README.md Set page break modes and specific element selectors for before, after, or avoiding breaks. Supports 'avoid-all', 'css', and 'legacy' modes. ```javascript html2pdf().set({ pagebreak: { mode: 'avoid-all', before: '#page2el' } }); ``` ```javascript html2pdf().set({ pagebreak: { mode: ['avoid-all', 'css', 'legacy'] } }); ``` ```javascript html2pdf().set({ pagebreak: { before: '.beforeClass', after: ['#after1', '#after2'], avoid: 'img' } }); ``` -------------------------------- ### Test Loaded and Script Loaded Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/manual/launcher.html Callback functions executed after the target content and html2pdf.js library are loaded. 'testLoaded' injects the script, and 'scriptLoaded' makes the html2pdf API available. ```javascript function testLoaded () { var _document = _window.document; var script = _document.createElement('script'); script.addEventListener('load', scriptLoaded); script.src = '../../dist/html2pdf.bundle.js'; _document.body.appendChild(script); } function scriptLoaded () { html2pdf = _window.html2pdf; ready.innerHTML = 'Ready'; } ``` -------------------------------- ### Old Monolithic Usage of html2pdf.js Source: https://github.com/ekoopmans/html2pdf.js/blob/main/README.md Illustrates the older, monolithic style of using html2pdf.js, which takes the element and options directly in the constructor. ```javascript // Old monolithic-style usage: html2pdf(element, opt); ``` -------------------------------- ### Generate PDF from HTML Element Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/manual/template.html Use this function to convert a specified HTML element into a PDF. Configure options like filename, margins, and PDF orientation. ```javascript function test() { // Get the element. var element = document.getElementById('root'); // Generate the PDF. html2pdf().from(element).set({ margin: 1, filename: 'test.pdf', html2canvas: { scale: 2 }, jsPDF: { orientation: 'portrait', unit: 'in', format: 'letter', compressPDF: true } }).save(); } ``` -------------------------------- ### Details and Summary Element Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/reference/all-tags.html The details and summary elements create a disclosure widget that can be toggled to show or hide content. The summary provides a visible label. ```html Details element - Summary Details (hidden when collapsed) ``` -------------------------------- ### Table Styling Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/manual/pagebreaks.html Basic CSS for table elements to ensure borders are rendered correctly for pagebreak testing. ```css /* Table styling */ table { border-collapse: collapse; } td { border: 1px solid black; } ``` -------------------------------- ### Load html2pdf.js in Popup Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/manual/launcher.html Loads the html2pdf.js library into a new popup window. The popup's window object is then used to access the library. ```javascript function loadPopup () { ready.innerHTML = ''; _window = window.open(target.value, 'html2pdf testing', 'location=0'); _window.addEventListener('load', testLoaded); _window.focus(); } ``` -------------------------------- ### Initialize html2pdf Worker Source: https://github.com/ekoopmans/html2pdf.js/blob/main/README.md Creates a worker object for html2pdf.js, which can be used to chain methods for advanced PDF generation configurations. ```javascript var worker = html2pdf(); // Or: var worker = new html2pdf.Worker; ``` -------------------------------- ### Worker API Methods Source: https://github.com/ekoopmans/html2pdf.js/blob/main/README.md The Worker API provides a chainable interface for generating PDFs from HTML. Methods allow setting the source, defining the output target, handling image and PDF outputs, saving the file, and configuring options. ```APIDOC ## Worker API ### Methods - **from(src, type)** - Description: Sets the source (HTML string or element) for the PDF. Optional `type` specifies other sources: `'string'`, `'element'`, `'canvas'`, or `'img'`. - **to(target)** - Description: Converts the source to the specified target (`'container'`, `'canvas'`, `'img'`, or `'pdf'`). Each target also has its own `toX` method that can be called directly: `toContainer()`, `toCanvas()`, `toImg()`, and `toPdf()`. - **output(type, options, src)** - Description: Routes to the appropriate `outputPdf` or `outputImg` method based on specified `src` (`'pdf'` (default) or `'img'`). - **outputPdf(type, options)** - Description: Sends `type` and `options` to the jsPDF object's `output` method, and returns the result as a Promise (use `.then` to access). See the [jsPDF source code](https://rawgit.com/MrRio/jsPDF/master/docs/jspdf.js.html#line992) for more info. - **outputImg(type, options)** - Description: Returns the specified data type for the image as a Promise (use `.then` to access). Supported types: `'img'`, `'datauristring'`/`'dataurlstring'`, and `'datauri'`/`'dataurl'`. - **save(filename)** - Description: Saves the PDF object with the optional filename (creates user download prompt). - **set(opt)** - Description: Sets the specified properties. See [Options](#options) below for more details. - **get(key, cbk)** - Description: Returns the property specified in `key`, either as a Promise (use `.then` to access), or by calling `cbk` if provided. - **then(onFulfilled, onRejected)** - Description: Standard Promise method, with `this` re-bound to the Worker, and with added progress-tracking (see [Progress](#progress) below). Note that `.then` returns a `Worker`, which is a subclass of Promise. - **thenCore(onFulFilled, onRejected)** - Description: Standard Promise method, with `this` re-bound to the Worker (no progress-tracking). Note that `.thenCore` returns a `Worker`, which is a subclass of Promise. - **thenExternal(onFulfilled, onRejected)** - Description: True Promise method. Using this 'exits' the Worker chain - you will not be able to continue chaining Worker methods after `.thenExternal`. - **catch(onRejected)** - Description: Standard Promise method. - **catchExternal(onRejected)** - Description: Standard Promise method. `catchExternal` exits the Worker chain - you will not be able to continue chaining Worker methods after `.catchExternal`. - **error(msg)** - Description: Throws an error in the Worker's Promise chain. ### Aliases - **saveAs**: Alias for `save` - **using**: Alias for `set` - **export**: Alias for `output` - **run**: Alias for `then` ``` -------------------------------- ### HTML Semantic Sectioning Elements Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/reference/all-tags.html Illustrates the use of semantic HTML5 elements for structuring content, including div, article, aside, dialog, header, main, footer, and nav. ```html Div: Basic division/section Article: Independent, self-contained content Aside: Indirectly related to the surrounding content Dialog: Dialog box or subwindow Header: Introductory content Main: Main content Footer: Copyright, contact info, etc. Nav: Set of [navigation](#sections) [links](#tables) Section: Thematic grouping of content ``` -------------------------------- ### Include html2pdf.js via CDN Source: https://github.com/ekoopmans/html2pdf.js/blob/main/README.md Use this script tag to include the html2pdf.js library from a CDN. This method locks you to a specific version. ```html ``` -------------------------------- ### Simple HTML Table Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/reference/all-tags.html A basic HTML table structure with two columns and two rows. Borders are typically applied via CSS. ```html Row 1 cell 1 Row 1 cell 2 Row 2 cell 1 Row 2 cell 2 ``` -------------------------------- ### Load html2pdf.js in Iframe Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/manual/launcher.html Loads the html2pdf.js library into an iframe. The iframe's content window is then used to access the library. ```javascript var html2pdf; var _window; var popup; var target = document.getElementById('target'); var iframe = document.getElementById('iframe'); var ready = document.getElementById('ready'); var selector = document.getElementById('selector'); function loadIframe () { ready.innerHTML = ''; iframe.onload = function () { _window = iframe.contentWindow; testLoaded(); }; iframe.src = target.value; } ``` -------------------------------- ### CSS for Pagebreaks Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/manual/pagebreaks.html Defines CSS classes for controlling page breaks. Use '.before' to force a break before an element, '.after' to force a break after, and '.avoid' to prevent breaks within an element. ```css /* Avoid unexpected sizing on all elements. */ * { box-sizing: border-box; margin: 0; padding: 0; } /* CSS styling for before/after/avoid. */ .before { page-break-before: always; } .after { page-break-after: always; } .avoid { page-break-inside: avoid; } /* Big and bigger elements. */ .big { height: 10.9in; background-color: yellow; border: 1px solid black; } .fullpage { height: 11in; background-color: fuchsia; border: 1px solid black; } .bigger { height: 11.1in; background-color: aqua; border: 1px solid black; } ``` -------------------------------- ### Save PDF using Worker API Source: https://github.com/ekoopmans/html2pdf.js/blob/main/README.md A concise way to generate and save a PDF using the html2pdf.js worker API. This implicitly handles canvas and PDF object creation. ```javascript // This will implicitly create the canvas and PDF objects before saving. var worker = html2pdf().from(element).save(); ``` -------------------------------- ### Save PDF from Selector Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/manual/launcher.html Generates and saves a PDF from an element selected by a CSS selector. Ensures the target window has focus before generating the PDF. ```javascript function savePdf () { _window.focus(); var element = _window.document.querySelector(selector.value); html2pdf().from(element).save(); } ``` -------------------------------- ### Add html2pdf.js script dynamically via Console Source: https://github.com/ekoopmans/html2pdf.js/blob/main/README.md This JavaScript code can be pasted into a browser's console to dynamically add the html2pdf.js library to the current page. ```javascript function addScript(url) { var script = document.createElement('script'); script.type = 'application/javascript'; script.src = url; document.head.appendChild(script); } addScript('https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js'); ``` -------------------------------- ### CSS Pagebreak Styling Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/reference/pagebreaks.html Defines CSS classes for controlling page breaks and element sizing. These are used to test different pagebreak scenarios. ```css /* Avoid unexpected sizing on all elements. */ * { box-sizing: border-box; margin: 0; padding: 0; } /* CSS styling for before/after/avoid. */ .before { page-break-before: always; } .after { page-break-after: always; } .avoid { page-break-inside: avoid; } /* Big and bigger elements. */ .big { height: 10.9in; background-color: yellow; border: 1px solid black; } .fullpage { height: 11in; background-color: fuchsia; border: 1px solid black; } .bigger { height: 11.1in; background-color: aqua; border: 1px solid black; } /* Table styling */ table { border-collapse: collapse; } td { border: 1px solid black; } ``` -------------------------------- ### JavaScript Function for PDF Generation with Pagebreaks Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/manual/pagebreaks.html Generates a PDF using html2pdf.js, allowing selection of pagebreak modes ('css', 'legacy', 'avoid-all', or 'specify'). The 'specify' mode allows manual definition of CSS selectors for breaks. ```javascript // Pagebreak fields: mode, before, after, avoid // Pagebreak modes: 'avoid-all', 'css', 'legacy' function test() { // Get the element. var element = document.getElementById('root'); // Choose pagebreak options based on mode. var mode = document.getElementById('mode').value; var pagebreak = (mode === 'specify') ? { mode: '', before: '.before', after: '.after', avoid: '.avoid' } : { mode: mode }; // Generate the PDF. html2pdf().from(element).set({ filename: mode + '.pdf', pagebreak: pagebreak, jsPDF: {orientation: 'portrait', unit: 'in', format: 'letter', compressPDF: true} }).save(); } ``` -------------------------------- ### HTML Anchor Tag (Hyperlink) Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/reference/all-tags.html The anchor tag creates hyperlinks to other web pages or resources. The href attribute specifies the destination URL. ```html [Anchor tag (hyperlink)](https://www.google.com/) ``` -------------------------------- ### HTML Button Element Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/reference/all-tags.html The button element creates a clickable button. It can be used for various interactive purposes within a form or standalone. ```html Button 60% 60% ``` -------------------------------- ### HTML Image Element Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/reference/all-tags.html The img element embeds images into the HTML document. The src attribute specifies the image source, and alt provides alternative text. ```html ![Wikipedia logo](Wikipedia-logo-v2.png) ``` -------------------------------- ### HTML Fieldset and Legend Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/reference/all-tags.html Fieldset and legend elements are used to group related form controls. The legend provides a caption for the group. ```html Fieldset with legend Input in a fieldset: ``` -------------------------------- ### HTML Textarea Element Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/reference/all-tags.html The textarea element allows for multi-line text input from the user. It is commonly used for comments or messages. ```html Textarea ``` -------------------------------- ### HTML Canvas with JavaScript Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/reference/all-tags.html This JavaScript code draws a red rectangle on an HTML canvas element. It requires a canvas element with the ID 'canvas' in the HTML. ```javascript var ctx = document.getElementById("canvas").getContext('2d'); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 300, 150); ``` -------------------------------- ### HTML Figure and Caption Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/reference/all-tags.html The figure element represents self-contained content, like an illustration or photo, and can be associated with a figcaption. ```html Figure with caption ``` -------------------------------- ### HTML Horizontal Rule Source: https://github.com/ekoopmans/html2pdf.js/blob/main/test/reference/all-tags.html A horizontal rule is used to create a thematic break between paragraph-level elements. It is often displayed as a horizontal line. ```html * * * ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.