PDF Flyer Generator (Web App)
Projects | | Links:
A JSON powered PDF flyer generator. Templates are defined in JSON with spots designated as dynamic content using predefined components. Users can interact with those components to supply data. Both the template JSON and user supplied data are sent to a web server where an identical PDF is generated and made available for download.
Overview
Realtors need a lot of flyers and marketing material. Oddly enough, they often ask the Loan Officers they partner with to create that material for them. They offload the work, but it’s often an opportunity for the Loan Officer to “Co-Brand” and establish a relationship with the would be borrower.
Features
- JSON powered templates with dynamic content sections
- Markdown support with predefined styles
- Predefined components / content blocks for special dynamic content
- Canvas image upload, resize, and crop component
- Dynamic text component
- POST’ing the JSON data + JSON template to the WebAPI generates an identical PDF
- Store all submissions and submission data for compliance reasons (and for easy template history)
- Save “rolledex” of Realtors for easy insertion into template “contact blocks”
The true power behind this is that you can now create any number of templates by creating a new layout in JSON. Each layout supports dynamic content by way of “Canvas Image Component” and the “Dynamic Text Editor Component”. To extend the application, one would only need to add new dynamic components and map how they’re rendered to the output PDF generated by the PDFsharp library.
Canvas Image Component:
It’s rough, but it works. You can see an early version of its source code on this pen.
Dynamic Text Component:
This was fun. Any text can be rendered as “Dynamic Text” by wrapping it in backticks. The npm package marked allows us to hook into how it renders different markdown content. Normally, backticks wrap “code”, but for us they wrap dynamic content.
Content Template Component:
Users were able to save a “rollodex” of contacts. Switching the target contact would update the contact data for the template, changing any template sections that were bound to that data.
- You can see an album of app images: HERE
Technology Used
- Gulp, WebPack, NPM
- HTML5, SCSS, and Canvas Element
- Vue approachable, versatile, performant js view framework.
- marked A full-featured markdown parser and compiler, written in JavaScript.
- AWS S3 For remote file storage
- PDFsharp + MigraDoc to turn that raw JSON into a printable PDF
- C# ASP.NET CORE WebAPI, and MS SQL to power the backend
Note: Canvas is Powerful and Fun
Working with the Canvas element is not as straightforward as traditional web development, but it is incredibly powerful. After this project, I played around with it on CodePen and created the pen below. Wave your mouse over it. Click around.
See the Pen Canvas Paint by Tracing by Danny Brown (@dannyrb) on CodePen.
And that’s just scratching the surface. Take a look at Phaser.io or Pixi.js – Both well respected and maintained game engine frameworks for HTML5 game development with Canvas!
