Contoh jsPDF AutoTable – Tabel ke PDF

Programming

Terakhir diubah: 17 Juni 2022.

Plugin JsPDF AutoTables untuk mengonversi tabel ke PDF. Ini adalah perpustakaan yang andal di sisi klien untuk menghasilkan laporan online dalam bentuk tabel.

Ini memiliki banyak fitur tentang proses produksi PDF menggunakan perpustakaan ini. Mendukung penyesuaian tampilan dengan mendefinisikan struktur dan gaya kolom tabel.

Pada artikel ini, kita akan melihat kemampuan plugin ini dan penggunaannya dengan contoh.

Kode berikut adalah contoh cepat mempelajari cara menggunakan perpustakaan jsPDF autoTable untuk mengonversi data tabular ke PDF.

Membuat berbagai opsi untuk menentukan badan, posisi awal, dan lainnya untuk membuat dokumen PDF. Akibatnya, ia mengeluarkan dokumen PDF dan meminta Anda untuk mengunduhnya di browser.

Contoh cepat


window.onload = function() {
    var doc = new jsPDF('p', 'pt', 'letter')
    // Supply data via script
    var body = [
               ['SL.No', 'Product Name', 'Price', 'Model'],
               [1, 'I-phone', 75000, '2021'],
               [2, 'Realme', 25000, '2022'],
               [3, 'Oneplus', 30000, '2021'],
               ]
    // generate auto table with body
    var y = 10;
    doc.setLineWidth(2);
    doc.text(200, y = y + 30, "Product detailed report");
    doc.autoTable({
        body: body,
        startY: 70,
        theme: 'grid',
                 })
    // save the data to this file
    doc.save('auto_table_with_javascript_data');
}

Tabel pdf gaya khusus

Dasar-dasar jsPDF Autotable

Plugin ini dapat menerima dua jenis format sumber untuk menghasilkan PDF standar.

  1. Array data baris tabel untuk suplai melalui skrip.
  2. Objek elemen tabel HTML untuk parsing untuk mengonversi tabel ke PDF.

Bagaimana cara mengintegrasikan?

Ada banyak cara untuk mengintegrasikan library ini ke dalam satu aplikasi. Yang tercantum di bawah ini.

  • Menggunakan npm Perintah seperti npm install jspdf jspdf-autotable
  • Unduh pustaka plugin dari Github.
  • Termasuk jsPDF dan jsPDF Autotable melalui URL CDN.
https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js

https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.25/jspdf.plugin.autotable.min.js

Kemungkinan

Daftar ini menunjukkan beberapa fitur yang paling umum digunakan dari plugin jsPDF AutoTables. Selain itu, ia memiliki lebih banyak fitur yang dapat ditemukan di halaman dokumentasi resmi.

  • Menyediakan opsi untuk menyesuaikan konten tabel dengannya htmlkan Kepalakan Tubuhkan Kakikan kolom. partikel untuk objek langsung html Dan Tubuh Diantaranya dibutuhkan.
  • Ini memberikan lebih banyak kontrol atas sel dan kolom tabel SelDef Dan kolomDef Properti
  • Ini memiliki tema internal untuk tabel dan juga memungkinkan Anda untuk menambahkan gaya khusus.
  • Ini menyediakan kait untuk menanggapi panggilan berbasis acara. Panggilan ini mengirimkan referensi hookData.

Skrip basis data

Skrip SQL berikut digunakan untuk memiliki data cadangan untuk sumber tabel PDF. Impor SQL ini sebelum menjalankan instance AutoTable menggunakan data database untuk menghasilkan PDF.

Membantu memuat data dinamis ke dalam tabel HTML.

  • Sumber HTML ini akan digunakan sebagai referensi dengan atribut Autotable.html.
  • Data ini juga dapat dikonversi sebagai objek JSON dan ditentukan dalam atribut Autotable.body untuk Menghasilkan PDF.

struktur.sql


--
-- Table structure for table `tbl_product`
--

CREATE TABLE `tbl_product` (
  `id` int(11) NOT NULL,
  `product_name` varchar(255) NOT NULL,
  `price` varchar(255) NOT NULL,
  `model` varchar(255) NOT NULL
);

--
-- Dumping data for table `tbl_product`
--

INSERT INTO `tbl_product` (`id`, `product_name`, `price`, `model`) VALUES
(1, 'GIZMORE Multimedia Speaker with Remote Control, Black', '2300', '2020'),
(2, 'Black Google Nest Mini', '3400', '2021'),
(3, 'Black Digital Hand Band, Packaging Type: Box', '1800', '2019'),
(4, 'Lenovo IdeaPad 3 Intel Celeron N4020 14\'\' HD ', '29490', '2021'),
(5, 'JBL Airpods', '2300', '2020'),
(6, 'Black Google Nest Mini', '3400', '2021'),
(7, 'Black Digital Hand Band, Packaging Type: Box', '1800', '2019'),
(8, 'Lenovo IdeaPad 3 Intel Celeron N4020 14\'\' HD ', '29490', '2021');


