4,075 lượt đọc

Hướng dẫn tạo trường biểu mẫu tùy chỉnh bằng Foxit PDF SDK cho web

từ tác giả Foxit Software8m2023/11/17

dài quá đọc không nổi

Hướng dẫn này sẽ hướng dẫn bạn cách tạo các trường biểu mẫu tùy chỉnh trong tài liệu PDF trên trình duyệt web của bạn bằng Thư viện Foxit PDF cho Web.

featured image - Hướng dẫn tạo trường biểu mẫu tùy chỉnh bằng Foxit PDF SDK cho web

Định dạng PDF đã trở nên không thể thiếu trong các phần mềm hiện đại, đóng vai trò là giải pháp linh hoạt cho nhiều loại tài liệu đa dạng. Đối với các doanh nghiệp đang tìm kiếm các tệp PDF an toàn, có thể chỉnh sửa và thân thiện với người dùng, Foxit nổi lên như một sự lựa chọn có giá trị. Thư viện SDK PDF của Foxit tự hào có nhiều tính năng phong phú phục vụ cho nhiều ngành khác nhau.

Đặc biệt, các tệp PDF dựa trên trình duyệt web có vô số ứng dụng trong quản lý tài liệu. Họ đóng một vai trò quan trọng trong nhiều hệ thống ngân hàng, tạo điều kiện thuận lợi cho các nhiệm vụ như tạo báo cáo hàng tháng. Ngoài ra, ngành tuân thủ dựa vào các tệp PDF dựa trên web để thu thập và lưu trữ dữ liệu an toàn.

Hướng dẫn này hướng dẫn bạn cách tận dụng Foxit PDF SDK dành cho Web để tạo các trường biểu mẫu tùy chỉnh trong tài liệu PDF trên trình duyệt web của bạn. Kho lưu trữ GitHub đi kèm cho phép bạn làm theo và triển khai các bước được nêu trong hướng dẫn.

Foxit PDF SDK dành cho Web là gì?

Foxit PDF SDK dành cho Web , trong số các SDK PDF đa dạng do Foxit cung cấp, nổi bật như một thư viện PDF toàn diện tận dụng các ưu điểm của công cụ kết xuất của Foxit. SDK này cho phép bạn tích hợp liền mạch trình xem PDF toàn diện và có thể tùy chỉnh hoàn toàn vào ứng dụng của bạn.

Các tệp PDF trên web được tạo bằng SDK của Foxit cho phép người dùng dễ dàng xem, điền, chú thích và ký các tài liệu bằng nhiều ngôn ngữ khác nhau trực tiếp từ trình duyệt trên thiết bị di động hoặc máy tính để bàn của họ bằng JavaScript. SDK tương thích với tất cả các trình duyệt chính, bao gồm Firefox, Safari, Chrome và Opera.

Để minh họa chức năng, bạn sẽ bắt tay vào tạo một dự án PDF mới từ một mẫu, sử dụng Foxit PDF SDK for Web để cung cấp cấu trúc cần thiết. Phương pháp thực hành này sẽ đưa ra minh chứng thực tế về cách SDK nâng cao khả năng PDF trong các dự án dựa trên web của bạn.

Triển khai Foxit PDF SDK cho Web

Tải xuống Foxit PDF SDK cho Web. Tệp ZIP phải chứa SDK, tài liệu và ví dụ.

Bạn có thể xem trước các ví dụ này bằng cách chạy máy chủ HTTP từ thư mục đã giải nén.

 # NPX available with NPM v5.2 or newer npx http-server

Thiết lập dự án

Hướng dẫn này sử dụng Vite cho công cụ giao diện người dùng. Nó dựa trên các mô-đun ES (ESM), nhanh chóng và đi kèm với mọi thứ bạn cần để sử dụng SDK ngay lập tức. Để tạo một dự án mới từ một mẫu và khởi động máy chủ phát triển, hãy đảm bảo bạn có Node.js phiên bản 12.2.0 trở lên và chạy các lệnh sau:

 npm create vite@latest project -- --template vanilla cd project npm install npm run dev

