{"id":24173120,"url":"https://github.com/edisonneza/jspdf-invoice-template","last_synced_at":"2025-04-05T13:05:18.626Z","repository":{"id":37246047,"uuid":"337415755","full_name":"edisonneza/jspdf-invoice-template","owner":"edisonneza","description":"PDF template created to generate invoices based on props object. Using jsPDF library.","archived":false,"fork":false,"pushed_at":"2024-05-13T21:59:14.000Z","size":2501,"stargazers_count":155,"open_issues_count":6,"forks_count":39,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-29T12:06:02.746Z","etag":null,"topics":["babel","javascript-library","jspdf","jspdf-template","npm-package","pdf","pdf-invoice","webpack"],"latest_commit_sha":null,"homepage":"https://edisonneza.github.io/jspdf-invoice-template","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/edisonneza.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-09T13:38:18.000Z","updated_at":"2025-03-19T06:42:42.000Z","dependencies_parsed_at":"2024-05-13T21:41:28.383Z","dependency_job_id":"d31ecd10-452a-4dcf-b119-f7a60ed3d85a","html_url":"https://github.com/edisonneza/jspdf-invoice-template","commit_stats":{"total_commits":58,"total_committers":3,"mean_commits":"19.333333333333332","dds":0.3620689655172413,"last_synced_commit":"93876fb7e5360109d5027e783f00aa67e09923f5"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edisonneza%2Fjspdf-invoice-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edisonneza%2Fjspdf-invoice-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edisonneza%2Fjspdf-invoice-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edisonneza%2Fjspdf-invoice-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/edisonneza","download_url":"https://codeload.github.com/edisonneza/jspdf-invoice-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339155,"owners_count":20923014,"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":["babel","javascript-library","jspdf","jspdf-template","npm-package","pdf","pdf-invoice","webpack"],"created_at":"2025-01-13T01:14:29.815Z","updated_at":"2025-04-05T13:05:18.609Z","avatar_url":"https://github.com/edisonneza.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PDF Invoice Template\n\n\nTo fix Angular v13 and some NodeJs issues, I've separated into two different npm packages, as below:\n\n[For web browsers](https://www.npmjs.com/package/jspdf-invoice-template):    \u003ci\u003enpm i jspdf-invoice-template\u003c/i\u003e\n\n[For NodeJs](https://www.npmjs.com/package/jspdf-invoice-template-nodejs):    \u003ci\u003enpm i jspdf-invoice-template-nodejs\u003c/i\u003e\n\n\nPDF template created to generate invoices based on props object. Using `jsPDF` library. ( `jsPDF` is exported also, so it can be used without importing jsPDF separately. )\n\nAll this code works by using an object as parameter for the function. \u003cbr/\u003e\nFrom \u003ci\u003e\u003cb\u003ev1.3.1\u003c/b\u003e\u003c/i\u003e all properties are optional and you can add them as empty string or just remove them from the prop object, if you want to display nothing. Also it can be used in different languages because all labels (and all text) can be set in the props object.\n\n\u003ch4\u003e\u003cb\u003e\u003ci\u003eFeel free for any suggestion or improvements.\u003c/i\u003e\u003c/b\u003e\u003c/h4\u003e\n\n## [Demo site](https://edisonneza.github.io/jspdf-invoice-template) | [Demo images](#demo-images) | [jsPDF Documentation](http://raw.githack.com/MrRio/jsPDF/master/docs/) | [Npm](https://www.npmjs.com/package/jspdf-invoice-template) | [Npm NodeJs](https://www.npmjs.com/package/jspdf-invoice-template-nodejs) \n\u003cbr/\u003e\n\n# Install and usage\n\u003cdetails open\u003e\n\u003csummary\u003eHow to install or load in my project?\u003c/summary\u003e\nThis small \"library\" can be imported in any project via `npm` or in browser via CDN by using `jsPDFInvoiceTemplate` variable. \n\nGet it from NPM:\n\n```sh\nnpm i jspdf-invoice-template\n```\nOr for NodeJs:\n```sh\nnpm i jspdf-invoice-template-nodejs\n```\n\nAlternatively, load latest version from a CDN:\u003cbr/\u003e\n\u003ci\u003e(Recommended to use a static version (not @latest) to prevent failure when updates are made)\u003c/i\u003e\n```html\n\u003cscript src=\"https://unpkg.com/jspdf-invoice-template@1.4.0/dist/index.js\"\u003e\u003c/script\u003e\n```\n\u003c/details\u003e\n\u003chr/\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eHow to use it?\u003c/summary\u003e\n\n## Usage\n\nYou're ready to start creating your invoice PDF document: \n\n```javascript\n//by importing \nimport jsPDFInvoiceTemplate from \"jspdf-invoice-template\";\n\n//or directly in browser\njsPDFInvoiceTemplate.default( propsObject );\n\n\n//you can either import the `OutputType` const or `jsPDF` class if you want to create another PDF from scratch (without using the template) \nimport jsPDFInvoiceTemplate, { OutputType, jsPDF } from \"jspdf-invoice-template\";\n\n//or directly in browser\nconst outputTypes = jsPDFInvoiceTemplate.OutputType;\nconst jsPDF = jsPDFInvoiceTemplate.jsPDF();\n\njsPDFInvoiceTemplate.default( propsObject );\n```\n\u003c/details\u003e\n\u003chr/\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWhat about Parameters Object?\u003c/summary\u003e\n\n## Parameters object\n\nJust edit the props object and call the function, nothing more... 😊\n\n```javascript\nconst pdfObject = jsPDFInvoiceTemplate(props); //returns number of pages created\n\n//or in browser\nvar pdfObject = jsPDFInvoiceTemplate.default(props); //returns number of pages created\n\nvar props = {\n    outputType: OutputType.Save,\n    onJsPDFDocCreation?: (jsPDFDoc: jsPDF) =\u003e void, //Allows for additional configuration prior to writing among others, adds support for different languages and symbols\n    returnJsPDFDocObject: true,\n    fileName: \"Invoice 2021\",\n    orientationLandscape: false,\n    compress: true,\n    logo: {\n        src: \"https://raw.githubusercontent.com/edisonneza/jspdf-invoice-template/demo/images/logo.png\",\n        type: 'PNG', //optional, when src= data:uri (nodejs case)\n        width: 53.33, //aspect ratio = width/height\n        height: 26.66,\n        margin: {\n            top: 0, //negative or positive num, from the current position\n            left: 0 //negative or positive num, from the current position\n        }\n    },\n    stamp: {\n        inAllPages: true, //by default = false, just in the last page\n        src: \"https://raw.githubusercontent.com/edisonneza/jspdf-invoice-template/demo/images/qr_code.jpg\",\n        type: 'JPG', //optional, when src= data:uri (nodejs case)\n        width: 20, //aspect ratio = width/height\n        height: 20,\n        margin: {\n            top: 0, //negative or positive num, from the current position\n            left: 0 //negative or positive num, from the current position\n        }\n    },\n    business: {\n        name: \"Business Name\",\n        address: \"Albania, Tirane ish-Dogana, Durres 2001\",\n        phone: \"(+355) 069 11 11 111\",\n        email: \"email@example.com\",\n        email_1: \"info@example.al\",\n        website: \"www.example.al\",\n    },\n    contact: {\n        label: \"Invoice issued for:\",\n        name: \"Client Name\",\n        address: \"Albania, Tirane, Astir\",\n        phone: \"(+355) 069 22 22 222\",\n        email: \"client@website.al\",\n        otherInfo: \"www.website.al\",\n    },\n    invoice: {\n        label: \"Invoice #: \",\n        num: 19,\n        invDate: \"Payment Date: 01/01/2021 18:12\",\n        invGenDate: \"Invoice Date: 02/02/2021 10:17\",\n        headerBorder: false,\n        tableBodyBorder: false,\n        header: [\n          {\n            title: \"#\", \n            style: { \n              width: 10 \n            } \n          }, \n          { \n            title: \"Title\",\n            style: {\n              width: 30\n            } \n          }, \n          { \n            title: \"Description\",\n            style: {\n              width: 80\n            } \n          }, \n          { title: \"Price\"},\n          { title: \"Quantity\"},\n          { title: \"Unit\"},\n          { title: \"Total\"}\n        ],\n        table: Array.from(Array(10), (item, index)=\u003e([\n            index + 1,\n            \"There are many variations \",\n            \"Lorem Ipsum is simply dummy text dummy text \",\n            200.5,\n            4.5,\n            \"m2\",\n            400.5\n        ])),\n        additionalRows: [{\n            col1: 'Total:',\n            col2: '145,250.50',\n            col3: 'ALL',\n            style: {\n                fontSize: 14 //optional, default 12\n            }\n        },\n        {\n            col1: 'VAT:',\n            col2: '20',\n            col3: '%',\n            style: {\n                fontSize: 10 //optional, default 12\n            }\n        },\n        {\n            col1: 'SubTotal:',\n            col2: '116,199.90',\n            col3: 'ALL',\n            style: {\n                fontSize: 10 //optional, default 12\n            }\n        }],\n        invDescLabel: \"Invoice Note\",\n        invDesc: \"There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary.\",\n    },\n    footer: {\n        text: \"The invoice is created on a computer and is valid without the signature and stamp.\",\n    },\n    pageEnable: true,\n    pageLabel: \"Page \",\n};\n```\n\u003c/details\u003e\n\u003chr/\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWhat will be returned?\u003c/summary\u003e\nThe return object depends on parameters object. See the code below:\n\n```typescript\n{\n    pagesNumber: number, // (always) - number of pages\n    jsPDFDocObject: jsPDF, // if (returnJsPDFDocObject: true) - the doc already created. You can use it to add new content, new  pages.\n    blob: Blob, // if (outputType: 'blob') - returns the created pdf file as a Blob object. So you can upload and save it to your server. (Idea from a comment on Twitter)\n    dataUriString: string, // if (outputType: 'datauristring')\n    arrayBuffer: ArrayBuffer // if (outputType: 'arraybuffer')\n}\n\n//store it to a variable and use it wherever you want\nvar pdfCreated = jsPDFInvoiceTemplate.default({ ...parameters });\nvar blob = pdfCreated.blob;\n//...\nvar pagesNum = pdfCreated.pagesNumber;\nvar pdfObject = pdfCreated.jsPDFDocObject;\n```\n\u003c/details\u003e\n\u003chr/\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eHow to use the returned jsPDFDocObject?\u003c/summary\u003e\n\n```typescript\n//example: create a PDF using the template\nvar pdfCreated = jsPDFInvoiceTemplate.default({ ...parameters });\n\n//add new page or new content -\u003e see jsPDF documentation\npdfCreated.jsPDFDocObject.addPage();\npdfCreated.jsPDFDocObject.text(\"Test text\", 10, 50);\n//...\n\npdfCreated.jsPDFDocObject.save(); //or .output('\u003coutputTypeHere\u003e');\n```\n\u003c/details\u003e\n\n\u003chr/\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eWhat about fonts and special characters?\u003c/summary\u003e\nYou can use the `onJsPDFDocCreation` property arrow function to hook into configuring the jsPDF functionality as soon as it's initialized.\n\n\nAllowing the support of multiple languages and currencies for your invoice as outlined in [jsPDF documentation](https://rawgit.com/MrRio/jsPDF/master/docs/):\n\u003e Use of Unicode Characters / UTF-8:\nThe 14 standard fonts in PDF are limited to the ASCII-codepage. If you want to use UTF-8 you have to integrate a custom font, which provides the needed glyphs. \n\n\u003cb\u003eExample Usage:\u003c/b\u003e\n\n```typescript\njsPDFInvoiceTemplate({\n  //https://github.com/edisonneza/jspdf-invoice-template/issues/20#issuecomment-1859975854\n  onJsPDFDocCreation: (doc: jsPDF) =\u003e {\n      //var font = \"...\";\n      doc.addFileToVFS('LiberationSans-Regular-normal.ttf', font);\n      doc.addFont('LiberationSans-Regular-normal.ttf', 'LiberationSans-Regular', 'normal');\n      doc.setFont('LiberationSans-Regular');\n      \n  },\n});\n```\n\u003c/details\u003e\n\n\u003csummary\u003e--- Changelog ---\u003c/summary\u003e\n\n\u003cdetails open\u003e\n\u003csummary\u003ev.1.4.4\u003c/summary\u003e\n\n  * Added Support for modifying fonts by adding direct access to the jsPDF Document Object, this allows the support for additional fonts as well as changing the font for additional languages.\n    - In the event additional functionality is required for certain operation it can be injected as a wrapper function for the underlying jsPDF functionality without needed to modify the base source files.\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003ev.1.4.3\u003c/summary\u003e\n\n  * Dynamic rows at the end of the table (total, vat, subtotal etc)\n  * Added stamp image at the left bottom of the page (image as a qr code)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ev.1.4.2\u003c/summary\u003e\n\n  * Separated Nodejs and Web based, into two packages\n  * Fixed Image and Blob type (for Nodejs)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ev.1.4.0\u003c/summary\u003e\n\n  * Added compress option\n  * Added custom column style (width) - (FYI: Width-\u003e portrait: 210; landscape: 297)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ev.1.3.2\u003c/summary\u003e\n\n  * Fixed package entry point\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003ev.1.3.1\u003c/summary\u003e\n\n  * Added feature to add or remove columns \n  * Dynamic height in all columns\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ev.1.2.0\u003c/summary\u003e\n\n  * Added returnJsPDFDocObject prop\n  * Added support for returning different outputs based on output type prop\n  * All parameter object properties are now OPTIONAL\n  * Return jspdf doc object, so now can be added new content or edited the pdf file and output it in all types that jsPDF library supports. \n\u003c/details\u003e\n\n\u003c/details\u003e\n\u003chr/\u003e\n\n# Demo images\n![portrait version](https://raw.githubusercontent.com/edisonneza/jspdf-invoice-template/demo/images/portrait_mode.PNG)\n\nLandscape:\n\n![portrait version](https://raw.githubusercontent.com/edisonneza/jspdf-invoice-template/demo/images/landscape_mode.PNG)\n\n\n## 👋\n\n\n### Development - Generate types\n```\nnpx -p typescript tsc src/index.js --declaration --allowJs --emitDeclarationOnly --outDir dist/src/\n\nnpx -p typescript tsc src/index.js --declaration --allowJs --emitDeclarationOnly \n```\n\nCopyright\n(c) 2022 Edison Neza, https://github.com/edisonneza/jspdf-invoice-template\n\nPermission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedisonneza%2Fjspdf-invoice-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedisonneza%2Fjspdf-invoice-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedisonneza%2Fjspdf-invoice-template/lists"}