Cara Membuat PDF dalam React daripada Data JSON dengan jsPDF

Artikel ini akan menunjukkan cara membuat PDF dalam JS/React daripada data JSON.

Sebagai pembangun, kami mesti menyepadukan penjanaan PDF dalam aplikasi. Jadi, dalam artikel ini, kita akan membincangkan cara membuat PDF menggunakan jspdf.

Jadi, Mari mulakan.

Kami akan menggunakan persekitaran React khusus untuk artikel ini. Saya menganggap anda sudah biasa dengan JavaScript/React dan telah menyediakan persekitaran React

Sebelum menyelam, kami memerlukan beberapa data sampel untuk menjana PDF. Kami akan membuat kaedah untuk menjana data ini.

const generateUsers = (count) => {
    const users = [];

    for (let i = 1; i <= count; i++) {
      const user = {
        id: i,
        firstName: `firstName_${i}`,
        lastName: `lastName_${i}`,
        email: `email_${i}@example.com`,
        address: [
          `Street ${i + 1}, Address Line 1`,
          `District ${(i % 7) + 1}, City_${i}`,
        ],
      };
      users.push(user);
    }
    return users;
  };

Sekarang, kita perlu memasang beberapa pakej npm jspdf dan jspdf-autotable.

jsPDF bertanggungjawab untuk mencipta PDF, manakala jsPDF-AutoTable digunakan untuk memaparkan data dalam format jadual dalam PDF.

Anda boleh menggunakan arahan berikut untuk memasang kedua-dua pakej.

npm i jspdf-autotable jspdf

Sekarang, kami akan membangunkan kaedah untuk mengendalikan penciptaan PDF. Saya akan mencipta kaedah generik generatePDF, supaya anda boleh menggunakannya di mana-mana sahaja yang anda perlukan.

1. Definisi Fungsi

Fungsi generatePDF mengambil data sebagai hujah, yang dijangkakan sebagai tatasusunan objek (data JSON untuk disertakan dalam PDF).

export const generatePDF = (data) => {

2. Persediaan Dokumen PDF
Contoh jsPDF baharu dibuat dengan pilihan berikut:

• "l" untuk orientasi landskap.
• "pt" sebagai unit ukuran (mata).
• "a3" sebagai saiz kertas.

const doc = new jsPDF("l", "pt", "a3");

// if you want to use custom dimensions
// width,height

const doc = new jsPDF("l", "pt", [3000,1000]);

3. Menambah Tajuk pada PDF

• Menetapkan saiz fon kepada 16 mata.
• Menambahkan tajuk berpusat, "JSON Data PDF", di bahagian atas halaman (y-kedudukan 30).

doc.setFontSize(16);
doc.text("JSON Data PDF", doc.internal.pageSize.getWidth() / 2, 30, {
    align: "center",
});

4. Mengeluarkan Pengepala Jadual

• Mengekstrak kunci daripada objek pertama dalam data untuk digunakan sebagai pengepala lajur untuk jadual.
• Andaikan data mempunyai sekurang-kurangnya satu objek dan semua objek mempunyai kunci yang serupa.

const tableColumnHeaders = Object.keys(data[0]);

5. Memformat Baris Jadual

Lelaran pada setiap objek dalam data, mencipta tatasusunan baharu (tableRows) di mana:

• Setiap entri sepadan dengan baris jadual.
• Untuk setiap sel, jika nilai ialah tatasusunan, ia menggabungkan elemen dengan koma; jika tidak, ia menambah nilai sebagaimana adanya.

const tableRows = data.map((row) =>
    Object.keys(row).map((key) => {
        const value = row[key];
        if (Array.isArray(value)) {
            return value.join(", ");
        }
        return value;
    })
);

6. Menambahkan Jadual pada PDF

Mengkonfigurasikan jadual dengan pilihan berikut:

• mulaY: 50 meletakkan jadual 50 mata di bawah bahagian atas halaman.
• head menggunakan tableColumnHeaders sebagai baris pengepala jadual.
• body diisi dengan tableRows, memaparkan data baris demi baris.
• jidar menentukan jarak di sekeliling meja.
• gaya melaraskan saiz fon sel, pelapik dan penjajaran menegak.
• headStyles menetapkan gaya baris pengepala: latar belakang biru, teks putih dan fon 12 titik.
• alternateRowStyles menambah latar belakang kelabu muda untuk baris berselang-seli.
• columnStyles cuba menetapkan lebar lajur secara automatik.
• tema: "berjalur" menggunakan tema berjalur pada jadual.

const generateUsers = (count) => {
    const users = [];

    for (let i = 1; i <= count; i++) {
      const user = {
        id: i,
        firstName: `firstName_${i}`,
        lastName: `lastName_${i}`,
        email: `email_${i}@example.com`,
        address: [
          `Street ${i + 1}, Address Line 1`,
          `District ${(i % 7) + 1}, City_${i}`,
        ],
      };
      users.push(user);
    }
    return users;
  };

7. Menyimpan PDF
Menyimpan fail PDF dengan nama fail "JS-pdf.pdf".

npm i jspdf-autotable jspdf

Berikut ialah versi penuh kod ini.

export const generatePDF = (data) => {

const doc = new jsPDF("l", "pt", "a3");

// if you want to use custom dimensions
// width,height

const doc = new jsPDF("l", "pt", [3000,1000]);

Ini dilakukan buat masa ini. Mudah-mudahan, anda menikmatinya. Selamat hari raya!!!

Atas ialah kandungan terperinci Cara Membuat PDF dalam React daripada Data JSON dengan jsPDF. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!