Export HTML Table to Excel and PDF using jQuery DataTable in ASP.Net Core MVC

trisetia...

SOLVED CLOSED ACTIVE ANSWERED
User: trisetia302
Posted: on Aug 29, 2021 11:10 PM
Forum: ASP.Net Core MVC
Answer: 1
Views: 17070
Sample Code: Download

Hi Guys,

I'm tried to make export 2 button to pdf and excel extension, nothing error shown but just silent button when clicked.

I was follow step by step the documentation https://datatables.net/extensions/buttons/examples/html5/simple.html but still not working.

Any help could be appriciate.

View

@using System.Data
@model DataTable
@{
    ViewBag.Title = "Report By Date Parameter";
    Layout = "~/Views/Shared/AdminDashboard/_Layout.cshtml";
}
<script src="~/assets/plugins/DataTableExport/jquery-3.5.1.js"></script>
<script src="~/assets/plugins/DataTableExport/jquery.dataTables.min.js"></script>
<script src="~/assets/plugins/DataTableExport/dataTables.buttons.min.js"></script>
<script src="~/assets/plugins/DataTableExport/jszip.min.js"></script>
<script src="~/assets/plugins/DataTableExport/pdfmake.min.js"></script>
<script src="~/assets/plugins/DataTableExport/vfs_fonts.js"></script>
<script src="~/assets/plugins/DataTableExport/buttons.html5.min.js"></script>
<link href="~/assets/plugins/DataTableExport/jquery.dataTables.min.css" rel="stylesheet" />
<link href="~/assets/plugins/DataTableExport/buttons.dataTables.min.css" rel="stylesheet" />

<script type="text/javascript" lang="javascript">
    $(document).ready(function () {
        $('#example').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'excelHtml5',
                'pdfHtml5'
            ]
        });
    });
</script>
<div align="right">
    <button class="btn btn-primary" tabindex="0" aria-controls="example" type="button"><span>Export To Excel</span></button>
    <button class="btn btn-primary" tabindex="0" aria-controls="example" type="button"><span>Export To  PDF</span></button>
</div>
<table id="example" class="display" style="width:100%">
        <thead class="text-center align-middle vertical align-content-center" style="background-color:aquamarine">
            <tr>
                <th>Kode Pinjam</th>
                <th>Tanggal Pinjam</th>
                <th>Tanggal Kembali</th>
                <th>Kode Petugas</th>
                <th>Nama Petugas</th>
                <th>Kode Anggota</th>
                <th>Nama Anggota</th>
            </tr>
        </thead>
        <tbody class="text-center">
            @foreach (DataRow row in Model.Rows)
            {
                <tr>
                    <td style="width:10%">
                        @row["Kode_Pinjam"]
                    </td>
                    <td style="width:10%">
                        @row["Tanggal_Pinjam"]
                    </td>
                    <td style="width:10%">
                        @row["Tanggal_Kembali"]
                    </td>
                    <td style="width:10%">
                        @row["Kode_Petugas"]
                    </td>
                    <td style="width:10%">
                        @row["Nama_Petugas"]
                    </td>
                    <td style="width:10%">
                        @row["Kode_Anggota"]
                    </td>
                    <td style="width:10%">
                        @row["Nama_Anggota"]
                    </td>
                </tr>
            }
        </tbody>
    </table>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Aug 30, 2021 06:10 AM
Report

Hi trisetia302,

Refer below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#example').DataTable({
                dom: 'Bfrtip',
                buttons: [{
                    extend: 'excel',
                    text: 'Excel',
                    className: 'exportExcel',
                    filename: 'Test_Excel',
                    exportOptions: { modifier: { page: 'all'} }
                },
                {
                    extend: 'pdf',
                    text: 'PDF',
                    className: 'exportExcel',
                    filename: 'Test_Pdf',
                    exportOptions: { modifier: { page: 'all'} }
                }]
            });
 
        });
    </script>
</head>
<body>
    <div>
        <table id="example" class="display nowrap" style="width:100%">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Country</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Mudassar Khan</td>
                    <td>India</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Maria</td>
                    <td>Austria</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Ana Trujillo</td>
                    <td>France</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Antonio Moreno</td>
                    <td>Brazil</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>Thomas Hardy</td>
                    <td>Ireland</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>Christina Berglund</td>
                    <td>Italy</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>Hanna Moos</td>
                    <td>Finland</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>Laurence Lebihan</td>
                    <td>Finland</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>Elizabeth Lincoln</td>
                    <td>Canada</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>Victoria Ashworth</td>
                    <td>UK</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Export HTML Table to Excel and PDF using jQuery DataTable in ASP.Net Core MVC

Company

Explore

Follow us

Contact Us