HTMLnd JavaScript を使用して PDF ドキュメントにバーコードを挿入する方法-jsチュートリアル-php.cn

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 サイトの他の関連記事を参照してください。