Di chuyển SDK vào thư mục đã tạo. Đối với phần còn lại của hướng dẫn này, SDK được cho là có sẵn tại ./FoxitPDFSDKForWeb , liên quan đến thư mục dự án mẹ.

Đang tải PDF

Bạn sẽ cần một trình xem PDF có tài liệu được tải lên để bắt đầu thử nghiệm. Để khởi chạy trình xem PDF, trước tiên hãy tạo cấu trúc HTML và tải SDK.

 <!-- index.html --> <!-- ... --> <body> <div class="container"> <div id="viewer"></div> <div id="menu"></div> </div> <script src="./FoxitPDFSDKForWeb/lib/PDFViewCtrl.full.js"></script> <script type="module" src="/main.js"></script> </body> <!-- ... -->

Ngoài ra, trong style.css , thêm một số CSS để tạo kiểu cho các phần tử:

 /* style.css */ html { height: 100%; }b ody { height: 100%; margin: 0; }. container { width: 100%; height: 100%; display: flex; }# viewer { height: 100%; flex: 1; overflow: auto; }# menu { width: 10rem; }. menu-element { background: #f1f5f9; padding: 1rem; display: flex; justify-content: center; align-items: center;font-family: monospace; margin: 0.5rem; }

Bên trong main.js , hãy sử dụng SDK để tạo một phiên bản của pdfViewer :

 import "./style.css"; const licenseSN = "..."; const licenseKey = "..."; const viewerContainer = document.getElementById("viewer"); const pdfViewer = new PDFViewCtrl.PDFViewer({ libPath: "./FoxitPDFSDKForWeb/lib", jr: { licenseSN, licenseKey, }, customs: { ScrollWrap: PDFViewCtrl.CustomScrollWrap.create(viewerContainer), }, });

Bạn có thể tìm thấy các giá trị của mình cho licenseSN và licenseKey bên trong tệp ./FoxitPDFSDKForWeb/examples/license-key.js .

pdfViewer được tạo bằng cách cung cấp cho hàm tạo một đối tượng cấu hình có chứa:

libPath: Đường dẫn tương đối tới thư mục lib của gói SDK đã giải nén
jr: Các tùy chọn cấu hình cho công cụ JR bao gồm, quan trọng nhất là thông tin cấp phép
hải quan.ScrollWrap: Một thành phần tùy chỉnh kiểm soát kích thước và cuộn PDF, trong đó việc cài đặt nó sẽ điều chỉnh trình xem cho phù hợp với vùng chứa

Với pdfViewer đã được tạo, tất cả những gì bạn phải làm là khởi tạo nó và tải tài liệu:

 // ... const loadPDF = async (url) => { const response = await fetch(url); const blob = await response.blob();return pdfViewer.openPDFByFile(blob); }; pdfViewer.init(viewerContainer); loadPDF("./FoxitPDFSDKForWeb/docs/FoxitPDFSDKforWeb_DemoGuide.pdf");

Đoạn mã trên tìm nạp tệp PDF dưới dạng blob và mở tệp đó trong trình xem bằng phương thức openPDFByFile() của nó. Tài liệu PDF được sử dụng là hướng dẫn demo từ tài liệu đi kèm của SDK.

Khoảng trống bổ sung ở bên phải sẽ đóng vai trò là menu cho các trường biểu mẫu có thể kéo được.

Tạo trường biểu mẫu tùy chỉnh

Tất cả những gì bạn cần để tạo trường biểu mẫu bằng Foxit SDK là trình xem, siêu dữ liệu của trường biểu mẫu (chẳng hạn như loại trường hoặc tùy chọn chọn) và vị trí trường biểu mẫu. Trong ví dụ này, bạn sẽ tạo một tập hợp các trường biểu mẫu được xác định trước với siêu dữ liệu sẵn có mà người dùng có thể kéo và thả vào trình xem.

Xác định siêu dữ liệu

