Jan 01, 1970
9,162 測定値
Web アプリケーションでパスワードで保護された PDF を表示するためのガイド
長すぎる; 読むには
Foxit PDF SDK for Web の機能を活用する Node アプリケーションを開発します。この統合により、パスワードで保護された PDF をブラウザで直接簡単に開くことができます。正しいパスワードを入力すると、ユーザーはファイルをシームレスにプレビューできるようになります。間違ったパスワードを入力すると、エラー メッセージが表示され、ユーザーに再試行するよう求められます。PDF はビジネス環境で広く利用されており、そのセキュリティは多くのワークフローにおいて重要な側面となっています。 PDF を開く Web アプリケーションを開発する場合、パスワードで保護されたドキュメントに遭遇する可能性があります。ただし、この機能を最初から実装するには時間がかかり、多額のメンテナンス費用が発生する可能性があり、チームの現在のロードマップと一致しない可能性があります。
フォックスイットと一緒に
パスワードで保護された PDF を表示する Web アプリケーションの構築
HTML には、ユーザーがブラウザ内でローカル マシンのファイルを操作できるようにする便利な組み込みのファイル アップロード機能が用意されています。ただし、JavaScript を使用して PDF を表示する場合、特にパスワード保護を扱う場合は少し複雑になる可能性があります。この包括的なチュートリアルでは、PDF アップロード フォームとオプションのパスワード フィールドで構成される Web アプリケーションを構築します。パスワードで保護された 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 アプリケーションだけでなく、
ここでも公開されています。
L O A D I N G
. . . comments & more!
. . . comments & more!
About Author
ラベル
この記事は...
関連ストーリー
18 種類の開発者ツールで生産性を向上しましょう 🚀🔥
#web-development
クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス #cloud-migration
Jan 01, 1970
