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:
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
doc.setFontSize(16); doc.text("JSON Data PDF", doc.internal.pageSize.getWidth() / 2, 30, { align: "center", });
4. Mengeluarkan Pengepala Jadual
const tableColumnHeaders = Object.keys(data[0]);
5. Memformat Baris Jadual
Lelaran pada setiap objek dalam data, mencipta tatasusunan baharu (tableRows) di mana:
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:
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!