Đị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,   nổi lên như một sự lựa chọn có giá trị.   tự hào có nhiều tính năng phong phú phục vụ cho nhiều ngành khác nhau. Foxit Thư viện SDK PDF của Foxit  Đặ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.   đ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. Kho lưu trữ GitHub   Foxit PDF SDK dành cho Web là gì?    , 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. Foxit PDF SDK dành cho Web  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    Foxit PDF SDK cho Web. Tệp ZIP phải chứa SDK, tài liệu và ví dụ. Tải xuống  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   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: Vite   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   , liên quan đến thư mục   mẹ. ./FoxitPDFSDKForWeb dự án   Đ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.     <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   , thêm một số CSS để tạo kiểu cho các phần tử: style.css   /* 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   , hãy sử dụng SDK để tạo một phiên bản của   : main.js 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   và   bên trong tệp   . licenseSN licenseKey ./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:    Đường dẫn tương đối tới thư mục   của gói SDK đã giải nén libPath: lib    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 jr:    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 hải quan.ScrollWrap:  Với   đã đượ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: pdfViewer   // ... 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   và mở tệp đó trong trình xem bằng phương thức   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.  blob openPDFByFile()  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   sẽ tạo ID để xác định các trường biểu mẫu trong tài liệu.   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: RandomId() FieldTypes  Một   để thông báo cho người dùng về việc sử dụng nó nhãn    để khớp các phần tử được kéo với các mục siêu dữ liệu Tên  Một   để chỉ ra loại của trường loại  Chiều   và   để tính toán vị trí hình chữ nhật trong tệp PDF rộng height  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   —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   , đố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. PDFDoc PDFForm  Mỗi phần tử có một thuộc tính   được đặt thành   để cho phép kéo, cũng như   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.   này sau đó được sử dụng bên trong trình xử lý sự kiện   để truyền nó trong quá trình kéo và thả. có thể kéo true id Id dragstart  Để có được tham số   cần thiết cho hàm   , bạn sẽ phải nhận được kết quả   của hàm   bằng cách sửa đổi nó như sau: PDFDoc LoadFormFieldsMenu() hứa hẹn LoadPDF()   // ... 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   chuyển tiếp tương tác cần xử lý trong sự kiện   bằng cách gọi   . kéo thả PreventDefault()  Bên trong trình xử lý sự kiện   , 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   có sẵn trên phiên bản   . thả ConvertClientCoordToPDFCoord() 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   từ đối tượng   được tạo trước đó trong hàm. Phương thức này chấp nhận các đối số sau: addControl() PDFForm  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   và   để làm cho tọa độ chuột ở giữa trường biểu mẫu chiều rộng chiều cao  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   của đối tượng   bằng ID. Các tùy chọn được đặt tương ứng bằng phương thức   . getField() PDFForm 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ữ   , 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. của Foxit  Để tìm hiểu sâu hơn về các khả năng, hãy tham khảo   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. tài liệu chính thức  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   đượ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. kho GitHub  Cũng được xuất bản   . ở đây

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Free Trial

Now Hiring

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

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

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

128 Stories To Learn About Charles Dickens

94 Stories To Learn About John Locke

61 Stories To Learn About Polotical Philosophy

128 Stories To Learn About Charles Dickens

94 Stories To Learn About John Locke

61 Stories To Learn About Polotical Philosophy

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps