4,070 okumalar

Web için Foxit PDF SDK'yı Kullanarak Özel Form Alanları Oluşturma Kılavuzu

ile Foxit Software8m2023/11/17

Çok uzun; Okumak

Bu eğitim size Foxit PDF Library for Web'i kullanarak web tarayıcınızın PDF belgelerinde özel form alanlarının nasıl oluşturulacağını öğretecektir.

featured image - Web için Foxit PDF SDK'yı Kullanarak Özel Form Alanları Oluşturma Kılavuzu

PDF formatı, çeşitli belge türleri için çok yönlü bir çözüm olarak hizmet vererek modern yazılımların vazgeçilmezi haline geldi. Güvenli, düzenlenebilir ve kullanıcı dostu PDF'ler arayan işletmeler için Foxit değerli bir seçim olarak ortaya çıkıyor. Foxit'in PDF SDK kitaplıkları, çeşitli sektörlere hitap eden zengin bir dizi özelliğe sahiptir.

Özellikle web tarayıcısı tabanlı PDF'ler, belge yönetiminde sayısız uygulama alanı bulur. Aylık ekstrelerin oluşturulması gibi görevleri kolaylaştırarak çok sayıda bankacılık sisteminde önemli bir rol oynarlar. Ayrıca uyumluluk sektörü, güvenli veri toplama ve depolama için web tabanlı PDF'lere güveniyor.

Bu eğitim, web tarayıcınızın PDF belgelerinde özelleştirilmiş form alanları oluşturmak için Foxit PDF SDK for Web'den yararlanma konusunda size rehberlik eder. Eşlik eden GitHub deposu, eğitimde özetlenen adımları takip etmenize ve uygulamanıza olanak tanır.

Web için Foxit PDF SDK'sı nedir?

Foxit tarafından sunulan çeşitli PDF SDK'ları arasında Foxit PDF SDK for Web , Foxit'in oluşturma motorunun avantajlarından yararlanan her şeyi kapsayan bir PDF kitaplığı olarak öne çıkıyor. Bu SDK, kapsamlı ve tamamen özelleştirilebilir bir PDF görüntüleyiciyi uygulamalarınıza sorunsuz bir şekilde entegre etmenizi sağlar.

Foxit SDK ile hazırlanan Web PDF'leri, kullanıcıların JavaScript kullanarak doğrudan mobil veya masaüstü tarayıcılarından çeşitli dillerdeki belgeleri zahmetsizce görüntülemesine, doldurmasına, açıklama eklemesine ve imzalamasına olanak tanır. SDK, Firefox, Safari, Chrome ve Opera dahil olmak üzere tüm önemli tarayıcılarla uyumludur.

İşlevselliği göstermek için, gerekli yapıyı sağlamak amacıyla Foxit PDF SDK for Web'i kullanarak bir şablondan yeni bir PDF projesi oluşturmaya başlayacaksınız. Bu uygulamalı yaklaşım, SDK'nın web tabanlı projelerinizde PDF özelliklerini nasıl geliştirdiğine dair pratik bir gösterim sunacaktır.

Web için Foxit PDF SDK'nın Uygulanması

Web için Foxit PDF SDK'yı indirin . ZIP dosyası SDK'yı, belgeleri ve örnekleri içermelidir.

Bu örnekleri, sıkıştırılmış dizinden bir HTTP sunucusu çalıştırarak önizleyebilirsiniz.

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

Projeyi Kur

Bu eğitimde ön uç araçları için Vite kullanılmaktadır. ES modüllerini (ESM) temel alır, hızlıdır ve SDK'yı kutudan çıktığı gibi kullanmak için ihtiyacınız olan her şeyle birlikte gelir. Bir şablondan yeni bir proje oluşturmak ve geliştirme sunucusunu başlatmak için Node.js 12.2.0 veya daha yeni bir sürüme sahip olduğunuzdan emin olun ve aşağıdaki komutları çalıştırın:

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

