Share via

How to utilize print report the lists of data in the table of an inventory webapp

MiKhel Navarra 20 Reputation points
2024-02-28T01:08:11.6333333+00:00

I have a print report functionality but its output is that the print report javascript takes all of the page looking like a screenshot, what i wanted is that the data in the table only has to be printed, and when i click the print button it'll be in pdf format to print it and it will also be downloadable. I am using ASP.NET Core MVC and also using Identity.Screenshot 2024-02-28 085317

Screenshot 2024-02-28 085341

Screenshot 2024-02-28 085453

Screenshot 2024-02-28 085515

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,553 questions
0 comments

3 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Ping Ni-MSFT 4,335 Reputation points Microsoft Vendor
    2024-02-28T07:29:30.6866667+00:00

    Hi @MiKhel Navarra,
    Add the following style to the separate css file(e.g site.css):

    /* Styles for printing */
@media print {
    body *
    {
        visibility: hidden;  /* Hide everything in body by default */
    }
    #employeesTable, #employeesTable * {
        visibility: visible;  /* Make the printable table and its contents visible */
    }
    #employeesTable {
        position: absolute;
        left: 0;
        top: 0;
    }
}

    Be sure your view like below:

    <table id="employeesTable"> 
    <!-- Table contents --> 
</table>
<button onclick="window.print();">Print Table</button>

    _Layout.cshtml:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"]</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <!--Your Custom Style-->
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />   
</head>
<body>
    <header>
        <!--Your header-->
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()   
        </main>
    </div>
    <footer class="border-top footer text-muted">
        <!--Your footer-->
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
    Best regards,
    Rena

  2. MiKhel Navarra 20 Reputation points
    2024-04-04T00:59:25.71+00:00

    I tried the previous code but still there is no development and i can't print report..

    this is in my [HttpPost] in my controller
    public IActionResult DownloadPdf(string item, string quantity, string unit, string amount, string remarks)

    {

    // Assuming you have some data to pass to the view

var model = new { Item = item, Quantity = quantity, Unit = unit, Amount = amount, Remarks = remarks };

// Return view as PDF file

var pdf = new ViewAsPdf("FoodItem", model)

{

    FileName = "FoodItemsList.pdf"

};

// Return PDF file path as a string

return pdf;

    }

    and for my viewdiv class="container">

    <div class="card shadow border-0 my-4">

    <div class="card-header bg-primary bg-gradient py-3 d-flex justify-content-between align-items-center">

        <div class="text-center">

            <h2 class="text-white py-2">Food Items List</h2>

        </div>

        <div class="text-end">

            <a href="https://localhost:44338/Home/Index" class="btn btn-secondary btn-sm mb-2">Back to Homepage</a>

            <a asp-controller="FoodItem" asp-action="Upsert" class="btn btn-custom mb-2">

                <i class="bi bi-plus-circle"></i> Create New Food Items

            </a>

            <button id="printButton" class="btn btn-info btn-sm mb-2"><i class="bi bi-printer"></i> Print Report</button>

        </div>

    </div>

    <div class="card-body p-0">

        <div class="table-responsive">

            <div class="mt-3 mb-3 d-flex justify-content-between align-items-center">

                <div class="input-group me-3">

                    <!-- Add margin to the right side of the search bar -->

                    <!-- Your search bar code here -->

                </div>

                <div class="input-group ms-3 me-3">

                    <!-- Add margin to the left and right side of the "Show entries" dropdown -->

                    <!-- Your "Show entries" dropdown code here -->

                </div>

            </div>

            <table id="tblData" class="table table-bordered table-striped mb-0">

                <thead>

                    <tr>

                        <th>Item</th>

                        <th>Quantity</th>

                        <th>Unit</th>

                        <th>Amount</th>

                        <th>Remarks</th>

                        <th></th>

                    </tr>

                </thead>

                <!-- Table body content here -->

            </table>

        </div>

    </div>

</div>

    </div>

    @section Scripts{

    <script src="~/js/fooditem.js"></script> 

    <script>

    $(document).ready(function () {

        $('#printButton').on('click', function () {

            // Perform AJAX request to trigger PDF generation

            $.ajax({

                url: '@Url.Action("DownloadPdf", "FoodItem")',

                method: 'POST',

                data: {

                    item: 'your item value',

                    quantity: '100', // Make sure to pass string values for all parameters

                    unit: 'your unit value',

                    amount: '150',

                    remarks: 'your remarks value'

                    // Add more parameters as needed

                },

                success: function (response) {

                    // Upon success, open PDF in a new tab

                    window.open(response, '_blank');

                },

                error: function () {

                    alert('Failed to generate PDF report.');

                }

            });

        });

    });

</script>

    }

    i have the existing button for print report but as soon as i click it, there is no response, and i can't retrieve the data and make the report through PDF.

    0 comments
  3. Bruce (SqlWork.com) 65,206 Reputation points
    2024-04-04T20:01:11.89+00:00

    you pdf action should return a url to retrieve the generated pdf file, not a filename. also if you will have more than one user, you should generate a unique name.

    0 comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.