1. Các sản phẩm
  2.   PDF
  3.   JavaScript
  4.   JSPDF
 
  

Tạo PDF qua API JavaScript nguồn mở

Thư viện JavaScript nguồn mở để tạo và chuyển đổi tệp PDF, thêm đồ họa và văn bản sang PDF thông qua JavaScript.

JSPDF là một giải pháp phía máy khách HTML5 mã nguồn mở để tạo và quản lý tài liệu PDF. Nó hỗ trợ các tính năng tuyệt vời như báo cáo, chứng chỉ, bán vé và hơn thế nữa. Vì PDF rất phổ biến trên web và hầu hết mọi công ty đang sử dụng nó để chia sẻ tài liệu và báo cáo. Chỉ bằng một vài lệnh, bạn có thể truy cập và sử dụng lại tất cả các tính năng tuyệt vời bên trong ứng dụng của riêng mình. 

Điều tuyệt vời về thư viện JsPDF là nó tạo ra một tệp PDF khi người dùng nhấp vào nút tải xuống. Nó bao gồm hỗ trợ cho một số tính năng nổi bật, chẳng hạn như tạo tài liệu PDF, vẽ hình và chèn hình ảnh vào tệp PDF, thêm trang vào PDF, thêm và hiển thị văn bản, xuất bản đồ dưới dạng PDF, chuyển đổi HTML sang PDF và nhiều hơn nữa.

Previous Next

Bắt đầu với JsPDF

Khuyến nghị và cách dễ nhất để bắt đầu là thả thư viện được lưu trữ CDN vào trang của bạn, bên dưới là lệnh.

sử dụng mã cài đặt

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>

Tạo tài liệu PDF qua thư viện JavaScript

JsPDF cung cấp chức năng tạo tài liệu PDF cũng như các sửa đổi bên trong các ứng dụng JavaScript. Bạn có thể dễ dàng tạo tài liệu PDF và thêm trang mới vào đó. Bạn có thể xác định hướng tài liệu, đơn vị và định dạng trang mặc định trong khi tạo tài liệu mới. Khi PDF được tạo, bạn có thể dễ dàng thêm các trang mới, chèn hình ảnh, v.v. vào nó một cách dễ dàng.

Tạo tài liệu PDF qua JavaScript

 import { jsPDF } from "jspdf";
  // Default export is a4 paper, portrait, using millimeters for units
  const doc = new jsPDF();
  doc.text("Hello world!", 10, 10);
  doc.save("a4.pdf");

Chèn văn bản sang tài liệu PDF qua JavaScript

API JsPDF tạo điều kiện cho các nhà phát triển JavaScript thêm và hiển thị văn bản bên trong tài liệu PDF. Để vẽ văn bản, bạn cần xác định tên phông chữ. Chúng tôi có thể chọn từ các phông chữ có sẵn. Cũng có thể thay đổi họ phông chữ và kiểu phông chữ. Sau đó, chúng ta có thể xác định kích thước phông chữ, màu văn bản và hơn thế nữa.

Thêm văn bản vào PDF hiện có bằng JavaScript

  //Add Text to Existing PDF 
  var doc = new jsPDF();
  doc.addHTML(document.body, function() {
  doc.text(20, 20, 'Hello world!');
  doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
  doc.addPage();
  doc.text(20, 20, 'Do you like that?');
  printData();
  });
  printData = function() {
  var str = doc.output('datauristring');
  console.log(str);
  // window.open(str); Optional
  }

Thêm đồ họa vào tài liệu PDF qua JavaScript

Thư viện JsPDF cho phép JavaScript chuyên nghiệp vẽ đồ họa bên trong tài liệu PDF. Đồ họa luôn tăng thêm giá trị cho phần nội dung. Đầu tiên, chúng ta phải thiết lập màu tô và nét vẽ cho các hình dạng đã vẽ. Chúng ta cũng có thể thiết lập chiều rộng nét vẽ. Mọi hàm vẽ hình đều lấy tọa độ điểm trung tâm làm hai tham số đầu tiên (trừ tam giác). Họ cũng có kiểu vẽ tham số cuối cùng. Chúng ta có thể vẽ một hình elip, bằng cách đi qua hai bức xạ hoặc vòng tròn, bằng cách chỉ đi qua một bán kính, một hình tam giác, bằng cách chuyển qua tọa độ của mỗi góc và hơn thế nữa.

Thêm hình ảnh vào PDF bằng JavaScript

  // Add image to PDF
  var img = new Image()
  img.src = 'assets/sample.png'
  pdf.addImage(img, 'png', 10, 78, 12, 15)
 Tiếng Việt