ALTER TABLE `tbl_product`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `tbl_product`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;

Hasilkan tabel HTML ke PDF sederhana menggunakan jsPDF AutoTables

Data tabel PDF dari database dinamis. Kode berikut mengambil catatan database dan menampilkannya di UI dengan tabel HTML.

Ini juga menunjukkan tombol yang, ketika diklik, mengaktifkan pembuatan PDF.

Acara klik memanggil fungsi JavaScript dengan nama Produksi meja(). Ke tabel HTML di UI TabelOtomatis.html pilihan.

html-ke-pdf-menggunakan-jspdf.php


<?php
namespace Phppot;

require_once __DIR__ . '/lib/DataSource.php';
$conn = new DataSource();
$sql = "SELECT * FROM tbl_product";
$result = $conn->select($sql);
?>
<html>
<title>Product</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>
<script src="assets/js/jspdf-autotable-custom.js"></script>
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

    <div class="container">
        <h2 class="text-center heading">Product detailed list</h2>
        <table class="table" id="product-table">
            <tr class="border">
                <th class="text-align">SL.No</th>
                <th>Product Name</th>
                <th class="text-align">Price</th>
                <th class="text-align">Model</th>
            </tr>
           <?php if (! empty($result)) {?>
 <?php foreach ($result as $k=>$val) {?>
        <tr class="content border">
                <td class="text-align"><?php echo $result[$k]["id"];?></td>
                <td class="border-dark"><?php echo $result[$k]["product_name"];?></td>
                <td class="text-align"><?php echo $result[$k]["price"];?></td>
                <td class="text-align"><?php echo $result[$k]["model"];?></td>
            </tr>
            <?php }}?>
        </table>
        <input type="button" class="export-button"
            onclick="generateTable()" value="Generate PDF" />
    </div>
</body>
</html>

Buat PDF dari tabel HTML menggunakan fungsi AutoTable

Tunjukkan skrip ini menghasilkanTabel () Menyiapkan fungsi data dan data judul dan tabel untuk ditampilkan dalam PDF.

Pada tabel otomatis () Fungsi ini menggunakan referensi pemilih ID tabel HTML untuk mengambil data tabel untuk PDF.

Itu juga memodifikasi koordinat awal PDF, tema dan gaya dengan referensi sampel jsPDF.

Dengan mem-parsing sumber tabel HTML, itu menghasilkan dokumen PDF yang dapat diunduh dan disimpan.


function generateTable() {
    var doc = new jsPDF('p', 'pt', 'letter');
    var y = 20;
    doc.setLineWidth(2);
    doc.text(200, y = y + 30, "Product detailed report");
    doc.autoTable({
        html: '#product-table',
        startY: 70,
        theme: 'grid',
        columnStyles: {
            0: {
                halign: 'right',
                tableWidth: 100,
                },
            1: {
                tableWidth: 100,
               },
            2: {
                halign: 'right',
                tableWidth: 100,
               },
            3: {
                halign: 'right',
                tableWidth: 100,
               }
        },

    })
    doc.save('auto_table_pdf');
}

Contoh basis otomatis

Tetapkan tema default dan gaya khusus untuk tabel PDF

Plugin jsPDF AutoTable menawarkan tema bawaan. Nilai yang mungkin adalah ‘stripped’, ‘grid’, ‘plain’ dan ‘css’.

Ini juga mendukung penambahan gaya khusus dengan mengubah opsi default plugin.

Contoh ini menggunakan plugin ini untuk menyesuaikan tampilan PDF keluaran dengan menerapkan gaya berpemilik. Gaya ini diterapkan di atas tampilan tema yang dikonfigurasi.

pdf-dengan-plugin-tema-dan-custom-styles.php


<html>
<title>Product</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

    <div class="container">
        <input type="button" class="export-button"
            onclick="setThemeCustomStyle();" value="Generate PDF" />
    </div>
</body>
</html>

AutoTable menyetel tema tabel PDF ke kisi dan menerapkan gaya khusus menggunakannya headStyles and columnStyles Pilihan.

Gaya kustom menimpa warna latar belakang sel, tinggi, dan pengaturan default lainnya.


