{"id":20414328,"url":"https://github.com/i2djs/pdf-frame","last_synced_at":"2025-04-06T03:06:33.727Z","repository":{"id":171056907,"uuid":"647390231","full_name":"I2Djs/pdf-frame","owner":"I2Djs","description":"pdf-frame is a web framework designed specifically for handling PDF and Canvas graphics requirements. It provides component support for popular frameworks like Vue, Nuxt and React. With its declarative HTML syntax and semantics, it offers a straightforward way to define PDF/Canvas graphical content efficiently.","archived":false,"fork":false,"pushed_at":"2024-12-02T18:49:29.000Z","size":6054,"stargazers_count":52,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-06T03:06:29.163Z","etag":null,"topics":["animation","canvas","data-visualization","javascript","nuxtjs","nuxtjs-template","pdf","pdf-generator","visualizations","vuejs","web-application"],"latest_commit_sha":null,"homepage":"https://www.pdf-frame.org","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/I2Djs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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":"2023-05-30T17:17:01.000Z","updated_at":"2025-03-13T15:57:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"c038e4a8-82e9-4631-b5d2-ed7cd503bc5c","html_url":"https://github.com/I2Djs/pdf-frame","commit_stats":{"total_commits":93,"total_committers":1,"mean_commits":93.0,"dds":0.0,"last_synced_commit":"bf1635b332dce0a37e6863e48b60a4f0f0ad37d5"},"previous_names":["i2djs/i2d-frame","i2djs/i2d-pdf-frame","i2djs/pdf-frame"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/I2Djs%2Fpdf-frame","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/I2Djs%2Fpdf-frame/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/I2Djs%2Fpdf-frame/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/I2Djs%2Fpdf-frame/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/I2Djs","download_url":"https://codeload.github.com/I2Djs/pdf-frame/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247427006,"owners_count":20937201,"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":["animation","canvas","data-visualization","javascript","nuxtjs","nuxtjs-template","pdf","pdf-generator","visualizations","vuejs","web-application"],"created_at":"2024-11-15T06:09:14.316Z","updated_at":"2025-04-06T03:06:33.699Z","avatar_url":"https://github.com/I2Djs.png","language":"Vue","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/I2Djs/pdf-frame/blob/main/assets/pdf-frame.svg?raw=true\" width=500\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003e\n    \n  [www.pdf-frame.org](https://www.pdf-frame.org)\n   \n\u003c/h3\u003e\n\n# pdf-frame\n\n| Package | version |\n| --- | --- |\n| [pdf-frame-vue](https://github.com/I2Djs/pdf-frame/tree/main/packages/pdf-frame-vue) | [![npm](https://img.shields.io/npm/v/@i2d/pdf-frame-vue.svg)](https://www.npmjs.com/package/@i2d/pdf-frame-vue) |\n| [pdf-frame-nuxt](https://github.com/I2Djs/pdf-frame/tree/main/packages/pdf-frame-nuxt) | [![npm](https://img.shields.io/npm/v/@i2d/nuxt-pdf-frame.svg)](https://www.npmjs.com/package/@i2d/nuxt-pdf-frame) |\n\n## Introduction\n\nPdf-frame is a JavaScript web framework for client-side PDF/Canvas rendering. With its declarative HTML syntax and semantics, it offers an easy and efficient way to define PDF/Canvas graphical content. It follows syntax similar to SVG's and provides component support for popular frameworks like Vue, nuxt, and React(work in progress). Powered by [i2djs](https://github.com/I2Djs/I2Djs), PDF-frame presently supports rendering outputs as PDF and Canvas formats.\n\n## Features\n\n* **Declarative Syntax:** Easily define PDF/Canvas graphical content using a clear and declarative syntax.\n* **SVG-like Syntax and Semantics:** Adopts the familiar SVG tag and attribute syntax for defining geometrical shapes.\n* **Consistent Rendering:** Provides the same syntax and semantics for rendering both PDF and Canvas outputs.\n* **Auto Pagination:** Content overflow is taken care by the engine by spawning new pages, ensuring the document's integrity and readability.\n* **Multi-page Support:** Create multi-page PDF documents seamlessly.\n* **Animations \u0026 Events:** Easy way to define the animations and events on elements in canvas context.\n* Framework component support: Vue, nuxt.\n\n## Blogs:\n  * [Creating visually rich PDFs with PDF-Frame-Vue](https://nswamy14.hashnode.dev/creating-visually-rich-pdfs-with-pdf-frame-vue)\n  * [Simplifying PDF Rendering in Vue with PDF-Frame-Vue](https://nswamy14.hashnode.dev/pdf-rendering-made-easy-with-pdf-frame-vue)\n\n### Canvas Template\n```html\n\u003cpdfFrame type=\"canvas\" width=\"595\" height=\"841\"\u003e\n  \u003ci-g :transform=\"{ translate: [100, 200], scale: [2, 3], rotate: [ 45, 0, 0] }\"\u003e\n    \u003ci-text :x=\"30\" :y=\"60\" :text=\"'Page 1 Title'\" :width=\"530\" :style=\"{font: '25px Arial', align: 'center'}\"\u003e\u003c/i-text\u003e\n    \u003ci-rect :x=\"30\" :y=\"100\" :width=\"535\" :height=\"700\" :style=\"{ fillStyle:'#f0f0f0' }\"\u003e\u003c/i-rect\u003e\n    \u003ci-image src=\"src/assets/i2d-frame.svg\" :width=\"200\" :x=\"175\" :y=\"100\"\u003e\u003c/i-image\u003e\n  \u003c/i-g\u003e\n\u003c/pdfFrame\u003e\n```\n\n### PDF Basic Template\n```html\n\u003cpdfFrame type=\"pdf\" width=\"595\" height=\"841\"\u003e\n  \u003ci-g :transform=\"{ translate: [100, 200], scale: [2, 3], rotate: [ 45, 0, 0] }\"\u003e\n    \u003ci-text :x=\"30\" :y=\"60\" :text=\"'Page 1 Title'\" :width=\"530\" :style=\"{font: '25px Arial', align: 'center'}\"\u003e\u003c/i-text\u003e\n    \u003ci-rect :x=\"30\" :y=\"100\" :width=\"535\" :height=\"700\" :style=\"{ fillStyle:'#f0f0f0' }\"\u003e\u003c/i-rect\u003e\n    \u003ci-image src=\"src/assets/i2d-frame.svg\" :width=\"200\" :x=\"175\" :y=\"100\"\u003e\u003c/i-image\u003e\n  \u003c/i-g\u003e\n\u003c/pdfFrame\u003e\n```\n\n### Multi-Page PDF Template\n```html\n\u003cpdfFrame type=\"pdf\" width=\"595\" height=\"841\"\u003e\n    \u003c!-- Page Templates --\u003e\n    \u003ci-page-template id=\"temp-1\"\u003e\n        \u003ci-rect :x=\"0\" :y=\"0\" :width=\"595\" :height=\"841\" :style=\"{ fillStyle:'#ffffff' }\"\u003e\u003c/i-rect\u003e\n        \u003ci-text :x=\"30\" :y=\"30\" :text=\"'Header Text'\" :width=\"530\" :style=\"{font: '15px Arial'}\"\u003e\u003c/i-text\u003e\n        \u003ci-text :x=\"30\" :y=\"810\" :text=\"'Footer Text'\" :width=\"530\" :style=\"{font: '15px Arial'}\"\u003e\u003c/i-text\u003e\n    \u003c/i-page-template\u003e\n    \u003c!-- Page 1 --\u003e\n    \u003ci-page p-template=\"temp-1\"\u003e\n      \u003ci-g :transform=\"{ translate: [100, 200], scale: [2, 3], rotate: [ 45, 0, 0] }\"\u003e\n          \u003ci-text :x=\"30\" :y=\"60\" :text=\"'Page 1 Title'\" :width=\"530\" :style=\"{font: '25px Arial', align: 'center'}\"\u003e\u003c/i-text\u003e\n          \u003ci-rect :x=\"30\" :y=\"100\" :width=\"535\" :height=\"700\" :style=\"{ fillStyle:'#f0f0f0' }\"\u003e\u003c/i-rect\u003e\n      \u003c/i-g\u003e\n    \u003c/i-page\u003e\n    \n    \u003c!-- Page 2 --\u003e\n    \u003ci-page p-template=\"temp-1\"\u003e\n        \u003ci-text :x=\"30\" :y=\"60\" :text=\"'Page 2 Title'\" :width=\"530\" :style=\"{font: '25px Arial', align: 'center'}\"\u003e\u003c/i-text\u003e\n        \u003ci-image src=\"src/assets/i2d-frame.svg\" :width=\"200\" :x=\"175\" :y=\"100\"\u003e\u003c/i-image\u003e\n    \u003c/i-page\u003e \n\u003c/pdfFrame\u003e\n```\n  \n\n## Contributing\nContributions are welcome! If you would like to contribute to pdf-frame, please follow the guidelines in CONTRIBUTING.md.\n\n## License\nThis project is licensed under the MIT License. See the [LICENSE](https://raw.githubusercontent.com/I2Djs/pdf-frame/main/LICENSE) file for more details.\n\n## Contact\nFor any inquiries or support, please contact `narayanaswamy14@gmail.com`.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fi2djs%2Fpdf-frame","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fi2djs%2Fpdf-frame","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fi2djs%2Fpdf-frame/lists"}