Hướng dẫn javascript generate pdf from template - javascript tạo pdf từ mẫu

Tạo PDFS từ một mẫu bằng cách sử dụng JavaScript

Với PSPDFKIT, bạn có thể tạo các tài liệu PDF hoàn toàn ở phía máy khách trong trình duyệt bằng cách hợp nhất các mẫu PDF được xác định trước với dữ liệu. Điều này rất hữu ích để tạo các tài liệu có cấu trúc, chẳng hạn như hóa đơn, trượt, vé, danh sách kiểm tra, hợp đồng hoặc nhãn.

Tải mẫu PDF

Hướng dẫn này sử dụng việc bắt đầu trên web> tích hợp vào dự án JavaScript Vanilla làm cơ sở để tạo PDFS. Vui lòng đảm bảo làm theo các bước trong hướng dẫn đó để thiết lập dự án của bạn.

Đầu tiên, bạn sẽ cần tải tài liệu PDF mà bạn muốn điền với dữ liệu. Tùy thuộc vào trường hợp sử dụng của bạn, tài liệu có thể được tải trong trình xem PDF nơi giao diện người dùng được trình bày cho người dùng hoặc không đầu, không có giao diện người dùng.

Tải tài liệu trong trình xem PDF:

import "./assets/pspdfkit.js";

const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

(async () => {
  const instance = await PSPDFKit.load({
    baseUrl,
    document: "/document.pdf", // Path to the PDF document.
    container: "#pspdfkit"
  });
})();

Tải ở chế độ không đầu để không có UI nào được trình bày cho người dùng:

import "./assets/pspdfkit.js";

const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

(async () => {
  const instance = await PSPDFKit.load({
    baseUrl,
    document: "/document.pdf", // Path to the PDF document.
    headless: true
  });
})();

Điền tài liệu với dữ liệu

Để điền vào tài liệu, bạn có thể phủ các chú thích lên mẫu PDF. Trong ví dụ sau, bạn sẽ lấy một bộ dữ liệu JSON và lớp phủ TextAnnotations ở tọa độ được xác định trước:

// data.json

{
  "company": "PSPDFKit",
  "companyInfo": "PSPDFKit",
  "companyName": "PSPDFKit"
}

Nếu bạn nhìn vào hướng dẫn này mẫu ví dụ PDF, bạn có thể thấy trình giữ chỗ cho COMPANY,

import "./assets/pspdfkit.js";

const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

(async () => {
  const instance = await PSPDFKit.load({
    baseUrl,
    document: "/document.pdf", // Path to the PDF document.
    headless: true
  });
})();

import "./assets/pspdfkit.js";

const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

(async () => {
  const instance = await PSPDFKit.load({
    baseUrl,
    document: "/document.pdf", // Path to the PDF document.
    headless: true
  });
})();

const searchQuery = "Company Ltd."; // The text to search for.

const bbox = (await instance.search(searchQuery))
  .first()
  .rectsOnPage.get(0);

Điều này sẽ hiển thị vị trí hiện tại của văn bản trong tài liệu.

Bây giờ, tạo các chú thích với văn bản bạn muốn phủ lên. Đối với thuộc tính

import "./assets/pspdfkit.js";

const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

(async () => {
  const instance = await PSPDFKit.load({
    baseUrl,
    document: "/document.pdf", // Path to the PDF document.
    headless: true
  });
})();

// index.js

// Create a free text annotation.
const textAnnotation = new PSPDFKit.Annotations.TextAnnotation({
  boundingBox: bbox, // Set the bounding box of the text annotation.
  fontSize: 8,
  text: data.companyName, // The text to overlay.
  pageIndex: 0, // The page index to overlay the text on.
  fontColor: PSPDFKit.Color.RED,
  backgroundColor: PSPDFKit.Color.WHITE
});

// Add the annotations to the document.
await instance.create(textAnnotation);

Thuộc tính

import "./assets/pspdfkit.js";

const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

(async () => {
  const instance = await PSPDFKit.load({
    baseUrl,
    document: "/document.pdf", // Path to the PDF document.
    headless: true
  });
})();

import "./assets/pspdfkit.js";

const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

