![]() Once the plugins are installed, add the PDFGenerator Module to like below. $ npm install above command will add the PDFGenerator to the plugins folder. We will use Cordova PDFGenerator Plugin to implement this feature $ ionic cordova plugin add cordova-pdf-generator Let’s install the PDF generation plugin and the npm packages in our application. Note, the dummy data is coming from environment.ts for this demo, but for your actual app it should come from the server. We can see in above html code we have mapped through array of products using *ngFor=”let product of order.products”. This JSON can be added and accessed from environment.ts, but in the actual app you’ll have this data coming from server anyway. ![]() We’ll use a JSON of dummy order data, which will populate our HTML like the actual app. For demo, you can implement the PDF generation feature just on a simple button, using the dummy data same as a genuine full scale Grocery app. You can create the required UI as shown in the images for Enappd’ Grocery Platform, though it’s not mandatory. Step 2 - Create the required UI and dummy data For more details on creating a new Ionic app from scratch, check out our blog on Ionic Apps here. This will create an empty ionic project in the working directory of your pc. ( My environment for this blog is - Node 14.x, Ionic 5.5, Angular 11.x, NPM 7.x, Cordova 10.0 ) And -cordova tells the CLI to integrate Cordova support. The -type=angular told the CLI to create an Angular app. $ ionic start pdfgen blank -type=angular -cordova To create an Ionic Angular Project you just have to run one command and that’s it ! Rest of the things are handled by the Ionic-CLI. Generally in all our blogs, we start with creating blank Ionic app, so a new comer or beginner can also try the feature.
0 Comments
Leave a Reply. |