Bắt đầu bằng cách xác định siêu dữ liệu cho các trường được phép cũng như các trợ giúp bổ sung:

 // ... const menuContainer = document.getElementById("menu"); const randomId = () => `_${Math.random().toString(36).substring(2, 9)}`; const FieldTypes = PDFViewCtrl.PDF.form.constant.Field_Type; const formFields = [ { label: "Push Button", name: "push-button", type: FieldTypes.PushButton, width: 50, height: 30, }, { label: "Checkbox", name: "checkbox", type: FieldTypes.CheckBox, width: 50,height: 30, }, { label: "Radio Button", name: "radio-button", type: FieldTypes.RadioButton, width: 80, height: 30, }, { label: "Combo Box", name: "combo-box", type: FieldTypes.ComboBox, width: 60, height: 30, }, { label: "List Box", name: "list-box", type: FieldTypes.ListBox, width: 60, height: 100, }, { label: "Text", name: "text", type: FieldTypes.Text, width: 60, height: 30, }, ]; const comboBoxOptions = [ { label: "10", value: "10", selected: true, defaultSelected: true }, { label: "20", value: "20", selected: false, defaultSelected: false }, { label: "30", value: "30", selected: false, defaultSelected: false }, { label: "40", value: "40", selected: false, defaultSelected: false }, ]; const listBoxOptions = comboBoxOptions;

Hàm RandomId() sẽ tạo ID để xác định các trường biểu mẫu trong tài liệu. FieldTypes là lối tắt để tham khảo nhanh hơn các loại trường được xác định trước có sẵn trong SDK. Mỗi mục nhập trường biểu mẫu chứa:

Một nhãn để thông báo cho người dùng về việc sử dụng nó
Tên để khớp các phần tử được kéo với các mục siêu dữ liệu
Một loại để chỉ ra loại của trường
Chiều rộng và height để tính toán vị trí hình chữ nhật trong tệp PDF

Cuối cùng, comboBoxOptions và listBoxOptions chứa các tùy chọn mẫu cho các trường yêu cầu người dùng chọn một tùy chọn.

Tạo các phần tử kéo và thả

Khi siêu dữ liệu đã sẵn sàng, bạn có thể tạo một hàm để xử lý logic kéo và thả cũng như vị trí trường biểu mẫu:

 // ... const loadFormFieldsMenu = async (PDFDoc) => { const PDFForm = await PDFDoc.loadPDFForm(); formFields.forEach((formField) => { const element = document.createElement("div"); element.draggable = true; element.id = formField.name; element.classList.add("menu-element"); element.textContent = formField.label; element.addEventListener("dragstart", (event) => { event.dataTransfer.setData("text/plain", event.target.id); }); menuContainer.append(element); }); };

Hàm này chấp nhận PDFDoc —một đối tượng SDK đại diện cho một tài liệu PDF—làm đối số. Nó được sử dụng để truy xuất một đối tượng PDFForm , đối tượng này sẽ được sử dụng để thêm và định cấu hình các trường biểu mẫu, sau khi các trường đó được xử lý thành các phần tử có thể kéo và được thêm vào menu bên.

Mỗi phần tử có một thuộc tính có thể kéo được đặt thành true để cho phép kéo, cũng như id tương ứng với tên duy nhất của từng trường biểu mẫu để khớp chúng với siêu dữ liệu cơ bản. Id này sau đó được sử dụng bên trong trình xử lý sự kiện dragstart để truyền nó trong quá trình kéo và thả.

Để có được tham số PDFDoc cần thiết cho hàm LoadFormFieldsMenu() , bạn sẽ phải nhận được kết quả hứa hẹn của hàm LoadPDF() bằng cách sửa đổi nó như sau:

 // ... loadPDF("./FoxitPDFSDKForWeb/docs/FoxitPDFSDKforWeb_DemoGuide.pdf").then( (PDFDoc) => { loadFormFieldsMenu(PDFDoc); } );

Với các mục menu được tạo, ứng dụng bây giờ trông như thế này:

Triển khai chức năng kéo và thả

