電子署名ツール

PDFビューワでは、注釈エディタにある署名ツールを使用して、PDFドキュメントに電子署名を追加することができます。

［署名を追加］ボタンをクリックすることで表示される［署名の追加］ダイアログにて、PDFドキュメントに署名を入力、描画、または画像を追加することができます。署名を入力または描画する際には、書式オプションを使用して、署名に書式を設定することもできます。署名の場所が指定されていない場合は、マウスを使用して希望の場所に電子署名を移動することができます。

次のGIFは、署名を描画、書式を設定した上で、PDFドキュメントに追加する方法を示しています。ご覧のように、署名はスタンプ注釈として注釈エディタのプロパティパネルに追加されます。これらのプロパティを使用して、署名の削除、ダウンロード、印刷可否の設定、位置変更、サイズ変更などを行うことができます。

次の画像は、フォント、色、サイズなど、［署名の追加］ダイアログにて利用可能な様々な書式設定オプションを使用して入力された署名を示しています。

次の画像は、PDFドキュメントに追加できるアップロードされた署名画像を示しています。

メモ： PDFドキュメントに変更が生じるため、署名ツールを使用するにはSupportApiを構成する必要があります。

ツールバーへの署名ツールボタンの追加

注釈エディタのツールバーには、デフォルトで[署名を追加]ボタンが含まれていますが、以下のコードを使用して、ビューワのツールバーレイアウトにもこのボタンを追加することができます。

Index.cshtml	コードのコピー
viewer.toolbarLayout.viewer.default.splice(1, 0, 'edit-sign-tool'); viewer.applyToolbarLayout();

署名の保存

［署名を保存］チェックボックスをチェックすると、署名を保存できます。これにより、署名データがブラウザのローカルストレージに保存され、署名を再利用できるようになります。

メモ： 保存される署名のデータは現在のユーザのものになり、currentUserNameプロパティまたはuserNameオプションを使用して設定できます。したがって、これらのプロパティが変更されると、保存される署名のデータも変更されます。

署名ツールダイアログのカスタマイズ

［署名の追加］ダイアログの外観および動作を、以下のコードに示すように、signToolオプションを使用してカスタマイズすることができます。

Index.cshtml	コードのコピー
viewer.options.signTool = { title: 'Please, sign.', selectedTab: 'Draw', hideTabs: true, hideToolbar: true, hideSaveSignature: true, saveSignature: false, penColor: 'black', penWidth: 2, location: 'Center', destinationScale: 1.2 };

Index.cshtml

コードのコピー

viewer.options.signTool = {
    title: 'Please, sign.',
    selectedTab: 'Draw',
    hideTabs: true, hideToolbar: true, hideSaveSignature: true,
    saveSignature: false,
    penColor: 'black', penWidth: 2,
    location: 'Center',
    destinationScale: 1.2
};

メモ： 設定オブジェクトが引数として渡される場合、showSignToolメソッドはsignToolオプションより優先されます。

サーバーからの署名の追加

DsPdfViewer クラスの addStamp メソッドを使用して、サーバーから電子署名を取得してPDFドキュメントに追加することもできます。addStamp メソッドは非同期なので、非同期コードで待機すれば、［viewer.addStamp］の操作を同時に実行することができます。詳細は以下のサンプルコードを参照してください。

JavaScript	コードのコピー
function addStampFromUrl(imageUrl, viewer) { // 電子署名のパラメータを定義します。 fetch(imageUrl) .then(response => response.blob()) .then(blob => blob.arrayBuffer()) .then(arrayBuffer => { const fileId = new Date().getTime() + ".png"; const fileName = fileId; const pageIndex = 0; const imageData = new Uint8Array(arrayBuffer); const rect = [0, 0, 200, 200]; viewer.storage.setItem(fileId, imageData); // PDF ドキュメントに電子署名を追加します。 viewer.addStamp( imageData, { fileId, fileName, pageIndex, rect, select: false, subject: "", rotate: 0, convertToContent: false }); }); } addStampFromUrl("https://i.imgur.com/signature.png", viewer, 0);

JavaScript

コードのコピー

function addStampFromUrl(imageUrl, viewer)
{
    // 電子署名のパラメータを定義します。
    fetch(imageUrl)
    .then(response => response.blob())
    .then(blob => blob.arrayBuffer())
    .then(arrayBuffer => {
    const fileId = new Date().getTime() + ".png";
    const fileName = fileId;
    const pageIndex = 0;
    const imageData = new Uint8Array(arrayBuffer);
    const rect = [0, 0, 200, 200];

    viewer.storage.setItem(fileId, imageData);

    // PDF ドキュメントに電子署名を追加します。
    viewer.addStamp(
                imageData,
                      {
                        fileId,
                        fileName,
                        pageIndex,
                        rect,
                        select: false,
                        subject: "",
                        rotate: 0,
                        convertToContent: false
                      });
    });
}
addStampFromUrl("https://i.imgur.com/signature.png", viewer, 0);

制限事項

addStamp メソッドは SVG 画像形式をサポートしていません。よって、画像を他のサポートされている形式に変換する必要があります。