https://github.com/nickpolizogopoulos/product-list-offer
A free Angular Application for businesses to easily generate product offers as PDFs.
https://github.com/nickpolizogopoulos/product-list-offer
angular angular-material angular-signals firebase-hosting jspdf-library sass-library tippyjs typescript zoneless
Last synced: 3 months ago
JSON representation
A free Angular Application for businesses to easily generate product offers as PDFs.
- Host: GitHub
- URL: https://github.com/nickpolizogopoulos/product-list-offer
- Owner: nickpolizogopoulos
- Created: 2024-10-10T08:55:17.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-01-23T12:47:44.000Z (5 months ago)
- Last Synced: 2025-01-23T13:39:12.980Z (5 months ago)
- Topics: angular, angular-material, angular-signals, firebase-hosting, jspdf-library, sass-library, tippyjs, typescript, zoneless
- Language: TypeScript
- Homepage: https://product-offer-to-pdf.web.app/
- Size: 5.33 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Product offer to .pdf
This project is a powerful example of utilizing [Angular](https://github.com/angular/angular-cli) signals in combination with the [jsPDF](https://rawgit.com/MrRio/jsPDF/master/docs/) library.
Launch the project [[ Here ]](https://product-offer-to-pdf.web.app/).
It is an Angular 19 Application that dynamically renders content in Greek, English, Spanish, French, Italian, Russian and Korean languages based on the user's selection from the nav bar button.
## Signals & Zoneless Angular Development
With Angular Signals enabling dynamic updates for form data and interactive elements, and the adoption of Angular Zoneless ensuring improved performance and reduced complexity, the app delivers a highly responsive and efficient user experience.
## Angular Material & SASS
The elegant and flexible Angular Material, combined with SASS, offers a clean and modern design
## Setting a custom font for jsPDF
Assuming you already have your favorite font .ttf file:
Convert your .ttf file to Base64 using the [Base64.Guru](https://base64.guru/converter/encode/file) free tool.
Choose JSON as the Output Format and copy the code to a new .json file in your project. Expect lag, the output is big.
Import all as font:
```
import * as font from 'your/path/to/json/file/here';
```
Use the code:
```
doc.addFileToVFS('FontName.ttf', (font as any).file.data);
doc.addFont('FontName.ttf', 'FontName', 'normal');
doc.setFont('FontName');
```
If you use a table like in this Application, make sure you include your font in the table styles:
```
styles: {
font: 'FontName',
fontSize: 10,
}
```