Comment insérer des codes-barres dans un document PDF avec HTMLnd JavaScript

L'insertion de codes-barres dans des documents PDF peut rationaliser considérablement les flux de travail de gestion, de suivi et de traitement des données. Les codes-barres servent d'identifiants uniques, permettant une saisie automatisée des données, une récupération rapide et une sécurité renforcée. Dans cet article, nous montrerons comment exploiter HTML5, JavaScript et le SDK Dynamsoft Document Viewer pour générer et intégrer des codes-barres dans des documents PDF.

Vidéo de démonstration de l'éditeur Web PDF

Démo en ligne

https://yushulx.me/web-document-annotation/

Conditions préalables

• Dynamsoft Document Viewer : ce SDK JavaScript permet une visualisation et une annotation transparentes de divers formats de documents, y compris les PDF et les fichiers image courants tels que JPEG, PNG , TIFF et BMP. Grâce à son ensemble de fonctionnalités robustes, vous pouvez restituer des PDF, parcourir les pages, améliorer la qualité des images et enregistrer des documents annotés. Installez le package à partir de npm pour commencer.

• Licence d'essai Dynasoft Capture Vision : Pour accéder à toutes les fonctionnalités des SDK Dynamsoft, inscrivez-vous pour une licence d'essai gratuite de 30 jours. Cet essai offre un accès complet à toutes les fonctionnalités, vous permettant d'explorer les SDK en profondeur.

Étapes pour implémenter un éditeur de document PDF en HTML5 et JavaScript

Dans les paragraphes suivants, nous vous guiderons tout au long du processus de création d'un éditeur de documents PDF basé sur le Web avec des capacités d'insertion de codes-barres. L'éditeur permettra aux utilisateurs de charger des documents PDF, d'insérer des codes-barres comme annotations et d'enregistrer les fichiers PDF modifiés localement.

Étape 1 : Inclure le SDK Dynamsoft Document Viewer

Dans la zone de votre fichier HTML, ajoutez les balises de script suivantes pour inclure le SDK Dynamsoft Document Viewer :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/ddv.css">
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/ddv.js"></script>

Étape 2 : activer la visionneuse de documents Dynamsoft

1. Dans index.html, créez un élément d'entrée pour la clé de licence et un bouton pour activer le SDK :
   

   <input type="text"
       placeholder="LICENSE-KEY"
      >
   
   

2. Implement the activation logic in main.js:
   

   async function activate(license) {
       try {
           Dynamsoft.DDV.Core.license = license;
           Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/engine";
           await Dynamsoft.DDV.Core.init();
           Dynamsoft.DDV.setProcessingHandler("imageFilter", new Dynamsoft.DDV.ImageFilter());
           docManager = Dynamsoft.DDV.documentManager;
   
       } catch (error) {
           console.error(error);
           toggleLoading(false);
       }
   
   }
   

   Explication

   • Le engineResourcePath doit pointer vers l'emplacement des fichiers du moteur Dynamsoft Document Viewer.
   • setProcessingHandler définit le filtre d'image pour améliorer la qualité de l'image.
   • L'objet documentManager est utilisé pour gérer la visionneuse et l'éditeur de documents.

Étape 3 : Créer une visionneuse Web PDF avec des composants prêts à l'emploi

Le SDK Dynamsoft Document Viewer fournit un éditeur de documents intégré qui nécessite un minimum de code pour créer une application de visualisation de PDF Web.

1. Créez un élément conteneur pour la visionneuse de documents dans index.html :
   

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/ddv.css">
   <script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/ddv.js"></script>
   

   Le paramètre uiConfig spécifie la configuration de l'interface utilisateur par défaut pour la visionneuse de documents, y compris les outils d'annotation.

Étape 4 : Ajouter un bouton personnalisé pour insérer des codes-barres dans le document PDF

Dynamsoft Document Viewer permet de personnaliser les éléments de l'interface utilisateur et les gestionnaires d'événements. Selon la documentation officielle, vous pouvez ajouter des boutons personnalisés.

Un bouton de code-barres personnalisé avec les icônes matérielles de Google

Définissez un objet bouton personnalisé dans main.js :

<input type="text"
    placeholder="LICENSE-KEY"
   >



Implement the activation logic in main.js:


