PDF はビジネス環境で広く利用されており、そのセキュリティは多くのワークフローにおいて重要な側面となっています。 PDF を開く Web アプリケーションを開発する場合、パスワードで保護されたドキュメントに遭遇する可能性があります。ただし、この機能を最初から実装するには時間がかかり、多額のメンテナンス費用が発生する可能性があり、チームの現在のロードマップと一致しない可能性があります。 フォックスイットと一緒に を使用すると、ブラウザベースのアプリケーションで PDF を表示することがシームレスなタスクになります。このステップバイステップのチュートリアルでは、Foxit PDF SDK for Web の機能を活用する Node アプリケーションを設定する方法を学びます。この統合により、パスワードで保護された PDF をブラウザで直接簡単に開くことができ、承認されたユーザーがドキュメントをプレビューできるようになります。チュートリアルをスキップして、完全に機能するアプリケーションのバージョンにアクセスしたい場合は、すぐに見つけることができます。 。 JavaScript PDF ライブラリ   GitHub で入手可能 パスワードで保護された PDF を表示する Web アプリケーションの構築 HTML には、ユーザーがブラウザ内でローカル マシンのファイルを操作できるようにする便利な組み込みのファイル アップロード機能が用意されています。ただし、JavaScript を使用して PDF を表示する場合、特にパスワード保護を扱う場合は少し複雑になる可能性があります。この包括的なチュートリアルでは、PDF アップロード フォームとオプションのパスワード フィールドで構成される Web アプリケーションを構築します。パスワードで保護された PDF がアップロードされ、正しいパスワードが入力されると、ユーザーはファイルをシームレスにプレビューできるようになります。一方、間違ったパスワードを入力すると、エラー メッセージが表示され、ユーザーに再試行するよう求められます。 このアプリケーションを開発するには、 バックエンド開発用のWebフレームワーク、 スタイリング目的のため、および  PDF 機能を統合するため。 特急 純粋なCSS Foxit の PDF SDK 前提条件 バージョン 8 以降および バージョン5+ NodeJS 故宮  Web 用 Foxit PDF SDK ( ) 無料体験版のダウンロードはこちらから可能です  Foxit ライセンス キーとシリアル番号 新しい Express アプリの作成 Express ジェネレーターを使用すると、新しいアプリケーションを簡単にセットアップできます。ターミナルで次のコマンドを実行するだけです。   npx express-generator --git --view=hbs このコマンドは、  ファイルと テンプレート ファイルを含む新しいアプリケーションを作成します。 .gitignore Handlebars    npm パッケージ (Foxit ライセンス キーとシリアル番号にアクセスするために使用) を追加し、Express の依存関係をインストールします。 dotenv   npm i dotenv && npm i  Foxit PDF SDK for Web をダウンロードすると、  ファイルにライセンス キーとシリアル番号が表示されます。次に、Web アプリケーションのルート ディレクトリに という新しいファイルを作成し、次の 2 つの値を追加します。 examples/license-key.js .env   LICENSE_SN="" LICENSE_KEY=""  Foxit ライブラリを Web アプリケーションにコピーして、フロントエンドからアクセスできるようにします。次に、ダウンロードした Foxit PDF SDK から ディレクトリをコピーし、Web アプリケーションの ディレクトリに貼り付けます。これで、Foxit JavaScript PDF ライブラリが Web アプリケーション内で利用できるようになります。 lib/ public/ 最後に、機密情報や独自のパッケージがバージョン管理に置かれることを望まないため、以下を ファイルに追加します。 .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(); ...   と は安全に保管され、必要な場合にのみフロントエンドに渡されます。次に、Web アプリケーションの表示部分に取り組みます。 LICENSE_SN LICENSE_KEY  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/purecss@2.0.3/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>  <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>  <div id="pdf-viewer"></div>  <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 アップロード フォームが含まれています。ファイル アップロードの入力要素には があり、これは適切なスタイルのアップロード ボタンとして機能します。次に、  タグは、カスタム JavaScript の 関数で使用される Foxit PDF リーダーをラップします。このファイルの最後のセクションでは、Foxit の クラスをロードし、  タグ内のコードを使用して初期化します。 <label> <div id=”pdf-viewer”> pdfViewer.init 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 ボタンと一貫した外観が得られ、アプリケーションに少しのパディングも追加できます。 アプリケーションをテストするには、まず作業内容を保存してから、ターミナルから を実行します。ノードがサーバーを起動し、Web アプリが で利用できるようになります。  npm start 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 処理機能を保証します。 モバイルアプリやネイティブアプリなどの他のプラットフォーム でも公開されています。 ここ

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Free Trial

Now Hiring

このオーディオは、ストーリーの元の言語で制作されています。

長すぎる; 読むには

Boost your HackerNoon story @ $159.99! 🚀

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

About Author

コメント

ラベル

この記事は

Related Stories

Telegram: クリプト島と本土を結ぶ橋

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

Telegram: クリプト島と本土を結ぶ橋

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps