Trong thế giới phát triển web hiện đại, khả năng tạo các tệp PDF một cách linh động là một tính năng quan trọng đối với nhiều ứng dụng, đặc biệt là khi xử lý các báo cáo, hóa đơn hoặc tài liệu. Nếu bạn đang làm việc với Lightning Web Components (LWC) của Salesforce và cần tạo PDF, jsPDF là một thư viện mạnh mẽ bạn có thể sử dụng. Bài viết này sẽ hướng dẫn bạn cách sử dụng jsPDF để tạo PDF trong LWC, bao gồm nhiều phương pháp và chi tiết giúp bạn bắt đầu.
jsPDF là một thư viện JavaScript phổ biến cho phép bạn tạo các tài liệu PDF trực tiếp trong trình duyệt. Nó cung cấp một API đơn giản để tạo PDF và thêm các nội dung khác nhau như văn bản, hình ảnh, đường kẻ và nhiều hơn nữa. Với jsPDF, bạn có thể tạo ra các báo cáo, hóa đơn và tài liệu tùy chỉnh một cách dễ dàng.
Trang web chính thức của jsPDF là https://github.com/parallax/jsPDF. Trang GitHub này cung cấp tài liệu, mã nguồn và các bản cập nhật cho thư viện jsPDF. Hãy chắc chắn bạn tham khảo tài liệu này để hiểu rõ hơn về các tính năng nâng cao và tùy chỉnh của jsPDF.
Trước khi đi sâu vào jsPDF, hãy đảm bảo bạn đã thiết lập dự án Lightning Web Component trong Salesforce. Nếu bạn chưa có, bạn có thể tạo nó bằng Salesforce CLI:
sfdx force:lightning:component:create --type lwc --componentname generatePDFCmpLệnh này sẽ tạo một thư mục mới với các tệp cần thiết cho thành phần LWC của bạn. Đảm bảo bạn đã kết nối với tổ chức Salesforce của mình trước khi chạy lệnh này.
Bạn cần thêm thư viện jsPDF vào Lightning Web Component của mình. Vì Salesforce không hỗ trợ quản lý gói npm trực tiếp trong LWC, bạn cần tải xuống jsPDF và tải nó lên dưới dạng tài nguyên tĩnh.
jspdf.umd.min.js lên. Đặt tên cho nó là jsPDFLibrary.Việc sử dụng tài nguyên tĩnh giúp bạn dễ dàng quản lý và sử dụng các thư viện JavaScript bên ngoài trong môi trường Salesforce.
Tạo các tệp Lightning Web Component của bạn nếu bạn chưa có. Dưới đây là một thiết lập cơ bản:
Tệp HTML (generatePDFCmp.html):
<template>
<lightning-button label="Generate PDF" onclick={generatePDF}></lightning-button>
</template>Chúng tôi đã thêm một nút Lightning có tên 'Generate PDF'. Khi nhấp vào, nó sẽ tạo và tải xuống PDF.
Tệp JavaScript (generatePDFCmp.js):
import jsPDFLibrary from '@salesforce/resourceUrl/jsPDFLibrary';
import { loadScript } from 'lightning/platformResourceLoader';
export default class GeneratePDFCmp extends LightningElement {
jsPDFInitialized = false;
renderedCallback() {
if (!this.jsPDFInitialized) {
this.jsPDFInitialized = true;
loadScript(this, jsPDFLibrary)
.then(() => {
console.log('jsPDF library loaded successfully');
})
.catch((error) => {
console.error('Error loading jsPDF library', error);
});
}
}
generatePDF() {
if (this.jsPDFInitialized) {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.text('Hello world!', 10, 10);
doc.save('sample.pdf');
} else {
console.error('jsPDF library not initialised');
}
}
}import jsPDFLibrary from '@salesforce/resourceUrl/jsPDFLibrary';: Nhập URL của tài nguyên tĩnh (thư viện jsPDF) bằng mô-đun @salesforce/resourceUrl. URL này được sử dụng để tải thư viện jsPDF trong thành phần.import { loadScript } from 'lightning/platformResourceLoader';: Nhập hàm loadScript, được sử dụng để tải các thư viện JavaScript từ tài nguyên tĩnh.renderedCallback(): Lifecycle hook chạy khi thành phần được chèn vào DOM. Nó được sử dụng để tải các thư viện JavaScript bên ngoài.loadScript(this, jsPDF): Tải thư viện jsPDF từ tài nguyên tĩnh.generatePdf(): Phương thức này được thực thi khi nút "Generate PDF" được nhấp vào. Nó bắt đầu bằng cách kiểm tra xem thư viện jsPDF đã được tải hay chưa. Sau khi xác nhận, phương thức này tạo một phiên bản của jsPDF, đại diện cho tài liệu PDF sẽ được tạo.doc.text('Hello world!', 10, 10): Thêm văn bản vào PDF tại tọa độ (10, 10).doc.save('sample.pdf'): Kích hoạt tải xuống PDF đã tạo với tên tệp sample.pdf.Đây là một ví dụ cơ bản để hiển thị văn bản trong PDF đã tạo bằng thư viện jsPDF.
Sau khi bạn triển khai và thêm các thành phần vào một trang, nhấp vào nút sẽ kích hoạt tải xuống PDF.
Dưới đây là mô tả chi tiết về một số phương thức jsPDF phổ biến mà bạn có thể sử dụng trong LWC của mình để tạo và thao tác PDF:
text(text, x, y, options): Thêm văn bản vào PDF tại tọa độ được chỉ định (x, y).
text: Chuỗi văn bản cần thêm.x: Tọa độ x cho vị trí bắt đầu của văn bản.y: Tọa độ y cho vị trí bắt đầu của văn bản.options (tùy chọn): Một đối tượng chứa các cài đặt bổ sung như căn chỉnh, kích thước phông chữ và kiểu phông chữ.doc.text('Hello, World!', 10, 10); // Thêm "Hello, World!" tại vị trí (10, 10)
doc.text('Centred Text', 105, 20, { align: 'center' }); // Thêm văn bản căn giữa tại vị trí (105, 20)save(filename): Lưu PDF đã tạo vào hệ thống tệp cục bộ của người dùng với tên tệp đã cho.
filename: Tên của tệp cần lưu (ví dụ: 'document.pdf').doc.save('myfile.pdf'); // Lưu PDF dưới dạng "myfile.pdf"addPage([orientation], [format]): Thêm một trang mới vào tài liệu PDF. Bạn có thể chỉ định hướng và định dạng trang.
orientation (tùy chọn): Hướng của trang. Có thể là 'portrait' (mặc định) hoặc 'landscape'.format (tùy chọn): Định dạng của trang. Các định dạng phổ biến bao gồm 'a4', 'letter', v.v.doc.addPage(); // Thêm một trang mới với hướng và định dạng mặc định
doc.addPage('landscape', 'a4'); // Thêm một trang A4 có hướng ngangsetFontSize(size): Đặt kích thước phông chữ cho văn bản trong PDF.
size: Kích thước phông chữ cần đặt (ví dụ: 16 cho phông chữ 16pt).doc.setFontSize(18); // Đặt kích thước phông chữ thành 18pt
doc.text('Large Text', 10, 30); // Áp dụng kích thước phông chữ cho văn bản nàysetFont(fontType, fontStyle): Đặt kiểu phông chữ và kiểu dáng cho văn bản.
fontType: Loại phông chữ (ví dụ: 'helvetica', 'times').fontStyle (tùy chọn): Kiểu phông chữ (ví dụ: 'normal', 'bold', 'italic').doc.setFont('helvetica', 'bold'); // Đặt phông chữ thành Helvetica đậm
doc.text('Bold Helvetica Text', 10, 40);image(imageData, x, y, width, height): Thêm hình ảnh vào PDF.
imageData: URL dữ liệu của hình ảnh (ví dụ: dữ liệu hình ảnh được mã hóa base64).x: Tọa độ x cho vị trí đặt hình ảnh.y: Tọa độ y cho vị trí đặt hình ảnh.width: Chiều rộng của hình ảnh.height: Chiều cao của hình ảnh.const imageData = 'data:image/jpeg;base64,...'; // URL dữ liệu hình ảnh của bạn
doc.addImage(imageData, 'JPEG', 15, 40, 180, 160); // Thêm một hình ảnh JPEGsetMargins(left, top, right, bottom): Đặt lề của tài liệu PDF.
left: Lề trái.top: Lề trên.right: Lề phải.bottom: Lề dưới.doc.setMargins(10, 20, 10, 20); // Đặt lề thành 10pt ở bên trái/phải và 20pt ở trên/dướisetLineWidth(width): Đặt chiều rộng của các đường kẻ được vẽ trong PDF.
width: Chiều rộng của các đường kẻ tính bằng điểm.doc.setLineWidth(2); // Đặt chiều rộng đường kẻ thành 2pt
doc.rect(10, 10, 50, 50); // Vẽ một hình chữ nhật với chiều rộng đường kẻ đã đặtrect(x, y, width, height, style): Vẽ một hình chữ nhật trên PDF.
x: Tọa độ x của điểm bắt đầu của hình chữ nhật.y: Tọa độ y của điểm bắt đầu của hình chữ nhật.width: Chiều rộng của hình chữ nhật.height: Chiều cao của hình chữ nhật.style (tùy chọn): Kiểu của hình chữ nhật. Có thể là 'stroke' (đường viền), 'fill' (tô màu) hoặc 'fillstroke' (tô màu và đường viền).doc.rect(10, 50, 100, 50, 'stroke'); // Vẽ một hình chữ nhật với đường viền
doc.rect(10, 110, 100, 50, 'fill'); // Vẽ một hình chữ nhật được tô màucircle(x, y, radius): Vẽ một hình tròn trên PDF.
x: Tọa độ x của tâm hình tròn.y: Tọa độ y của tâm hình tròn.radius: Bán kính của hình tròn.doc.circle(50, 150, 20); // Vẽ một hình tròn với tâm tại (50, 150) và bán kính 20Các phương thức này cho phép bạn tạo, định kiểu và thao tác tài liệu PDF trực tiếp trong LWC của bạn. Bạn có thể kết hợp các phương thức này để tạo các tài liệu PDF phức tạp với văn bản, hình ảnh, hình dạng và kiểu tùy chỉnh.
Để tùy chỉnh hơn nữa, hãy tham khảo tài liệu jsPDF để biết các tính năng và phương pháp nâng cao hơn.
Ví dụ này bao gồm một số phương thức để tạo PDF với thông tin tài khoản.
generatePDFCmp.html
<template>
<lightning-button label = "Generate PDF" onclick={generatePDF}></lightning-button>
</template>
generatePDFCmp.js
import { LightningElement,wire, api } from 'lwc';
import jsPDFLibrary from '@salesforce/resourceUrl/jsPDFLibrary';
import { loadScript } from 'lightning/platformResourceLoader';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import NAME_FIELD from "@salesforce/schema/Account.Name";
import PHONE_FIELD from "@salesforce/schema/Account.Phone";
import RATING_FIELD from "@salesforce/schema/Account.Rating";
import TYPE_FIELD from '@salesforce/schema/Account.Type';
import WEBSITE_FIELD from '@salesforce/schema/Account.Website';
import INDUSTRY_FIELD from "@salesforce/schema/Account.Industry";
import ANNUAL_REVENUE from '@salesforce/schema/Account.AnnualRevenue'
import BILLING_STREET_FIELD from '@salesforce/schema/Account.BillingStreet';
const fields = [NAME_FIELD, PHONE_FIELD, TYPE_FIELD, WEBSITE_FIELD, BILLING_STREET_FIELD, RATING_FIELD, INDUSTRY_FIELD, ANNUAL_REVENUE];
export default class GeneratePDFCmp extends LightningElement {
jsPDFInitialized = false;
@api recordId;
accountName;
phone;
rating;
type;
website;
industry;
annualRevenue;
billingStreet;
@wire(getRecord, {
recordId: "$recordId",
fields
})
accountData({
data,
error
}) {
if (data) {
console.log('data' + JSON.stringify(data))
this.accountName = getFieldValue(data, NAME_FIELD);
this.phone = getFieldValue(data, PHONE_FIELD);
this.rating = getFieldValue(data, RATING_FIELD);
this.type = getFieldValue(data, TYPE_FIELD);
this.website = getFieldValue(data, WEBSITE_FIELD);
this.industry = getFieldValue(data, INDUSTRY_FIELD);
this.annualRevenue = getFieldValue(data, ANNUAL_REVENUE);
this.billingStreet = getFieldValue(data, BILLING_STREET_FIELD);
} else if (error) {
console.log('Error value parse ' + JSON.stringify(error));
}
}
renderedCallback() {
if (!this.jsPDFInitialized) {
this.jsPDFInitialized = true;
loadScript(this, jsPDFLibrary).then(() => {
console.log('jsPDF library loaded successfully');
}).catch((error) => {
console.log('Error loading jsPDF library', error);
});
}
}
generatePDF() {
if (this.jsPDFInitialized) {
try {
const {
jsPDF
} = window.jspdf;
const doc = new jsPDF();
doc.text('Account Information', 70, 20);
//Image in base64 format
const imgData = 'base64 format Image';
doc.addImage(imgData, 'JPEG', 140, 25, 55, 35);
doc.line(60, 24, 145, 24);
doc.setLineWidth(2);
doc.setFontSize(14)
doc.setFont('arial black');
doc.text('Account Name:', 30, 60);
doc.text('Type:', 30, 70);
doc.text('Industry:', 30, 80);
doc.text('Annual Revenue:', 30, 90);
doc.text('Website:', 30, 100);
doc.text('Billing Street:', 30, 110);
doc.text(this.accountName, 70, 60);
doc.text(this.type, 70, 70);
doc.text(this.industry, 70, 80);
doc.text(this.annualRevenue.toString(), 70, 90);
doc.text(this.website, 70, 100);
doc.text(this.billingStreet, 70, 110);
doc.save('AccountInformation.pdf');
} catch (error) {
console.log('Error in generating PDF', JSON.stringify(error));
}
} else {
console.error('jsPDF library is not loaded');
}
}
}
generatePDFCmp.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>60.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>Sau khi thêm nút Lightning vào trang bản ghi Account, khi bạn nhấp vào nút đó, thông tin tài khoản sẽ được xuất ra một tệp PDF.
Hy vọng hướng dẫn này giúp bạn hiểu cách thiết lập và sử dụng jsPDF trong Lightning Web Components. Chúc bạn thành công trong việc tạo các PDF chuyên nghiệp!
Bài viết liên quan