async function activate(license) {
    try {
        Dynamsoft.DDV.Core.license = license;
        Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/engine";
        await Dynamsoft.DDV.Core.init();
        Dynamsoft.DDV.setProcessingHandler("imageFilter", new Dynamsoft.DDV.ImageFilter());
        docManager = Dynamsoft.DDV.documentManager;

    } catch (error) {
        console.error(error);
        toggleLoading(false);
    }

}




Le className pointe vers les polices Google. Utilisez la classe materials-icons pour afficher l'icône qr_code dans le bouton.



<div class="document-viewer">
    <div>

</li>
<li>
<p>Initialize the document viewer in main.js:<br>
</p>
<pre class="brush:php;toolbar:false">async function showViewer() {
    if (!docManager) return;
    let editContainer = document.getElementById("edit-viewer");
    editContainer.parentNode.style.display = "block";
    editViewer = new Dynamsoft.DDV.EditViewer({
        container: editContainer,
        uiConfig: DDV.getDefaultUiConfig("editViewer", { includeAnnotationSet: true })
    });
}





  
  
  Ajouter le bouton de code-barres à la barre d'outils


Pour ajouter le bouton à la barre d'outils, modifiez le paramètre uiConfig dans la fonction showViewer :



const qrButton = {
    type: Dynamsoft.DDV.Elements.Button,
    className: "material-icons icon-qr_code",
    tooltip: "Add a QR code. Ctrl+Q",
    events: {
        click: "addQr",
    },
};





  
  
  Appuyez sur le bouton pour faire apparaître une boîte de dialogue de génération de codes-barres


Lorsque vous cliquez sur le bouton du code-barres, une boîte de dialogue contextuelle apparaîtra pour que les utilisateurs puissent saisir le contenu du code-barres et sélectionner le type de code-barres :



<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
    .icon-qr_code::before {
        content: "qr_code";
    }

    .icon-qr_code {
        display: flex;
        font-size: 1.5em;
    }
</style>




La boîte de dialogue contient les éléments suivants :


Une liste déroulante pour sélectionner les types de codes-barres.
Un champ de saisie pour saisir le contenu du code-barres.
Un bouton OK pour soumettre les données.
Un bouton Annuler pour fermer la pop-up sans soumettre.


Voici le code complet :



const pcEditViewerUiConfig = {
    type: Dynamsoft.DDV.Elements.Layout,
    flexDirection: "column",
    className: "ddv-edit-viewer-desktop",
    children: [
        {
            type: Dynamsoft.DDV.Elements.Layout,
            className: "ddv-edit-viewer-header-desktop",
            children: [
                {
                    type: Dynamsoft.DDV.Elements.Layout,
                    children: [
                        Dynamsoft.DDV.Elements.ThumbnailSwitch,
                        Dynamsoft.DDV.Elements.Zoom,
                        Dynamsoft.DDV.Elements.FitMode,
                        Dynamsoft.DDV.Elements.DisplayMode,
                        Dynamsoft.DDV.Elements.RotateLeft,
                        Dynamsoft.DDV.Elements.RotateRight,
                        Dynamsoft.DDV.Elements.Crop,
                        Dynamsoft.DDV.Elements.Filter,
                        Dynamsoft.DDV.Elements.Undo,
                        Dynamsoft.DDV.Elements.Redo,
                        Dynamsoft.DDV.Elements.DeleteCurrent,
                        Dynamsoft.DDV.Elements.DeleteAll,
                        Dynamsoft.DDV.Elements.Pan,
                        Dynamsoft.DDV.Elements.AnnotationSet,
                        qrButton,
                    ],
                },
                {
                    type: Dynamsoft.DDV.Elements.Layout,
                    children: [
                        {
                            type: Dynamsoft.DDV.Elements.Pagination,
                            className: "ddv-edit-viewer-pagination-desktop",
                        },
                        Dynamsoft.DDV.Elements.Load,
                        {
                            type: Dynamsoft.DDV.Elements.Button,
                            className: "ddv-button ddv-button-download",
                            events: {
                                click: "download",
                            }
                        }
                    ],
                },
            ],
        },
        Dynamsoft.DDV.Elements.MainView,
    ],
};

editViewer = new Dynamsoft.DDV.EditViewer({
    container: editContainer,
    uiConfig: pcEditViewerUiConfig
});





Après avoir récupéré le contenu et le type du code-barres, utilisez bwipjs pour dessiner le code-barres généré sur un canevas. Ensuite, convertissez le canevas en blob et insérez-le sous forme d'annotation dans le document PDF.



editViewer.on("addQr", addQr);





  
  
  Étape 6 : Enregistrez le document PDF avec les codes-barres sur le disque local


Créez une fonction download() et liez-la au bouton de téléchargement dans la barre d'outils :



<style>
    .popup {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        width: 300px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        text-align: center;
    }

    .popup button {
        margin: 10px 5px;
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .popup .return-btn {
        background-color: #4CAF50;
        color: white;
    }

    .popup .cancel-btn {
        background-color: #f44336;
        color: white;
    }
</style>

<div>



<h3>
  
  
  Step 5: Generate a Barcode and Insert it as Annotation to PDF Document
</h3>

<p>Include the bwip-js library in index.html. This library is used to generate barcodes in various formats, such as QR Code, PDF417, and DataMatrix.<br>
</p>

<pre class="brush:php;toolbar:false"><script src="https://cdn.jsdelivr.net/npm/bwip-js@4.1.2"></script>




Lors de l'enregistrement du document PDF, l'option saveAnnotation est définie pour s'aplatir, garantissant que les annotations, y compris les codes-barres, sont intégrées dans le document.


  
  
  Exécution de l'éditeur de documents Web PDF




Démarrez un serveur web dans le répertoire racine de votre projet :


if (barcodeContent !== null) {
    try {

        bwipjs.toCanvas(tempCanvas, {
            bcid: barcodeType,
            text: barcodeContent,
            scale: 3,
            includetext: false,
        });

        tempCanvas.toBlob(async (blob) => {
            if (blob) {
                let currentPageId = docs[0].pages[editViewer.getCurrentPageIndex()];
                let pageData = await docs[0].getPageData(currentPageId);

                const option = {
                    stamp: blob,
                    x: pageData.mediaBox.width - 110,
                    y: 10,
                    width: 100,
                    height: 100,
                    opacity: 1.0,
                    flags: {
                        print: false,
                        noView: false,
                        readOnly: false,

                    }
                }

                if (applyToAllPages) {
                    for (let i = 0; i < docs[0].pages.length; i++) {
                        await Dynamsoft.DDV.annotationManager.createAnnotation(docs[0].pages[i], "stamp", option)
                    }
                } else {

                    await Dynamsoft.DDV.annotationManager.createAnnotation(currentPageId, "stamp", option)
                }
            }
        }, 'image/png');
    } catch (e) {
        console.log(e);
    }
}



Ouvrez http://localhost:8000 dans votre navigateur Web.
Charger un document PDF.

Insérez un code-barres comme annotation dans le document PDF.






  
  
  Lecture de codes-barres à partir de documents PDF


Une fois le document PDF enregistré sur votre disque local, vous pouvez vérifier le contenu du code-barres en le lisant avec le lecteur de codes-barres Dynamsoft.



Installez barcode4nodejs, un wrapper Node.js construit avec le SDK Dynamsoft C Barcode Reader.


editViewer.on("download", download);

async function download() {
    try {
        const pdfSettings = {
            saveAnnotation: "flatten",
        };

        let blob = await editViewer.currentDocument.saveToPdf(pdfSettings);

        saveBlob(blob, `document_${Date.now()}.pdf`);
    } catch (error) {
        console.log(error);
    }

}

function saveBlob(blob, fileName) {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}




Créez un fichier script, test.js, pour lire les codes-barres du document PDF :


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/ddv.css">
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/ddv.js"></script>



Remarque : vous devez remplacer la CLÉ DE LICENCE par la vôtre.


Exécutez le script avec le chemin d'accès à un fichier PDF :


<input type="text"
    placeholder="LICENSE-KEY"
   >




Implement the activation logic in main.js:


async function activate(license) {
    try {
        Dynamsoft.DDV.Core.license = license;
        Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/engine";
        await Dynamsoft.DDV.Core.init();
        Dynamsoft.DDV.setProcessingHandler("imageFilter", new Dynamsoft.DDV.ImageFilter());
        docManager = Dynamsoft.DDV.documentManager;

    } catch (error) {
        console.error(error);
        toggleLoading(false);
    }

}



Le contenu du code-barres sera imprimé dans la console.






  
  
  Code source


https://github.com/yushulx/web-twain-document-scan-management/tree/main/examples/document_annotation


          

            
        
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!