SDK'yı oluşturulan dizine taşıyın. Bu öğreticinin geri kalanında, SDK'nın ana proje dizinine göre ./FoxitPDFSDKForWeb adresinde mevcut olduğu varsayılmaktadır.

PDF'yi yükleme

Denemeye başlamak için belge yüklenmiş bir PDF görüntüleyiciye ihtiyacınız olacak. PDF görüntüleyiciyi başlatmak için önce HTML yapısını oluşturun ve SDK'yı yükleyin.

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

Ayrıca, style.css dosyasına, öğelerin stilini belirlemek için biraz CSS ekleyin:

 /* 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; }

main.js içinde, pdfViewer'ın bir örneğini oluşturmak için SDK'yı kullanın:

 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), }, });

LicenseSN ve LicenseKey değerlerinizi ./FoxitPDFSDKForWeb/examples/license-key.js dosyasında bulabilirsiniz.

pdfViewer, yapıcıya aşağıdakileri içeren bir yapılandırma nesnesi sağlanarak oluşturulur:

libPath: Sıkıştırılmış SDK paketinin lib klasörünün göreceli yolu
jr: JR motoru için en önemlisi lisans bilgilerini içeren yapılandırma seçenekleri
gümrük.ScrollWrap: PDF boyutlandırmasını ve kaydırmasını kontrol eden özel bir bileşen; burada ayar, görüntüleyiciyi kapsayıcıya göre ayarlar

pdfViewer oluşturulduktan sonra tek yapmanız gereken onu başlatmak ve belgeyi yüklemektir:

 // ... 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");

Yukarıdaki kod parçası, PDF dosyasını bir blob olarak getirir ve openPDFByFile() yöntemini kullanarak görüntüleyicide açar. Kullanılan PDF belgesi, SDK'nın içerdiği belgelerden bir demo kılavuzudur.

Sağdaki ek alan, sürüklenebilir form alanları için menü görevi görecektir.

Özel Form Alanları Oluşturma

Foxit SDK ile bir form alanı oluşturmak için ihtiyacınız olan tek şey bir görüntüleyici, form alanının meta verileri (alan türü veya seçim seçenekleri gibi) ve form alanı konumudur. Bu örnekte, kullanıcının görüntüleyiciye sürükleyip bırakabileceği, hazır meta verilere sahip, önceden tanımlanmış bir dizi form alanı oluşturacaksınız.

Meta Veriyi Tanımlama

İzin verilen alanların yanı sıra ek yardımcılar için meta verileri tanımlayarak başlayın:

 // ... 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;

RandomId() işlevi, belge içindeki form alanlarını tanımlamak için kimlikler üretecektir. FieldTypes, SDK'da bulunan önceden tanımlanmış alan türlerine daha hızlı başvuru yapılmasını sağlayan bir kısayoldur. Her form alanı girişi şunları içerir:

Kullanıcıyı kullanımı hakkında bilgilendirecek bir etiket
Sürüklenen öğeleri meta veri girişleriyle eşleştirmek için kullanılan ad
Alanın türünü belirten bir tür
PDF'deki konum dikdörtgenini hesaplamak için genişlik ve height

Son olarak, ComboBoxOptions ve listBoxOptions, kullanıcıların birini seçmesini gerektiren alanlar için örnek seçenekler içerir.

Sürükle ve Bırak Öğeleri Oluşturma

Meta veriler hazır olduğunda, form alanı yerleşiminin yanı sıra sürükle ve bırak mantığının yönetilmesi için bir işlev oluşturabilirsiniz:

 // ... 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); }); };

İşlev, bir PDF belgesini temsil eden bir SDK nesnesi olan PDFDoc'u bağımsız değişken olarak kabul eder. Bu alanlar sürüklenebilir öğeler halinde işlenip yan menüye eklendikten sonra form alanlarını eklemek ve yapılandırmak için kullanılacak bir PDFForm nesnesini almak için kullanılır.

Her öğenin, sürüklemeye izin vermek için true olarak ayarlanmış bir sürüklenebilir özelliği ve ayrıca bunları temeldeki meta verilerle eşleştirmek için her form alanının benzersiz adına karşılık gelen bir kimliği vardır. Bu kimlik daha sonra sürükle ve bırak işlemi sırasında aktarmak için dragstart olay dinleyicisinde kullanılır.

loadFormFieldsMenu() işlevi için gereken PDFDoc parametresini almak için, loadPDF() işlevinin ortaya çıkan vaadini aşağıdaki şekilde değiştirerek elde etmeniz gerekir:

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

Oluşturulan menü öğeleriyle uygulama artık şu şekilde görünür:

Sürükle ve Bırak İşlevselliğini Uygulama

Sürüklenebilir öğeleri oluşturduktan sonra, sürükle ve bırak işlevini tam olarak uygulamaya koymanın ve görüntüleyicide form alanları oluşturmaya izin vermenin zamanı geldi:

 // ... 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); } }); }; // ...

Yukarıdaki kodda, dragover olay dinleyicisi, drop olayında işlenecek etkileşimi PreventDefault() öğesini çağırarak iletir.

Bırakma olayı işleyicisinin içinde, eşleşen meta veriler ilk olarak sürüklenen öğenin verileri kullanılarak alınır. Daha sonra, olaydaki fare konumu, pdfViewer örneğinde bulunan ConvertClientCoordToPDFCoord() yöntemi kullanılarak PDF koordinatlarına dönüştürülür.

Konum, meta veriler ve rastgele oluşturulan kimlik, işlevde daha önce oluşturulan PDFForm nesnesinden addControl() yöntem çağrısında kullanılır. Yöntem aşağıdaki bağımsız değişkenleri kabul eder:

Form alanının yerleştirileceği sayfanın dizini ( convertClientCoordToPDFCoord() çağrısından alınır)
Yeni oluşturulan form alanı için rastgele oluşturulan kimlik
Sağlanan sabitlere göre form alanının türü (meta verilerden alınır)
Farenin form alanının merkezini koordine etmesini sağlamak için genişlik ve yükseklik kullanılarak hesaplanan, form alanının dikdörtgen biçimindeki yerleşimini tanımlayan bağımsız değişken

Son olarak, alanın bir seçenekler listesini kabul etmesi durumunda, bu alana ilk olarak kimlik kullanılarak PDFForm nesnesinin getField() yöntemiyle erişilir. Seçenekler setOptions() yöntemi kullanılarak uygun şekilde ayarlanır.

Halihazırda yerleştirilmiş birkaç form alanıyla birlikte son uygulama şuna benzer:

Çözüm

PDF'lerinize işlevsellik eklemek, kuruluşunuza ve kullanıcılarınıza gerçekten önemli faydalar sağlayabilir. Elektronik güncellemeler ve imzalar zamandan, paradan ve emekten tasarruf sağlarken özelleştirilmiş ve güvenli belgeler şirketinize olan güveni artırır.

Daha önce de gösterildiği gibi, Foxit'in çok dilli PDF aracı, Foxit PDF SDK for Web ile birleştiğinde güçlü bir çözüm sağlar. Özel form alanları oluşturabilir, sürükle ve bırak işlevini uygulayabilir ve çeşitli özelliklerin kilidini açabilirsiniz. Ancak bu buzdağının sadece görünen kısmı. Foxit PDF SDK for Web, PDF işlevselliğinizi daha da geliştirmek için kapsamlı bir dizi özellik sunar.

Olasılıkları daha derinlemesine incelemek için SDK tarafından sağlanan resmi belgelere ve ek kaynaklara bakın. Belgeler, gelişmiş özellikler, özelleştirme seçenekleri ve en iyi uygulamalar konusunda size yol gösterecektir.

Eğiticiyi incelemek veya çalışmanızı kontrol etmek istiyorsanız öğreticiyle ilişkili GitHub deposuna başvurabilirsiniz. Depo muhtemelen eğitimde kapsanan kavramları anlamanıza ve uygulamanıza yardımcı olacak kaynak kodunu, örnekleri ve ek materyalleri içerir.