function setThemeCustomStyle() {
    var doc = new jsPDF('p', 'pt', 'letter')
    // generate the above data table
    var body = [
               [1, 'GIZMORE Multimedia Speaker with Remote Control, Black,Lorem Ipsum is simply dummy...', 75000, '2021'],
               [2, 'Realme', 25000, '2022'],
               [3, 'Oneplus', 30000, '2021'],
               ]
    // New Header and Footer Data Include the table
    var y = 10;
    doc.setLineWidth(2);
    doc.text(200, y = y + 30, "Product detailed report");
    doc.autoTable({
        body: body,
        startY: 70,
        head:[['SL.No', 'Product Name', 'Price', 'Model']],
        headStyles :{lineWidth: 1,fillColor: [30, 212, 145],textColor: [255,255,255],
            },
        theme: 'grid',
        columnStyles: {
            0: {
                halign: 'right',
                cellWidth: 50,
                fillColor: [232, 252, 245],
               },
            1: {
                halign: 'left',
                cellWidth: 380,
                fillColor: [232, 252, 245],
               },
            2: {
                halign: 'right',
                cellWidth: 50,
                fillColor: [232, 252, 245],
               },
            3: {
                halign: 'right',
                cellWidth: 50,
                fillColor: [232, 252, 245],
               }
        },
       })
       // save the data to this file
       doc.save('auto_table_theme_custom_styles');
}

Buat tabel PDF dengan header dan footer

Saat menyiapkan laporan dalam bentuk tabel, komponen header dan footer mungkin diperlukan. Header adalah untuk mengklasifikasikan data kolom berdasarkan kunci atau kategori.

Tujuan dari komponen catatan kaki biasanya tergantung pada jenis laporan tabel. Jika panjang tabel besar, footer dapat menyalin kolom header. Jika tabel berisi data statistik, catatan kaki mungkin mencerminkan angka agregat.

Dengan cara ini, header dan footer menambahkan nilai ke laporan tabel.

Plugin ini menawarkan berbagai cara untuk menambahkan header dan footer bersama dengan badan tabel. Dua di antaranya diberikan di sini untuk implementasi dalam contoh berikut.

  • Menggunakan Kepala Dan Kaki Properti
  • Menggunakan kolom Properti

Menggunakan Kepala Dan Kaki Properti

Halaman tersebut berisi tombol “Hasilkan” untuk memanggil fungsi JavaScript berikut. Ini meluncurkan fungsi autoTable dan menentukan fitur berikut.

  • Tubuh
  • Kepala
  • Kaki
  • gaya kepala
  • Gaya kaki
  • Gaya kolom

Kemudian, untuk menekan tombol ekspor, tidak hanya mengunduh tabel, tetapi juga menampilkan tabel beserta jumlah data footer yang telah kita tambahkan.

jspdf-long-text-header-footer.php


function generateHeaderFooterTable() {
        var doc = new jsPDF('p', 'pt', 'letter')
        // generate the above data table
        var body = [
                   [1, 'GIZMORE Multimedia Speaker with Remote Control...', 75000, '2021'],
                   [2, 'Realme', 25000, '2022'],
                   [3, 'Oneplus', 30000, '2021'],
                   ]
        // New Header and Footer Data Include the table
        var y = 10;
        doc.setLineWidth(2);
        doc.text(200, y = y + 30, "Product detailed report");
        doc.autoTable({
            body: body,
            startY: 70,
            head:[['SL.No', 'Product Name', 'Price', 'Model']],
            foot:[[' ', 'Price total', '130000', '  ']],
            headStyles :{textColor: [255, 255, 255],},
            footStyles :{textColor: [255, 255, 255],},
            
            theme: 'grid',
            columnStyles: {
                0: {halign: 'right', cellWidth: 50,},
                1: {halign: 'left', cellWidth: 380,},
                2: {halign: 'right', cellWidth: 50,},
                3: {halign: 'right', cellWidth: 50,}
            },
		})

        ...
...
        // save the data to this file
        doc.save('auto_table_header_footer');
}

Menggunakan kolom Properti

Dengan menggunakan metode ini, pasangan nilai kunci memetakan data Tubuh Dari spesifikasi autoTable.

Ini kemudian menentukan nama kolom di header dengan referensi kunci yang sesuai yang digunakan di badan.

Ini memungkinkan Anda untuk menambahkan gaya ke kolom tabel Gaya kolom Properti. Dalam contoh berikut, ini menyelaraskan data kolom harga dengan menyetelnya ke kanan Halling Pada Gaya kolom.


doc.autoTable({
   columnStyles: { price: { halign: 'right' } },
   body: [
        { s_no: '1', product_name: 'GIZMORE Multimedia Speaker with Remote Control, Black', price: '75000' },
        { s_no: '2', product_name: 'Realme', price: '25000' },
        { s_no: '3', product_name: 'Oneplus', price: '30000' },
   ],
   columns: [
        { header: 'SL.No', dataKey: 's_no' },
        { header: 'Product Name', dataKey: 'product_name' },
        { header: 'Price', dataKey: 'price' },
   ],
})

Tabel dengan header footer

