9,169 測定値

Web アプリケーションでパスワードで保護された PDF を表示するためのガイド

に Foxit Software8m2023/07/06

長すぎる; 読むには

Foxit PDF SDK for Web の機能を活用する Node アプリケーションを開発します。この統合により、パスワードで保護された PDF をブラウザで直接簡単に開くことができます。正しいパスワードを入力すると、ユーザーはファイルをシームレスにプレビューできるようになります。間違ったパスワードを入力すると、エラーメッセージが表示され、ユーザーに再試行するよう求められます。

featured image - Web アプリケーションでパスワードで保護された PDF を表示するためのガイド

PDF はビジネス環境で広く利用されており、そのセキュリティは多くのワークフローにおいて重要な側面となっています。 PDF を開く Web アプリケーションを開発する場合、パスワードで保護されたドキュメントに遭遇する可能性があります。ただし、この機能を最初から実装するには時間がかかり、多額のメンテナンス費用が発生する可能性があり、チームの現在のロードマップと一致しない可能性があります。

フォックスイットと一緒にJavaScript PDF ライブラリを使用すると、ブラウザベースのアプリケーションで PDF を表示することがシームレスなタスクになります。このステップバイステップのチュートリアルでは、Foxit PDF SDK for Web の機能を活用する Node アプリケーションを設定する方法を学びます。この統合により、パスワードで保護された PDF をブラウザで直接簡単に開くことができ、承認されたユーザーがドキュメントをプレビューできるようになります。チュートリアルをスキップして、完全に機能するアプリケーションのバージョンにアクセスしたい場合は、すぐに見つけることができます。 GitHub で入手可能。

パスワードで保護された PDF を表示する Web アプリケーションの構築

HTML には、ユーザーがブラウザ内でローカルマシンのファイルを操作できるようにする便利な組み込みのファイルアップロード機能が用意されています。ただし、JavaScript を使用して PDF を表示する場合、特にパスワード保護を扱う場合は少し複雑になる可能性があります。この包括的なチュートリアルでは、PDF アップロードフォームとオプションのパスワードフィールドで構成される Web アプリケーションを構築します。パスワードで保護された PDF がアップロードされ、正しいパスワードが入力されると、ユーザーはファイルをシームレスにプレビューできるようになります。一方、間違ったパスワードを入力すると、エラーメッセージが表示され、ユーザーに再試行するよう求められます。

このアプリケーションを開発するには、特急バックエンド開発用のWebフレームワーク、純粋なCSSスタイリング目的のため、およびFoxit の PDF SDK PDF 機能を統合するため。

前提条件

NodeJSバージョン 8 以降および故宮バージョン5+
Web 用 Foxit PDF SDK (無料体験版のダウンロードはこちらから可能です)
Foxit ライセンスキーとシリアル番号

新しい Express アプリの作成

Express ジェネレーターを使用すると、新しいアプリケーションを簡単にセットアップできます。ターミナルで次のコマンドを実行するだけです。

 npx express-generator --git --view=hbs

このコマンドは、 .gitignoreファイルとHandlebarsテンプレートファイルを含む新しいアプリケーションを作成します。

dotenv npm パッケージ (Foxit ライセンスキーとシリアル番号にアクセスするために使用) を追加し、Express の依存関係をインストールします。

 npm i dotenv && npm i

Foxit PDF SDK for Web をダウンロードすると、 examples/license-key.jsファイルにライセンスキーとシリアル番号が表示されます。次に、Web アプリケーションのルートディレクトリに.envという新しいファイルを作成し、次の 2 つの値を追加します。

 LICENSE_SN="" LICENSE_KEY=""

Foxit ライブラリを Web アプリケーションにコピーして、フロントエンドからアクセスできるようにします。次に、ダウンロードした Foxit PDF SDK からlib/ディレクトリをコピーし、Web アプリケーションのpublic/ディレクトリに貼り付けます。これで、Foxit JavaScript PDF ライブラリが Web アプリケーション内で利用できるようになります。

最後に、機密情報や独自のパッケージがバージョン管理に置かれることを望まないため、以下を.gitignoreファイルに追加します。

 ... public/lib/ .env

Web アプリケーションに必要な依存関係がすべて揃ったら、Foxit を使用して PDF プレビューを表示するルートの作成に進むことができます。

ルートの設定

このデモで作成する PDF アップロードページを含め、Express アプリケーションのすべてのページにルートがあります。 routes/index.jsファイルを更新して、ライセンスキーとシリアル番号をビューに渡します。

 var express = require('express'); var router = express.Router(); router.get('/', function(req, res, next) { res.render('index', { licenseSN: process.env.LICENSE_SN, licenseKey: process.env.LICENSE_KEY, }); }); module.exports = router;

コード変更が必要なハードコード認証情報を必要とせずに、サーバー上の認証情報を簡単に更新できます。 Express アプリケーションに認証レイヤーを追加することで、Foxit 認証情報へのアクセスを制御し、許可されたユーザーのみに表示を制限できます。

process.env変数を使用できるようにするには、 .envファイルから変数をロードするdotenvライブラリを含める必要があります。 app.jsを開き、ファイルの先頭に次の行を追加します。

 require('dotenv').config(); ...

LICENSE_SNとLICENSE_KEYは安全に保管され、必要な場合にのみフロントエンドに渡されます。次に、Web アプリケーションの表示部分に取り組みます。

PDFのアップロードと表示

Foxit の PDF SDK は、パスワードのチェックとユーザーへの PDF の表示に関連する作業の大部分を処理しますが、ファイル入力とパスワード入力の両方のユーザーインターフェイスを管理する必要があります。その前に、レイアウトを更新して基本スタイルを含める必要があります。その後、「ビューポート」を拡大縮小できるようになります。これにより、ユーザーのディスプレイに合わせて正しいサイズの PDF プレビューが表示されます。

views/layout.hbsファイルを開き、次のものに置き換えます。

 <!DOCTYPE html> <html lang="en"> <head> <title>Foxit PDF Previewer</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous"> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <div class="container"> {{{body}}} </div> </body> </html>

これによりPureCSSスタイリングライブラリがロードされますが、使い慣れた他のフロントエンドスタイリングフレームワークを使用することもできます。

views/index.hbsファイルを開き、以下に置き換えます。

 <h1>PDF Previewer</h1> <p>Use the form below to preview any password-protected PDF file in this web application.</p> <!-- PDF Upload form --> <form class="pure-form"> <fieldset>   <input type="password" id="password" placeholder="Enter PDF Password" />   <input class="original-pdf-upload-button" type="file" name="file" id="file" accept=".pdf,.fdf,.xfdf" multiple="multiple" />   <label class="pure-button new-pdf-upload-button" for="file">Select a PDF file</label> </fieldset> </form> <!-- PDF Display Div --> <div id="pdf-viewer"></div> <!-- Foxit and custom JavaScript --> <script src="/lib/PDFViewCtrl.full.js"></script> <script> var PDFViewer = PDFViewCtrl.PDFViewer; var pdfViewer = new PDFViewer({    libPath: '/lib',    jr: {      licenseSN: "{{ licenseSN }}",      licenseKey: "{{ licenseKey }}",   }, });  pdfViewer.init('#pdf-viewer');  document.getElementById('file').onchange = function (e) {   if (!this.value) {      return;   }   var pdf,fdf;   for (var i = e.target.files.length; i--;) {     var file = e.target.files[i];     var filename = file.name;     if (/\.pdf$/i.test(filename)) {       pdf = file     } else if (/\.(x)?fdf$/i.test(filename)) {        fdf = file     }   }   var options = {password: '', fdf: {file: fdf}};   if (document.getElementById('password').value) {      options.password = document.getElementById('password').value;      document.getElementById('password').value = '';   }    pdfViewer.openPDFByFile(pdf, options);    this.value = ''; }; </script>

このファイルには 3 つの目的があります。まず、パスワードフィールドを備えた PDF アップロードフォームが含まれています。ファイルアップロードの入力要素には<label>があり、これは適切なスタイルのアップロードボタンとして機能します。次に、 <div id=”pdf-viewer”>タグは、カスタム JavaScript のpdfViewer.init関数で使用される Foxit PDF リーダーをラップします。このファイルの最後のセクションでは、Foxit のPDFViewCtrl.PDFViewerクラスをロードし、 <script>タグ内のコードを使用して初期化します。

アプリケーションの機能はほぼ完成していますが、テストする前に、 public/stylesheets/style.cssファイルを開いて次のファイルに置き換えます。

 body { background-color: #f7f7f7; color: #333333; } .container { background-color: #ffffff; margin: 0 auto; padding: 30px; } /* File upload button styling */ .original-pdf-upload-button { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .new-pdf-upload-button { top: -2px; position: relative; }

PDF アップロードボタンのスタイルを設定できるため、他の PureCSS ボタンと一貫した外観が得られ、アプリケーションに少しのパディングも追加できます。

アプリケーションをテストするには、まず作業内容を保存してから、ターミナルからnpm startを実行します。ノードがサーバーを起動し、Web アプリがlocalhost:3000で利用できるようになります。

パスワードで保護された PDF ファイルのアップロード中にユーザーが間違ったパスワードを入力したシナリオに対処するには、既存のコードを拡張してエラーメッセージを表示し、ユーザーが再試行できるようにすることができます。この機能を実装する方法は次のとおりです。

エラーの処理

Foxit のpdfViewer.openPDFByFileメソッドはPromiseを返します。それがいつ解決されるかを知りたい場合は、 thenメソッドまたはcatchメソッドにコールバックを追加します。

views/index.hbsファイル内で、 pdfViewer.openPDFByFile…行を次の行に置き換えます。

 ...    pdfViewer.openPDFByFile(pdf, options)      .catch(error => {        console.error(error);        document.getElementById('wrong-password').style.display = 'block';     }); ...

ファイルの先頭にid=”wrong-password”新しい段落要素を追加します。

 <p id="wrong-password" class="error"><strong>Whoops!</strong> It looks like the password you entered was incorrect. Please enter a password and try uploading your file again. </p> ...

最後に、 catchメソッドが呼び出された場合にのみエラーメッセージが表示されるように、スタイルを追加する必要があります。 public/stylesheets/style.cssファイル内に以下を追加します。

 ... #wrong-password { display: none; } .error { background-color: #f5c0c0; color: #792525; padding: 10px; }

間違ったパスワードを入力した場合 (またはパスワードフィールドを空白のままにした場合)、パスワードで保護された PDF がアップロードされている場合は、以下に示すようなエラーメッセージが表示されます。

このチュートリアルでは、ユーザーがブラウザでパスワードで保護された PDF をプレビューできるようにする安全な Node Web アプリケーションを構築する方法を学習しました。 Foxit PDF SDK を活用することで、開発時間と労力を大幅に削減できます。 Foxit PDF SDK は広範な機能を提供しますドキュメンテーションさまざまなアプリケーションの構築に役立つ幅広い例が含まれています。

Foxit が Web アプリケーションだけでなく、モバイルアプリやネイティブアプリなどの他のプラットフォーム。これは、さまざまな環境にわたって Foxit PDF SDK の機能を利用できることを意味し、アプリケーション全体で一貫した信頼性の高い PDF 処理機能を保証します。