Rumah > hujung hadapan web > tutorial js > Cara Membuat PDF dalam React daripada Data JSON dengan jsPDF

Cara Membuat PDF dalam React daripada Data JSON dengan jsPDF

Barbara Streisand
Lepaskan: 2024-11-05 13:07:02
asal
503 orang telah melayarinya

How to Create PDFs in React from JSON Data with 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;
  };
Salin selepas log masuk
Salin selepas log masuk

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
Salin selepas log masuk
Salin selepas log masuk

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) => {
Salin selepas log masuk
Salin selepas log masuk

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]);
Salin selepas log masuk
Salin selepas log masuk

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",
});
Salin selepas log masuk

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]);
Salin selepas log masuk

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;
    })
);
Salin selepas log masuk

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;
  };
Salin selepas log masuk
Salin selepas log masuk

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

npm i jspdf-autotable jspdf
Salin selepas log masuk
Salin selepas log masuk

Berikut ialah versi penuh kod ini.

export const generatePDF = (data) => {
Salin selepas log masuk
Salin selepas log masuk
const doc = new jsPDF("l", "pt", "a3");

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

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

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan