Viet Anh @Nguyen.Viet.AnhB

3.7K 138 52

Published thg 5 29, 2016 8:12 SA 8 min read

8.7K

Tìm hiểu về thư viện jsPDF

This post hasn't been updated for 8 years

Những điều cần biết về PDF file ?

I : Lợi ích khi sử dụng PDF file

Trước hết, PDF là một định dạng phổ biến và khả chuyển (PDF là chữ viết tắt của portable document format) nên tệp PDF có thể đọc được ở mọi hệ thống.
Các tệp PDF thường chứa font chữ nhúng ngay bên trong văn bản nên người dùng có thể đọc được văn bản ngay cả khi máy của họ không có phông chữ font như trên máy của người soạn thảo
Định dạng PDF là loại bỏ meta-data trong văn bản gốc (ví dụ như các thay đổi được lưu giữ trong các tệp DOC), giúp hạn chế tiết lộ thông tin nội bộ. Chính vì thế, các văn bản trước khi gửi ra ngoài tổ chức hay đưa lên các website thường được chuyển sang định dạng PDF
Các tệp PDF thường rất khó chỉnh sửa và có thể thiết lập chế độ bảo mật tương đối dễ dàng (ví dụ như cấm in, cấm sao chép nội dung)

II : Giới thiệu về jspdf

_ Cách dowload thư viện :_

Dowload trực tiếp từ git : https://github.com/MrRio/jsPDF
Dùng bower để dowload : chạy lệnh bower install bower-jspdf
Dùng npm để dowload : chạy lệnh npm install jspdf

1 : Khởi tạo

Đầu tiên chúng ta cùng bàn luận làm cách nào để khởi tạo một tài liệu mới nhé ... Nó rất đơn giản, chỉ cần bạn chạy câu lệnh sau :

var doc = new jsPDF(orientation, unit, format);

Khi khởi tao bạn cần chú ý một số tham số đầu vào như sau :

orientation : Ngữ nghĩa của từ này hiểu ra là sự định hướng .... Ở đây chúng ta có thể hiểu là khung giấy tài liệu mà bạn muốn tạo . Tham số này nhận 2 giá trị portrait(giá trị mặc định) tức là khung giấy dọc và landscape giấy ngang ...
unit : Tham số này cho phép bạn nói với hệ thống bạn muốn làm việc với đơn vị kích thước nào ... Bạn có thể sử dụng một trong những đơn vị sau : pt (points), mm (default), cm, in.
format : Là kiểu giấy mà bạn muốn tạo . Mặc định là a4 hoăc nó cũng có thể là a3 , a5, letter, legal

Nếu như nội dung tài liệu của bản quá lớn và một trang giấy là không đủ, cần sử dụng thêm một trang mới , chúng ta có thể sử dụng đoạn code sau :

doc.addPage(width, height);

Khi bạn sử dụng đoạn mã trên , width (chiều rộng) và height (chiều dài) sẽ được sử dụng với đơn vị là đơn vị (unit) được định nghĩa khi khởi tạo tại tài liệu , và khi đó mọi hành động của bản với tài liệu sẽ là sẽ được hiểu là bạn đang hoạt động với trang này .Nếu bạn muốn chuyển qua trang khác làm việc thì có thể sử dụng đoạn mã sau :

doc.setPage(pageNumber);

Nếu bạn muốn lấy số trang thực thế đang làm việc thì có thể sử dụng đoạn mã sau :

doc.internal.getNumberOfPages();

Đoạn bên trên nghe có vẻ khó hiểu đúng không ... Ok, bây giờ mình sẽ tạo 1 ví dụ để minh họa lại :

// khợi tạo 1 tài liệu với khung giấy A4 và khung giấy là ngang giấy và sử dụng đơn vị là pixels
var doc = new jsPDF('l', 'px', 'a4'); // l là dạng viêt tắt của `landscape`
##làm việc vs page 1
doc.addPage(1000, 1500);
doc.internal.getNumberOfPages(); // lay page hiện tại 2
##làm việc vs page 2
//Giờ mình muốn quay trở lại làm việc vs page 1 thì dùng
doc.setPage(1);

2 : Làm việc với text.

Đầu tiên, chúng ta cần cho hiện dòng text lên trên tài liệu. Chúng ta dùng hàm doc.text() cùng với 3 tham số như sau :

doc.text(x, y, content);

x và y là vị trí của đoạn text bạn muốn hiển thị với đơn vi đã được định nghĩa trong hàm tạo của tài liệu . Chú ý rằng vị trí của y được set mặc định 0 và tính từ góc trên bên trái tài liệu.
contentlà nội dung text bạn muốn hiển thị ra màn hình.

Điều thứ hai chính là font chứ mà bạn sự dụng với dòng text của mình. Chúng ta có thể chọn một số font chứ sau : courier, helvetica, time ... Chúng ta có thể sửa font family và font style bằng cách chạy đoạn mã sau :

doc.setFont('courier', 'italic');

