ホームページ > 記事 > ウェブフロントエンド > HTMLnd JavaScript を使用して PDF ドキュメントにバーコードを挿入する方法

HTMLnd JavaScript を使用して PDF ドキュメントにバーコードを挿入する方法

Linda Hamiltonオリジナル: 2024-11-16 16:11:03220ブラウズ

PDF ドキュメントにバーコードを挿入すると、ドキュメントの管理、追跡、データ処理のワークフローが大幅に合理化されます。バーコードは一意の識別子として機能し、自動データ入力、迅速な検索、およびセキュリティの強化を可能にします。この記事では、HTML5、JavaScript、Dynamsoft Document Viewer SDK を利用してバーコードを生成し、PDF ドキュメントに埋め込む方法を説明します。

Web PDF エディターのデモビデオ

オンラインデモ

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

前提条件

Dynamsoft Document Viewer: この JavaScript SDK を使用すると、PDF や一般的な画像ファイル (JPEG、PNG など) を含むさまざまなドキュメント形式のシームレスな表示と注釈付けが可能になります。 、TIFF、およびBMP。堅牢な機能セットにより、PDF のレンダリング、ページの移動、画質の向上、注釈付きドキュメントの保存を行うことができます。開始するには、npm からパッケージをインストールします。
Dynamsoft Capture Vision トライアルライセンス: Dynamsoft SDK の全機能にアクセスするには、30 日間の無料トライアルライセンスにサインアップしてください。このトライアルでは、すべての機能に完全にアクセスできるため、SDK を詳しく調べることができます。

HTML5 と JavaScript で PDF ドキュメントエディターを実装する手順

次の段落では、バーコード挿入機能を備えた Web ベースの PDF ドキュメントエディターを作成するプロセスについて説明します。このエディターを使用すると、ユーザーは PDF ドキュメントをロードし、注釈としてバーコードを挿入し、変更された PDF ファイルをローカルに保存できます。

ステップ 1: Dynamsoft Document Viewer SDK を含める

<頭> HTML ファイルのセクションに、次のスクリプトタグを追加して Dynamsoft Document Viewer SDK を含めます:

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

ステップ 2: Dynamsoft Document Viewer をアクティブ化する

index.html で、ライセンスキーの入力要素と SDK をアクティブ化するボタンを作成します。
```
<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);
    }

}

説明

engineResourcePath は、Dynamsoft Document Viewer エンジンファイルの場所を指す必要があります。
setProcessingHandler は、画質を向上させるための画像フィルターを設定します。
documentManager オブジェクトは、ドキュメントビューアとエディタを管理するために使用されます。

ステップ 3: すぐに使用できるコンポーネントを備えた Web PDF ビューアを作成する

Dynamsoft Document Viewer SDK は、Web PDF ビューアアプリケーションを構築するために最小限のコードを必要とする組み込みのドキュメントエディタを提供します。

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>
```
uiConfig パラメーターは、注釈ツールを含むドキュメントビューアーのデフォルトの UI 構成を指定します。

ステップ 4: PDF ドキュメントにバーコードを挿入するためのカスタムボタンを追加する

Dynamsoft Document Viewer では、UI 要素とイベントハンドラーをカスタマイズできます。公式ドキュメントによると、カスタムボタンを追加できます。

Google のマテリアルアイコンを使用したカスタムバーコードボタン

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

}




className は Google フォントを指します。ボタンにqr_codeアイコンを表示するには、material-iconsクラスを使用します。



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





  
  
  バーコードボタンをツールバーに追加する


ツールバーにボタンを追加するには、showViewer 関数の uiConfig パラメータを変更します。



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





  
  
  ボタンを押してバーコード生成ダイアログをポップアップ表示します


バーコード ボタンをクリックすると、ユーザーがバーコードの内容を入力し、バーコードの種類を選択するためのポップアップ ダイアログが表示されます。



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




ダイアログには次の要素が含まれています:


バーコードの種類を選択するためのドロップダウン リスト。
バーコードの内容を入力するための入力フィールド。
データを送信するための [OK] ボタン。
送信せずにポップアップを閉じるための [キャンセル] ボタン。


完全なコードは次のとおりです:



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





バーコードのコンテンツとタイプを取得した後、bwipjs を使用して、生成されたバーコードをキャンバス上に描画します。次に、キャンバスを BLOB に変換し、注釈として PDF ドキュメントに挿入します。



editViewer.on("addQr", addQr);





  
  
  ステップ 6: バーコードを含む PDF ドキュメントをローカル ディスクに保存する


download() 関数を作成し、ツールバーのダウンロード ボタンにバインドします。



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




PDF ドキュメントを保存するとき、saveAnnotation オプションはフラット化に設定され、バーコードを含む注釈が確実にドキュメントに埋め込まれます。


  
  
  Web PDF ドキュメント エディターの実行




プロジェクトのルート ディレクトリで Web サーバーを起動します:


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



Web ブラウザで http://localhost:8000 を開きます。
PDF ドキュメントを読み込みます。

PDF ドキュメントにバーコードを注釈として挿入します。






  
  
  PDFドキュメントからバーコードを読み取る


PDF ドキュメントがローカル ディスクに保存されたら、Dynamsoft バーコード リーダーで読み取ってバーコードの内容を確認できます。



Dynamsoft C Barcode Reader SDK で構築された Node.js ラッパーである barcode4nodejs をインストールします。


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




PDF ドキュメントからバーコードを読み取るためのスクリプト ファイル test.js を作成します。


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



注: ライセンス キーを自分のものに置き換える必要があります。


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

}



バーコードの内容がコンソールに印刷されます。






  
  
  ソースコード


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


          

            
        以上がHTMLnd JavaScript を使用して PDF ドキュメントにバーコードを挿入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html5 html npm Object define for select include Directory Filter class Event JS console function default this location display canvas input github http https ui Access

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript でオブジェクトの配列からプロパティを効率的に削除するにはどうすればよいですか?次の記事：JavaScript でオブジェクトの配列からプロパティを効率的に削除するにはどうすればよいですか?

続きを見る

HTMLnd JavaScript を使用して PDF ドキュメントにバーコードを挿入する方法

Web PDF エディターのデモビデオ

オンラインデモ

前提条件

HTML5 と JavaScript で PDF ドキュメント エディターを実装する手順

ステップ 1: Dynamsoft Document Viewer SDK を含める

ステップ 2: Dynamsoft Document Viewer をアクティブ化する

ステップ 3: すぐに使用できるコンポーネントを備えた Web PDF ビューアを作成する

ステップ 4: PDF ドキュメントにバーコードを挿入するためのカスタム ボタンを追加する

Google のマテリアル アイコンを使用したカスタム バーコード ボタン

バーコードボタンをツールバーに追加する

ボタンを押してバーコード生成ダイアログをポップアップ表示します

ステップ 6: バーコードを含む PDF ドキュメントをローカル ディスクに保存する

Web PDF ドキュメント エディターの実行

PDFドキュメントからバーコードを読み取る

ソースコード

関連記事

HTML5 と JavaScript で PDF ドキュメントエディターを実装する手順

ステップ 4: PDF ドキュメントにバーコードを挿入するためのカスタムボタンを追加する

Google のマテリアルアイコンを使用したカスタムバーコードボタン

ステップ 6: バーコードを含む PDF ドキュメントをローカルディスクに保存する

Web PDF ドキュメントエディターの実行