Printing reports in Angular 9

I have a requirement in my Angular 9 application to generate and print reports.

1. I am looking for suggestions on how to handle printing reports where a user triggers the action by clicking a button, and the report data needs to be fetched from the database

2. I do not want to use window.print() because it prints the entire screen which is not ideal. Additionally, I would like to display a loading spinner while the report data is being retrieved.

In terms of backend development, I am utilizing .Net Core.

Any assistance or guidance on this matter would be greatly appreciated.

javascriptangulartypescriptreportangular9

Answer №1

To handle this task on the backend, create a method that can perform the necessary operations for you. Utilize the database based on your requirements and implement the 'ViewAsPDF' method.

Write the code you need and ensure it serves its purpose effectively.

If you have a service and method dedicated to handling Database tasks:

public IActionResult GeneratePDFReport()
        {
            var data = _dataService.GetPDFData(); // Retrieve data from DB for generating report

            var pdfReport = new ViewAsPdf("PDFReport")
            {
                PageMargins = { Left = 5, Bottom = 5, Right = 5, Top = 5 }, // Adjust margins as required
                Model = data
            };
            return pdfReport;
        }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The malfunctioning of my Jquery datepicker

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <script src="jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).r ...

javascriptjquery

The failure to import a node module in next.js with typescript

I'm currently working on integrating a package called bcrypt into my project. I have successfully installed it using npm install bcrypt. Although the package is visible in the node_modules folder, I am encountering an error when trying to import it i ...

typescriptnext.jsnpm-installtypescript-module-resolution

The if-else condition is creating issues with the functionality of the buttons

Update #1 - Enhanced query, fresh functional link. Live site: The challenge at hand revolves around an if-else statement related to the form buttons on the right-hand column of the webpage. Scroll past the header and navigation to witness the issue in ...

javascriptjqueryif-statement

Issue with ScrollBar functionality in IE

Hello, I am experiencing an issue with the vertical scrollbar on the addUser Page. When I try to select multiple values in the dropdown menu, the page length increases but the scrollbar does not function correctly. This problem only seems to occur in Inter ...

angular

Implementing one-to-many relationships using Knex.js and Bookshelf.js in an ExpressJS/Postgres environment

When a user registers, I want to create a record on two tables simultaneously. user.js const db = require('../database'); const User = db.Model.extend({ tableName: 'login_user', hasSecurePassword: true, hasTimestamps: true, t ...

javascriptnode.jsexpressknex.jsbookshelf.js

What is the process for obtaining intersection set data from an array?

I'm trying to find the intersection set within an array only containing type 1 and 2. Can you help me with that? var arr = [ { id: 1, auths: [ { authId: 1, type: 1, value: 'Test1' }, { authId: 2, type: 1, ...

javascript

jQuery dynamically updating calculations on a single row consecutively

Currently, I am in the process of developing a small table to calculate potential winnings from betting on a rubber duck race with specific odds for each duck. I have managed to get most of it working but have encountered an issue... Upon loading the pag ...

javascriptjquery

Ways to dynamically link a JSON response object to an entity?

In my ng2 implementation, I have a user.service.ts file that calls a REST service and returns JSON data. The code snippet below shows how the getUser function retrieves the user information: getUser(id: number): Promise<User> { return this.http. ...

javascriptangulartypescript

Firefox compatibility issue caused by jQuery's appendTo function disrupting hyperlink functionality

I've successfully implemented the material design ripple effect using jQuery, which functions well in IE11 and Chrome 46. However, I've encountered an issue in Firefox 39 where applying the effect to links prevents redirection. Upon investigation ...

javascriptjqueryhtmlfirefox

Submitting a Django form seamlessly without reloading the page

Currently using Django-Angular, I am attempting to submit a form and access the data on the backend. Despite achieving this, I have noticed that the page reloads when saving the form. Is there a way to achieve this without having the page render? forms.py ...

javascriptpythonangularjsdjangoforms

How can you merge webSDK with jQuery within a Vue Component?

I am currently working on incorporating the webSDK found at into our Vue application. My goal is to load jquery only within a single component. Below is the code I have written, however, when I click the button, it does not seem to function as expected. ...

javascriptjqueryvue.jsvuejs2

Using an array of objects as a data source for the Material Angular table

My user data is causing some issues and looks like this... [{"firstName":"Pinkie","lastName":"Connelly","username":"Darlene.Marvin","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="19506a767b7c75464b7c77777c6b5971766d74 ...

angulartypescriptangular-material

Updating Bootstrap modal content based on button clickExplanation on how to dynamically change the content

I am looking to dynamically change the content displayed inside a modal based on the button that is clicked. For example, clicking button one will only show the div with the class 'one' while hiding the others. $('#exampleModalCenter&a ...

javascripthtmljquerybootstrap-modal

Adding information into material-ui dropdown using React JS

I could use some assistance with populating data into a Dropdown using material-ui in React. I am new to React and unsure about how to achieve this. I know that I can pass props to the dropdown, but it's not very clear to me. Here is my current code: ...

javascriptreactjsmaterial-ui

react-vimeo not firing onPause and onPlay events

I am facing an issue with triggering props when playing a Vimeo video on my webpage. Here's a snippet of my code: import Vimeo from '@u-wave/react-vimeo'; const handleVimeoProgress = (data: any) => { console.log('Progress:' ...

typescriptnext.jsvimeo

What is the best way to show a pop-up model at the bottom of a webpage?

I am working on a project that involves a popup modal that needs to appear after 10 seconds. However, the issue I am facing is that the modal is currently displaying at the top of the page, but I would like it to be shown at the bottom of the page just abo ...

javascriptjqueryhtmlcsstwitter-bootstrap

State is not currently utilizing the variable

const DonorsTables = () =>{ const [search, setSearch] = useState(""); const [countries, setCountries] = useState([]); const [filteredcountries, setFilteredCountries] = useState([]); const getCountries = async () => { try { ...

javascriptreactjsreact-hooksreact-table-v7

Learn how to dynamically show the chosen option from a dropdown menu in input text fields using AngularJS

html file: <select ng-model="shipping" ng-options="shipping.shipping for shipping in shipAddress"> <option value=''>--Select Address --</option> </select> <form name="shippingForm" class="form-horizontal" role="form" ...

javascripthtmlangularjs

Encountering a Problem When Exporting a Class Using Require

I find myself struggling with a particular detail that eludes me. Despite exploring numerous suggested solutions found through Google, I am overwhelmed by the uncertainty of what actually works. Here is MyProject on Replit and the problematic class I&apos ...

javascriptnode.jsecmascript-6es6-moduleses6-class

Error in MEAN CRUD operation cannot be determined

{ text: undefined, done: false, _id: 529e16025f5222dc36000002, __v: 0 } PUT /api/todos/529e16025f5222dc36000002 200 142ms - 68b Encountering an issue while updating my CRUD todo list. Despite receiving a successful status code of 200 after submittin ...

javascriptnode.jsmongodbangularjscrud