Buat PDF dengan tabel data bersarang

Pertama, UI menampilkan tabel induk menggunakan kode HTML berikut. Contoh ini mengilustrasikan cara menambahkan tabel bersarang di dalam induk ini saat membuat PDF.

Plugin AutoTable menawarkan berbagai fungsi menjawab panggilan. Contoh ini menggunakan skrip drawCell Berfungsi untuk menyisipkan tabel bersarang dalam respons panggilan.

Ini membantu menambahkan lebih banyak data melalui JavaScript ke tingkat awal informasi yang ditampilkan pada unggahan.

jspdf-bersarang-autotable.php


<html>
<title>Product</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<script
    src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
<script src="assets/js/jspdf-autotable-custom.js"></script>
</head>
<body>

    <div class="container">
        <h2 class="text-center heading">Product detailed list</h2>
        <table class="table" id="product-table">
            <tr class="content border  border-dark">
                <td>iPhone</td>
                <td>Version: 13</td>
            </tr>
        </table>
        <input type="button" class="export-button"
            onclick="generateNestedPdf()" value="Generate PDF" />
    </div>
</body>
</html>

Skrip berikut mengacu pada objek tabel HTML untuk menghasilkan tabel induk dalam PDF. Ini kemudian mendefinisikan panggilan balik untuk memasukkan sub-informasi ke dalam tabel anak.

Tabel anak ini dimasukkan secara kondisional ke dalam sel. Kondisi ini memeriksa dataKey dan atribut bagian sampel dokumen. Gaya kustom menentukan dimensi sel.


function generateNestedPdf() {
    var doc = new jsPDF();
    doc.autoTable({
        html: '#product-table',
        head: [["Product", "Specification"]],
        didDrawCell: function (data) {
        	if (data.column.dataKey === 1 && data.cell.section === 'body') {
                doc.autoTable({
                    body: [
                          ["Model: ", "Mini"],
                          ["Size: ", "6.2 inches"]
					],
					startY: data.cell.y + 10,
					margin: { left: data.cell.x + data.cell.padding('left') },
					tableWidth: 'wrap',
					theme: 'grid',
				});
			}
		},
        columnStyles: {5: {cellWidth: 40}},
        bodyStyles: {minCellHeight: 30}
    });
    doc.save('nested_table_pdf');
};

Tabel data bersarang

Tabel PDF dengan jeda halaman horizontal

Contoh ini sangat penting dan berguna dalam program pembuatan laporan.

Ketika data tabel yang dimuat melebihi lapisan PDF target, tabel harus dikemas. Ini untuk mencegah data terpotong dari perbatasan PDF.

Dengan mengaktifkan horizontalPageBreak Mengganti tabel dan menampilkan konten yang dikemas di halaman berikutnya.

Contoh ini menunjukkan tabel 9 kolom yang membungkus kolom yang hilang melintasi perbatasan.

Ini juga memungkinkan horizontalPageBreakRepeat Untuk menampilkan peta untuk konten yang kompleks dengan data kolom yang unik.

jspdf-horizontal-page-break.php


<html>
<title>Product</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.js"></script>
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
<body>

    <div class="container">
        <input type="button" class="export-button"
            onclick="generateHorizontalPageBreak();" value="Export PDF" />
    </div>
</body>
</html>

AutoTable dirakit horizontalPageBreak: true Untuk mengaktifkan fitur ini


function generateHorizontalPageBreak() {

      var doc = new jspdf.jsPDF('l')

  var head = [['Product ID', 'Product Name', 'Price in USD', 'Version', 'Model', 'Last updated date', 'Number of active installations', 'Reviews', 'Long text']]
  var body = [['2022#3v5', 'Mailer Adapter Component', '300', 'v5', '2022.3.3', 'JUN 2022', '100000+', '3245', 'Sed a risus porta est consectetur mollis eu quis dui. Phasellus in neque sagittis, placerat massa faucibus, commodo quam.']]

  doc.autoTable({
    head: head,
    body: body,
    startY: 25,
    // split overflowing columns into pages
    horizontalPageBreak: true,
    // repeat this column in split pages
    horizontalPageBreakRepeat: 0,
  })
doc.save('table.pdf');
}

Tabel dengan fraktur bidang horizontal

Hasil

Oleh karena itu, kami telah melihat berbagai alat di jsPDF AutoTable untuk membuat tabel PDF. Dengan mempelajari cara mengonversi tabel HTML ke PDF, aplikasi akan berguna dalam alat pembuatan laporan.

Tabel PDF selalu berguna untuk mengekspor statistik atau data tabular lainnya dari HTML. Sumber data dapat berupa database atau Excel yang dimuat ke dalam tabel HTML atau diubah menjadi larik JSON untuk penguraian.

Unduh

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.