Sau khi tạo các phần tử có thể kéo, đã đến lúc triển khai đầy đủ chức năng kéo và thả và cho phép tạo các trường biểu mẫu trong trình xem:

 // ... const loadFormFieldsMenu = async (PDFDoc) => { // ... viewerContainer.addEventListener("dragover", (event) => { event.preventDefault(); }); viewerContainer.addEventListener("drop", async (event) => { event.preventDefault(); const droppedFormFieldName = event.dataTransfer.getData("text/plain"); const formField = formFields.find( ({ name }) => name === droppedFormFieldName ); const pos = await pdfViewer.convertClientCoordToPDFCoord({ clientX: event.clientX, clientY: event.clientY, }); const id = randomId();await PDFForm.addControl(pos.index, id, formField.type, { left: pos.left - formField.width / 2, right: pos.left + formField.width / 2, top: pos.top + formField.height / 2, bottom: pos.top - formField.height / 2, }); const field = PDFForm.getField(id); if (formField.type === FieldTypes.ComboBox) { field.setOptions(comboBoxOptions); } else if (formField.type === FieldTypes.ListBox) { field.setOptions(listBoxOptions); } }); }; // ...

Trong đoạn mã trên, trình nghe sự kiện kéo chuyển tiếp tương tác cần xử lý trong sự kiện thả bằng cách gọi PreventDefault() .

Bên trong trình xử lý sự kiện thả , siêu dữ liệu phù hợp trước tiên được truy xuất bằng cách sử dụng dữ liệu của phần tử được kéo. Sau đó, vị trí chuột từ sự kiện được chuyển đổi thành tọa độ PDF bằng phương thức ConvertClientCoordToPDFCoord() có sẵn trên phiên bản pdfViewer .

Vị trí, siêu dữ liệu và ID được tạo ngẫu nhiên được sử dụng trong lệnh gọi phương thức addControl() từ đối tượng PDFForm được tạo trước đó trong hàm. Phương thức này chấp nhận các đối số sau:

Chỉ mục của trang để đặt trường biểu mẫu tại (được lấy từ lệnh gọi ConvertClientCoordToPDFCoord() )
ID được tạo ngẫu nhiên cho trường biểu mẫu mới được tạo
Loại trường biểu mẫu theo hằng số được cung cấp (được lấy từ siêu dữ liệu)
Đối số xác định vị trí cho trường biểu mẫu ở dạng hình chữ nhật, được tính bằng chiều rộng và chiều cao để làm cho tọa độ chuột ở giữa trường biểu mẫu

Cuối cùng, trong trường hợp trường chấp nhận danh sách các tùy chọn, trước tiên nó sẽ được truy cập bằng phương thức getField() của đối tượng PDFForm bằng ID. Các tùy chọn được đặt tương ứng bằng phương thức setOptions() .

Ứng dụng cuối cùng, với một vài trường biểu mẫu đã được đặt sẵn, trông như thế này:

Phần kết luận

Việc thêm chức năng vào tệp PDF của bạn thực sự có thể mang lại lợi ích đáng kể cho tổ chức và người dùng của bạn. Cập nhật và chữ ký điện tử giúp tiết kiệm thời gian, tiền bạc và công sức, trong khi các tài liệu được tùy chỉnh và bảo mật sẽ nâng cao niềm tin vào công ty của bạn.

Như đã trình bày trước đó, công cụ PDF đa ngôn ngữ của Foxit , kết hợp với Foxit PDF SDK dành cho Web, cung cấp một giải pháp mạnh mẽ. Bạn có thể tạo các trường biểu mẫu tùy chỉnh, triển khai chức năng kéo và thả và mở khóa một loạt khả năng. Tuy nhiên, đây chỉ là phần nổi của tảng băng chìm. Foxit PDF SDK dành cho Web cung cấp một bộ tính năng toàn diện để nâng cao hơn nữa chức năng PDF của bạn.

Để tìm hiểu sâu hơn về các khả năng, hãy tham khảo tài liệu chính thức và các tài nguyên bổ sung do SDK cung cấp. Tài liệu sẽ hướng dẫn bạn các tính năng nâng cao, tùy chọn tùy chỉnh và các phương pháp hay nhất.

Nếu bạn muốn xem lại hướng dẫn hoặc kiểm tra công việc của mình, bạn có thể tham khảo kho GitHub được liên kết với hướng dẫn. Kho lưu trữ có thể chứa mã nguồn, ví dụ và tài liệu bổ sung để giúp bạn hiểu và triển khai các khái niệm được đề cập trong hướng dẫn.