Còn nếu như bạn không biết nên sử dụng font nào hay không biết font nào mà thư viện cung cấp cho chúng ta. Đừng lo, chúng ta có đoạn mà sau để trợ giúp bạn tìm ra các font mà thư viện cung cấp :

doc.getFontList();
/*
{
    'helvetica': ['normal', 'bold', 'italic', 'bolditalic'],
    'Helvetica': ['', 'Bold', 'Oblique', 'BoldOblique'],
    'courier': ['normal', 'bold', 'italic', 'bolditalic'],
    'Courier': ['', 'Bold', 'Oblique', 'BoldOblique'],
    'times': ['normal', 'bold', 'italic', 'bolditalic'],
    'Times': ['Roman', 'Bold', 'Italic', 'BoldItalic']
}
*/

Chúng ta cũng có thể thay đổi font style individually bằng cách sử dụng function sau :

doc.setFontType('bolditalic');
// is the same as calling
doc.setFontStyle('bolditalic');

Tiếp theo là đến size của font ... Thật đơn giản vì chúng ta đã có hàm dưới đây để set giá trị :

doc.setFontSize(40);

Và cuối cùng là màu của text . Chúng ta có thể thay đổi màu của text băng cách sử dụng hàm doc.setTextColor và truyền vào ba tham số theo mô hình RGB color (tìm hiểu thêm về RGB trên wiki nhé, mình cũng ko rõ lắm về phần này )

doc.setTextColor(255, 0, 0);

Vậy đó, thật đơn giản đúng không. Tiếp theo chúng ta sẽ nghiên cứu làm việc với image nhé !

3 : Làm việc với image

Chỉ có một hàm dành cho image trong thư viện cuat chúng ta , đó là doc.addImage cùng với 4 tham số đầu vào.

doc.addImage(imageObj, imgFormat, x, y);

imageObj : nó là 1 object image bạn cần truyền vào ...
imgFormat : là định dạng của hình ảnh (Hiện tại, thư viện này chỉ support với 2 loại ảnh là jpeg/jpg and png )
x , y : vị trí của hình ảnh

Ví dụ :

var img = new Image();
img.addEventListener('load', function() {
    var doc = new jsPDF();
    doc.addImage(img, 'png', 10, 50);
});
img.src = 'images/tizen.png';

4 : Làm việc với graphics

Đầu tiên, chúng ta phải xác đinh màu nào sẽ phủ lên các khoảng trống của hình vẽ và màu nào sử dụng với nét vẽ ... Ở đây chúng ta sử dung 2 hàm doc.setFillColor và doc.setDrawColor với các tham số truyền vào là mã màu trong RGB color . Nó sẽ có dạng như sau :

doc.setFillColor(100, 100, 240);
doc.setDrawColor(100, 100, 0);

Tiếp sau đó, chúng ta có thể xác định được độ rộng cho một nét vẽ bằng cú pháp doc.setLineWidth và đầu vào là độ rộng nét vẽ bạn muốn với đơn vị là đơn vị đã được cấu hình lúc khởi tạo tài liệu :

doc.setLineWidth(1);

Thư viên này có có thông số cuối cùng để qui định cách vẽ ... Cụ thể như sau :

 They also take the last parameter drawing style. It can be 'S', 'F', 'DF', 'FD' string and the meanings are: 'stroke', 'fill', 'stroke and fill', 'fill and stroke'. The last two of course differ in the order of the drawing operations.

Ở đây , chúng ta có thể hiểu stroke là vẽ nét bao quanh và fill là phủ vùng trống của hình khối ... Đây là 2 cách vẽ khác nhau vào có thể kết hợp vs nhau ... DF vẽ nét bên ngoài rồi phủ khoảng trống bên trong hoăc FD phủ các khoảng trống bên trong rồi vẽ nét bên ngoài :

Chúng ta có thể vẽ 1 hình elip theo các cách sau :

// Empty ellipse
doc.ellipse(50, 50, 10, 5);
// Filled ellipse
doc.ellipse(100, 50, 10, 5, 'F');
// Filled circle with borders
doc.ellipse(100, 50, 10, 5, 'FD');

... hoặc tạo 1 hình tròn với bán kính :

doc.circle(150, 50, 5, 'FD');

... cũng có thể tạo 1 hình chữ nhật với chiều dài vào chiều rộng :

// Empty square
doc.rect(50, 100, 10, 10);
// Filled square
doc.rect(100, 100, 10, 10, 'F');
// Filled square with borders
doc.rect(150, 100, 10, 10, 'FD');

... hoặc bạn thích 1 cái gì đó khó hơn như 1 hình chữ nhật được bo tròn 4 góc ... quá đơn giản, chỉ cần truyền vào chiều dài chiều rộng và bán kình là được :

// Filled sqaure with rounded corners
doc.roundedRect(50, 150, 10, 10, 3, 3, 'FD');

... hay là một hình tam giác :

// Filled triangle with borders
doc.triangle(50, 200, 60, 200, 55, 210, 'FD');

Tài Liệu Tham Khảo :

JavaScript #Education

Những điều cần biết về PDF file ?

Tài Liệu Tham Khảo :

Table of contents