(async () => {
  const instance = await PSPDFKit.load({
    baseUrl,
    document: "/document.pdf", // Path to the PDF document.
    headless: true
  });
})();

Bạn cũng có thể thay đổi thuộc tính

import "./assets/pspdfkit.js";

const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

(async () => {
  const instance = await PSPDFKit.load({
    baseUrl,
    document: "/document.pdf", // Path to the PDF document.
    headless: true
  });
})();

import "./assets/pspdfkit.js";

const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

(async () => {
  const instance = await PSPDFKit.load({
    baseUrl,
    document: "/document.pdf", // Path to the PDF document.
    headless: true
  });
})();

Dữ liệu từ tệp JSON bây giờ sẽ xuất hiện trong mẫu PDF dưới dạng chú thích văn bản.

Xem hướng dẫn của chúng tôi về lập trình tạo chú thích để biết thêm chi tiết.

Nó cũng có thể phủ lên các loại chú thích khác, chẳng hạn như chữ ký, hình ảnh và tem.

Chú thích phẳng

Khi các chú thích đã được phủ lên trên đầu mẫu PDF, chúng có thể tùy ý được làm phẳng để ngăn chặn sửa đổi:

await instance.exportPDF({ flatten: true });

Xem Hướng dẫn chú thích phẳng của chúng tôi để biết thêm chi tiết.

Sau khi làm phẳng các chú thích, mẫu PDF sẽ trông giống như những gì mà hiển thị bên dưới.

Bạn có thể tìm thấy mẫu PDF ví dụ và mã trên GitHub.

Bản demo ví dụ trước tiên tải tài liệu ở chế độ không đầu và sau đó tải với giao diện người dùng. Điều này cho phép bạn xử lý PDF trước khi gửi nó qua mạng hoặc bạn có thể sử dụng nó để xử lý ánh sáng, như thêm hình mờ vào tài liệu.

Phục vụ dự án ví dụ

Bạn có thể phục vụ mẫu PDF cho người dùng trong trình duyệt. Đối với điều này, hãy sử dụng gói

import "./assets/pspdfkit.js";

const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

(async () => {
  const instance = await PSPDFKit.load({
    baseUrl,
    document: "/document.pdf", // Path to the PDF document.
    headless: true
  });
})();

1. Cài đặt gói phục vụ:

npm install --global serve

1. Phục vụ nội dung của thư mục hiện tại:

1. Điều hướng đến http: // localhost: 8080 để xem trang web.

Sử dụng chú thích

Một cách khác để làm điều này là thông qua các chú thích thay vì sử dụng trình giữ trang văn bản trang. . Tại đây, bạn sẽ truy xuất tất cả các chú thích trên trang, lặp lại tất cả các chú thích văn bản và cập nhật chúng nếu chúng có văn bản giữ chỗ.

Ví dụ: bạn có thể có chú thích văn bản sau đây là một phần của mẫu.

Sau đó, bạn có thể thực hiện thay thế mã thông báo thông qua các mục sau:

const replacements = {
  "[[Company]]": "PSPDFKit"
};

const annotationsToUpdate =
  // Retrieve annotations for a page.
  (await instance.getAnnotations(0))
    // Filter to text annotations.
    .filter((it) => it instanceof PSPDFKit.Annotations.TextAnnotation)
    // Replace annotations with text that matches any replacement token.
    .map((annotation) =>
      replacements[annotation.text]
        ? annotation.set("text", replacements[annotation.text])
        : annotation
    );

// Annotations are immutable. `annotationsToUpdate` contains new instances of annotations. You need to use `instance.update` to actually update them.
await instance.update(annotationsToUpdate);

Điều này sẽ thay thế chú thích

import "./assets/pspdfkit.js";

const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

(async () => {
  const instance = await PSPDFKit.load({
    baseUrl,
    document: "/document.pdf", // Path to the PDF document.
    headless: true
  });
})();

import "./assets/pspdfkit.js";

const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

(async () => {
  const instance = await PSPDFKit.load({
    baseUrl,
    document: "/document.pdf", // Path to the PDF document.
    headless: true
  });
})();

Lưu tài liệu PDF

Xem hướng dẫn của chúng tôi để lưu một tài liệu.

Bạn cũng có thể kiểm tra bài đăng trên blog này để tìm hiểu thêm.