Hướng dẫn jspdf html to pdf - jspdf html sang pdf

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,

    doc.setPage(pageNumber);
    
    1 là một định dạng phổ biến và khả chuyển (
    doc.setPage(pageNumber);
    
    1 là chữ viết tắt của
    doc.setPage(pageNumber);
    
    3) nên tệp
    doc.setPage(pageNumber);
    
    1 có thể đọc được ở mọi hệ thống.

  • Các tệp

    doc.setPage(pageNumber);
    
    1 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

    doc.setPage(pageNumber);
    
    1 là loại bỏ
    doc.setPage(pageNumber);
    
    7 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
    doc.setPage(pageNumber);
    
    1

  • Các tệp

    doc.setPage(pageNumber);
    
    1 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
    doc.internal.getNumberOfPages();
    
    0 để dowload : chạy lệnh
    doc.internal.getNumberOfPages();
    
    1
  • Dùng
    doc.internal.getNumberOfPages();
    
    2 để dowload : chạy lệnh
    doc.internal.getNumberOfPages();
    
    3

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ị

    doc.internal.getNumberOfPages();
    
    4(giá trị mặc định) tức là khung giấy dọc và
    doc.internal.getNumberOfPages();
    
    5 giấy ngang ...
    : 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ị
    doc.internal.getNumberOfPages();
    
    4(giá trị mặc định) tức là khung giấy dọc và
    doc.internal.getNumberOfPages();
    
    5 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 :

    doc.internal.getNumberOfPages();
    
    6 (points),
    doc.internal.getNumberOfPages();
    
    7 (default),
    doc.internal.getNumberOfPages();
    
    8,
    doc.internal.getNumberOfPages();
    
    9.
    : 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 :
    doc.internal.getNumberOfPages();
    
    6 (points),
    doc.internal.getNumberOfPages();
    
    7 (default),
    doc.internal.getNumberOfPages();
    
    8,
    doc.internal.getNumberOfPages();
    
    9.

  • format : Là kiểu giấy mà bạn muốn tạo . Mặc định là

    // 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);
    
    0 hoăc nó cũng có thể là
    // 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);
    
    1 ,
    // 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,
    // 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);
    
    3,
    // 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);
    
    4
    : Là kiểu giấy mà bạn muốn tạo . Mặc định là
    // 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);
    
    0 hoăc nó cũng có thể là
    // 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);
    
    1 ,
    // 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,
    // 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);
    
    3,
    // 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);
    
    4

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 ,

// 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);
5 (chiều rộng) và
// 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);
6 (chiều dài) sẽ được sử dụng với đơn vị là đơn vị (
// 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);
7) đượ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

// 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);
8 cùng với 3 tham số như sau :

doc.text(x, y, content);
  • // 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);
    
    9 và
    doc.text(x, y, content);
    
    0 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
    doc.text(x, y, content);
    
    0 được set mặc định 0 và tính từ góc trên bên trái tài liệu.
  • doc.text(x, y, content);
    
    2là 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 :

doc.text(x, y, content);
3,
doc.text(x, y, content);
4,
doc.text(x, y, content);
5 ... 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.text(x, y, content);
6 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.addPage(width, height);
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.text(x, y, content);
7 cùng với 4 tham số đầu vào.

doc.addPage(width, height);
1
  • doc.text(x, y, content);
    
    8 : nó là 1 object image bạn cần truyền vào ...
  • doc.text(x, y, content);
    
    9 : 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 )
  • // 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);
    
    9 ,
    doc.text(x, y, content);
    
    0 : vị trí của hình ảnh

Ví dụ :

doc.addPage(width, height);
2

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.setFont('courier', 'italic');
2 và
doc.setFont('courier', 'italic');
3 với các tham số truyền vào là mã màu trong
doc.setFont('courier', 'italic');
4 . Nó sẽ có dạng như sau :

doc.addPage(width, height);
3

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.setFont('courier', 'italic');
5 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.addPage(width, height);
4

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

doc.addPage(width, height);
5

Ở đây , chúng ta có thể hiểu

doc.setFont('courier', 'italic');
6 là vẽ nét bao quanh và
doc.setFont('courier', 'italic');
7 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 ...
doc.setFont('courier', 'italic');
8 vẽ nét bên ngoài rồi phủ khoảng trống bên trong hoăc
doc.setFont('courier', 'italic');
9 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 :

doc.addPage(width, height);
6

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

doc.addPage(width, height);
7

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

doc.addPage(width, height);
8

... 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 :

doc.addPage(width, height);
9

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

doc.setPage(pageNumber);
0

Tài Liệu Tham Khảo :

  • https://developer.tizen.org/community/tip-tech/creating-pdf-documents-jspdf
  • https://parall.ax/products/jspdf/doc/symbols/jsPDF.html