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   değerli bir seçim olarak ortaya çıkıyor.   çeşitli sektörlere hitap eden zengin bir dizi özelliğe sahiptir. Foxit Foxit'in PDF SDK kitaplıkları,  Ö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   eğitimde özetlenen adımları takip etmenize ve uygulamanıza olanak tanır. GitHub deposu,   Web için Foxit PDF SDK'sı nedir?  Foxit tarafından sunulan çeşitli PDF SDK'ları arasında   , 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 PDF SDK for Web  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ı   . ZIP dosyası SDK'yı, belgeleri ve örnekleri içermelidir. indirin  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   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: Vite   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   dizinine göre   adresinde mevcut olduğu varsayılmaktadır. proje ./FoxitPDFSDKForWeb   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.     <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,   dosyasına, öğelerin stilini belirlemek için biraz CSS ekleyin: 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; }    içinde,   bir örneğini oluşturmak için SDK'yı kullanın: main.js pdfViewer'ı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), }, });    ve   değerlerinizi   dosyasında bulabilirsiniz. LicenseSN LicenseKey ./FoxitPDFSDKForWeb/examples/license-key.js  pdfViewer, yapıcıya aşağıdakileri içeren bir yapılandırma nesnesi sağlanarak oluşturulur:    Sıkıştırılmış SDK paketinin   klasörünün göreceli yolu libPath: lib    JR motoru için en önemlisi lisans bilgilerini içeren yapılandırma seçenekleri jr:    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 gümrük.ScrollWrap:    oluşturulduktan sonra tek yapmanız gereken onu başlatmak ve belgeyi yüklemektir: 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");  Yukarıdaki kod parçası, PDF dosyasını bir   olarak getirir ve   yöntemini kullanarak görüntüleyicide açar. Kullanılan PDF belgesi, SDK'nın içerdiği belgelerden bir demo kılavuzudur.  blob openPDFByFile()  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;    işlevi, belge içindeki form alanlarını tanımlamak için kimlikler üretecektir.   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: RandomId() FieldTypes,  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   ve  genişlik 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   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   nesnesini almak için kullanılır. PDFDoc'u PDFForm  Her öğenin, sürüklemeye izin vermek için   olarak ayarlanmış bir   ö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   vardır. Bu   daha sonra sürükle ve bırak işlemi sırasında aktarmak için   olay dinleyicisinde kullanılır. true sürüklenebilir kimliği kimlik dragstart    işlevi için gereken   parametresini almak için,   işlevinin ortaya çıkan   aşağıdaki şekilde değiştirerek elde etmeniz gerekir: loadFormFieldsMenu() PDFDoc loadPDF() vaadini   // ... 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,   olay dinleyicisi,   olayında işlenecek etkileşimi   çağırarak iletir. dragover drop PreventDefault() öğesini    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,   örneğinde bulunan   yöntemi kullanılarak PDF koordinatlarına dönüştürülür. Bırakma pdfViewer ConvertClientCoordToPDFCoord()  Konum, meta veriler ve rastgele oluşturulan kimlik, işlevde daha önce oluşturulan   nesnesinden   yöntem çağrısında kullanılır. Yöntem aşağıdaki bağımsız değişkenleri kabul eder: PDFForm addControl()  Form alanının yerleştirileceği sayfanın dizini (   çağrısından alınır) convertClientCoordToPDFCoord()  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   ve   kullanılarak hesaplanan, form alanının dikdörtgen biçimindeki yerleşimini tanımlayan bağımsız değişken genişlik yükseklik  Son olarak, alanın bir seçenekler listesini kabul etmesi durumunda, bu alana ilk olarak kimlik kullanılarak   nesnesinin   yöntemiyle erişilir. Seçenekler   yöntemi kullanılarak uygun şekilde ayarlanır. PDFForm getField() setOptions()  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,   ç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. Foxit'in  Olasılıkları daha derinlemesine incelemek için SDK tarafından sağlanan   ve ek kaynaklara bakın. Belgeler, gelişmiş özellikler, özelleştirme seçenekleri ve en iyi uygulamalar konusunda size yol gösterecektir. resmi belgelere  Eğiticiyi incelemek veya çalışmanızı kontrol etmek istiyorsanız öğreticiyle ilişkili   başvurabilirsiniz. Depo muhtemelen eğitimde kapsanan kavramları anlamanıza ve uygulamanıza yardımcı olacak kaynak kodunu, örnekleri ve ek materyalleri içerir. GitHub deposuna    da yayınlandı. Burada

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

Bu ses hikayenin orijinal dilinde üretilmiştir!

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

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

Kullanıcı Odaklı Kripto Ürünleri Oluşturma: Müşteri Geri Bildiriminin Önemi

Sulara Yelken Açmak: Data Lakes ile Üretim Sınıfında RAG Uygulamaları Geliştirme

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

Kullanıcı Odaklı Kripto Ürünleri Oluşturma: Müşteri Geri Bildiriminin Önemi

Sulara Yelken Açmak: Data Lakes ile Üretim Sınıfında RAG Uygulamaları Geliştirme

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps