{"id":22535556,"url":"https://github.com/juanchinovas/pdf-generator","last_synced_at":"2025-04-09T19:07:56.041Z","repository":{"id":46824229,"uuid":"282771305","full_name":"juanchinovas/pdf-generator","owner":"juanchinovas","description":"NodeJs plugin to generate PDF from HTML template using Vuejs and puppeteer","archived":false,"fork":false,"pushed_at":"2023-01-19T16:54:11.000Z","size":3765,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T19:07:40.997Z","etag":null,"topics":["html-to-pdf","nodejs","pdf-generation","puppeteer-core","template-html","vuejs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/html-pdf-generator","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/juanchinovas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-27T02:06:05.000Z","updated_at":"2025-02-21T22:35:40.000Z","dependencies_parsed_at":"2023-02-11T11:01:10.068Z","dependency_job_id":null,"html_url":"https://github.com/juanchinovas/pdf-generator","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juanchinovas%2Fpdf-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juanchinovas%2Fpdf-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juanchinovas%2Fpdf-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juanchinovas%2Fpdf-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/juanchinovas","download_url":"https://codeload.github.com/juanchinovas/pdf-generator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248094994,"owners_count":21046770,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html-to-pdf","nodejs","pdf-generation","puppeteer-core","template-html","vuejs"],"created_at":"2024-12-07T10:07:52.117Z","updated_at":"2025-04-09T19:07:56.001Z","avatar_url":"https://github.com/juanchinovas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pdf-Generator (html-pdf-generator on NPM)\n\n[![NPM version][npm-image]][npm-url]\n[![Downloads][downloads-image]][npm-url]\n\n[npm-image]:http://img.shields.io/npm/v/html-pdf-generator.svg\n[npm-url]:https://npmjs.org/package/html-pdf-generator\n[downloads-image]:http://img.shields.io/npm/dm/html-pdf-generator.svg\n\nA [NodeJs](https://nodejs.org) plugin to generate PDF from HTML template using [Puppeteer](https://github.com/puppeteer/puppeteer) and [Vue.js](https://vuejs.org/).\n\nSee postman [collection](../demo/pdf-generator-test.postman_collection.json) for more example,\n\n\u003e If you need more functionality in your HTML template you can add the `VueJs mixin` in the global `window.mixins` array to extend default functionality. See the file [mixin.js](../demo/misc/mixin.js) for more example.\n\n# Table of contents\n- [Installation](#installation)\n- [Usage Example](#usage-example)\n  - [Initialize](#initialize)\n  - [Generate PDF in memory](#generate-pdf-in-memory)\n  - [Generate HTML in memory](#generate-html-in-memory)\n  - [Different headers/footers](#different-headersfooters)\n  - [Components](#components)\n  - [PDF Merger Delegator](#pdf-merger-delegator)\n- [Documentation](#documentation)\n  - [Interfaces](#interfaces)\n  - [API](#api)\n\n# Installation\n**NPM Module**\n```node\nnpm i html-pdf-generator\n```\n# Usage Example\n## Initialize\n```javascript\nconst pdfProcessor = require(\"html-pdf-generator\");\n\nconst {\n    BROWSER_NAME,\n    URL_BROWSER,\n    FILE_DIR,\n    PDF_DIR,\n    PORT = 3000,\n    TEMPLATE_DIR\n} = process.env;\n\nlet pdfGenerator = pdfProcessor.pdfGeneratorInstance({\n    BROWSER_NAME,\n    URL_BROWSER,\n    FILE_DIR,\n    PDF_DIR,\n    PORT,\n    TEMPLATE_DIR,\n    libs: [/*VueJs mixin files*/],\n    pdfMergerDelegator\n});\n```\n\u003e Use `process.env` if you passed the environment variables using node command. I recommend use a `.env` file and the package [dotenv](https://www.npmjs.com/package/dotenv).\n\n\u003e `libs` property in the `Options` object pass to `pdfGeneratorInstance` function is optional, is a list of VueJs mixin modules o components to be injected into the template. Can be pass it a VueJs library url by default is use this https://cdn.jsdelivr.net/npm/vue\n\u003e See `pdfMergerDelegator` info in [PDF Merger Delegator](#pdf-merger-delegator).\n\n## Generate PDF in memory\n```typescript\nconst templateData = {\n    $templateName: \"template name\",\n    $parameters: {},\n    $extraParams: {}\n};\n// Indicate the pdf file is created in memory \ntemplateData.$extraParams.preview: true;\n// Indicate if the result is or not HTML\ntemplateData.$extraParams.previewHTML: false;\n\npdfGenerator\n    .processTemplate(templateData)\n    .then(processed =\u003e {\n        /*You code here*/\n    })\n```\n## Generate HTML in memory\n```typescript\nconst templateData = {\n    $templateName: \"template name\",\n    $parameters: {},\n    $extraParams: {}\n};\n// Indicate the pdf file is created in memory \ntemplateData.$extraParams.preview: true;\n// Indicate if the result is or not HTML\ntemplateData.$extraParams.previewHTML: true;\n\npdfGenerator\n    .processTemplate(templateData)\n    .then(processed =\u003e {\n        /*You code here*/\n    })\n```\n## Different headers/footers\nTo use different headers and footers in the PDF pages generated. Have to pass the property `customPagesHeaderFooter` passing the array of string with the page where the header/footer must to be added.\n\n```json\n{\n    \"$templateName\": ,\n    \"$parameters\": {},\n    \"$extraParams\": {\n        \"customPagesHeaderFooter\" : [\n            \"1\", \n            \"2-penult\",\n            \"last\"\n        ]\n    }\n}\n```\n\u003e The pages in the array can be number as it generated on the browser or name \n\u003e * `first`     --\u003e Document page #1.\n\u003e * `penult`    --\u003e Previous to last document page.\n\u003e * `last`      --\u003e Last document page.\n\u003e * `1-3`       --\u003e Rage of pages, starting from page 1 to page 3.\n\u003e * `2-penult`  --\u003e Rage of pages, starting from page 2 to previous to last page.\n\n\u003e For each page ranges in the array **`customPagesHeaderFooter`** in the template have to be a element with the `id='page-header-{page-range}'` or `id='page-footer-{page-range}'` is important that the element is hidden.\n```html\n\u003cdiv \n    id=\"header-page-2-penult\" \n    class=\"header\"\u003e\n    \u003cdiv\u003e\n        \u003clabel\u003eI'm in the header from 2 to penult page\u003c/label\u003e\n    \u003c/div\u003e\n    \u003cv-style\u003e\n        #header-page-2-penult {\n            padding: 2.1em 2cm;\n            margin-top: -.4cm;\n            display: flex; \n            align-items: center; \n            width: 100%;\n            justify-content: flex-end;\n            background-color: violet;\n            color: #fff;\n            font-size: 12px;\n        }\n\n        #header-page-2-penult \u003e div {\n            display: flex;\n            flex-direction: column;\n            justify-content: flex-end;\n            text-align: right;\n        }\n    \u003c/v-style\u003e\n\u003c/div\u003e\n```\n**As `VueJs` remove the css style tag by default, the element `v-style` is include in the library. `v-style` let you include the css to the header/footer**.\n\n## Components\nVueJs component are valid.\n```javascript\nVue.component('test-component', {\n  props: [\"prop1\"],\n  template: '\u003clabel\u003eI am a component {{prop1}}\u003c/label\u003e'\n})\n```\nAll the components must to be in separated file and reference it on the `libs` property.\n\n## PDF Merger Delegator\nThe PDF delegator is a helper that satisfy the interface\n```typescript\n{\n    getPdfTotalPages: (pdfBuffer: Buffer) =\u003e Promise\u003cnumber\u003e;\n    merge: (pdfList: Array\u003cBuffer\u003e) =\u003e Promise\u003cBuffer\u003e;\n}\n```\n\u003e * `getPdfTotalPages` function to get the total pages of the generated pdf\n\u003e * `merge` function to merge all pages generated by the [Different headers/footers](#different-headersfooters)\n\nThe delegator is implemented using a library that can manipulate pdf. Like [pdf-lib](https://www.npmjs.com/package/pdf-lib) or other.\n\n\u003e See [pdf delegator of the demo](./demo/pdfMergerDelegator.js).\n\n`Why a delegator?` due to the limitation of using Puppeteer to generate pdf with different header or footer as an only file is necessary a third library to merge the pdf generated with different headers and footers. Too right now is not possible to get the total pages of the document with Puppeteer.\n\n# Documentation\n\n## Interfaces\n\nThe `options` param is an object with the properties to config puppeteer, set the printing margin of the PDF and setting the JavaScript files to be loaded automatically into the template. See `.env` file in the demo app:\n\n```typescript\ninterface Options {\n    URL_BROWSER: string; // \u003cDirToExecuteChromeOrFirefox\u003e - Browser executable full path\n    FILE_DIR: string; // \u003cTemporalHTMLFileDir\u003e - Where to save temporary files\n    PDF_DIR: string; // \u003cTemporalPDFFileDir\u003e - Where to save the pdf generated\n    TEMPLATE_DIR: string; // \u003cTemplateDir\u003e - Where the VueJs/HTML templates live\n    BROWSER_NAME?: string; // chrome|firefox - default chrome\n    PORT: number; // Port used in NodeJs service\n    printingMarginTop?: string | number; // default 2.54cm\n    printingMarginBottom?: string | number; // default 2.54cm\n    printingMarginLeft?: string | number; // default 2.54cm\n    printingMarginRight?: string | number; // default 2.54cm\n    libs: Array\u003cstring\u003e // List of js files used on the templates\n    pdfMergerDelegator?: PdfMergerDelegator; // Object to merge the different pdf create with distinct header/footer and get the total page.\n}\n```\n\n```typescript\ninterface PdfMergerDelegator {\n    getPdfTotalPages: (pdfBuffer: Buffer) =\u003e Promise\u003cnumber\u003e;\n    merge: (pdfList: Array\u003cBuffer\u003e) =\u003e Promise\u003cBuffer\u003e;\n}\n\ninterface TemplateData {\n    $templateName: string,\n    $parameters: {[key:string]: any}, \n    $extraParams: {[key:string]: any}\n}\n\ninterface PDFGeneratorResult {\n    fileName: string;\n    buffer: Buffer | Array\u003cBuffer\u003e;\n    templateType: 'application/pdf' | 'text/html' | 'array/pdf';\n}\n\ninterface PdfGenerator {\n    /**\n     * Process the VueJs template to generate PDF\n     * @param ParamData\n     * \n     * @returns Promise\u003cPDFGeneratorResult\u003e\n     */\n    processTemplate: (data: ParamData) =\u003e Promise\u003cPDFGeneratorResult\u003e;\n    /**\n     * Dispose the puppeteer instance\n     */\n    dispose: () =\u003e Promise\u003cvoid\u003e;\n}\n```\n## API\n```typescript\n/**\n * Create a PDF Generator instance\n *\n * @param Options\n * @returns PdfGenerator\n */\nfunction pdfGeneratorInstance(options: Options) =\u003e PdfGenerator; \n\n/**\n * Real all the params found in a HTML template \n * with the Vue.js template syntax.\n *\n * @param string templateName\n * @returns Promise\u003c{[key: string]: any}\u003e\n */\nfunction getTemplateParameters(templateName: string): Promise\u003c{[key: string]: any}\u003e;\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuanchinovas%2Fpdf-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuanchinovas%2Fpdf-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuanchinovas%2Fpdf-generator/lists"}