This opens up a lot of possibilities esp for improving our app's load performance. ConclusionĪs you can see, it is now quite easy and convenient for us to lazy load our packages when we feel like at runtime in our Angular apps. If you'd like to read up more on this webpack feature, here is the official documentation. This will then be used for lazy loading at runtime. As soon as webpack notices an import statement in your code with a package name inside it, it will automatically create a separate bundle file for that package during compilation. This works due to a webpack feature called dynamic imports. This is exactly what we wanted! Our app's initial size remains the same and we only load the PdfMake library when we need to - which saves us a hefty 3.7 MB in bundle size. What's more, if we look closely at the Network tab, we'll see the following two libraries were lazy loaded when we clicked the button. When we run our app now and click the 'Generate PDF' button, we should see the PDF generated and opened up in a new tab.
Let's open up our Developer Tools on the Network tab as well. Let's do ng serve and quickly test this out.
ng add let's include the required material modules in our file. Let's also add the Angular Material library, so we can use a material button to allow the user to generate the PDF. ng new angular-pdf-generator -routing =false With this out of the way, let's start integrating the library into an Angular app! Setting it upįirst, we'll create a new Angular 9 app by executing the following commands in our terminal or console. To know more about PDFMake's document definition object format, please refer to their official documentation. Since we had quite a lot of data and formatting to do, having an easier format saved us a lot of time! Other libraries required absolute positioning to position our content in the document. We chose PDFMake because it allows us to specify the data for generation using a document definition object format. This short post is going to discuss how we can integrate the PDFMake library with an Angular 9 app in a way that does not increase our initial bundle size! Why PDFMake? PDFMake is an excellent Javascript library for generating PDF documents. After some research we decided to use PDFMake for this purpose. Recently I worked on a feature for a client that involved generating a PDF document from his Angular web application.
0 kommentar(er)
