Hướng dẫn hiển thị các tệp PDF được bảo vệ bằng mật khẩu trong ứng dụng web

Các tệp PDF được sử dụng rộng rãi trong cài đặt kinh doanh, làm cho tính bảo mật của chúng trở thành một khía cạnh quan trọng của nhiều quy trình công việc. Khi phát triển một ứng dụng web liên quan đến việc mở các tệp PDF, có khả năng bạn sẽ gặp phải các tài liệu được bảo vệ bằng mật khẩu. Tuy nhiên, việc triển khai chức năng này từ đầu có thể tốn thời gian và phát sinh chi phí bảo trì đáng kể, điều này có thể không phù hợp với lộ trình hiện tại của nhóm bạn.

Với Foxit Thư viện JavaScript JavaScript , trình bày các tệp PDF trong ứng dụng dựa trên trình duyệt sẽ trở thành một nhiệm vụ liền mạch. Trong hướng dẫn từng bước này, bạn sẽ tìm hiểu cách định cấu hình ứng dụng Node khai thác sức mạnh của Foxit PDF SDK dành cho Web. Sự tích hợp này cho phép bạn dễ dàng mở các tệp PDF được bảo vệ bằng mật khẩu trực tiếp trong trình duyệt, cấp cho người dùng được ủy quyền khả năng xem trước các tài liệu. Đối với những người muốn bỏ qua hướng dẫn và truy cập phiên bản đầy đủ chức năng của ứng dụng, bạn có thể dễ dàng tìm thấy nó có sẵn trên GitHub .

Xây dựng một ứng dụng web để hiển thị các tệp PDF được bảo vệ bằng mật khẩu

HTML cung cấp các tính năng tải lên tệp tích hợp thuận tiện cho phép người dùng tương tác với các tệp từ máy cục bộ của họ trong trình duyệt. Tuy nhiên, việc hiển thị các tệp PDF bằng JavaScript có thể phức tạp hơn một chút, đặc biệt là khi xử lý bảo vệ bằng mật khẩu. Trong hướng dẫn toàn diện này, bạn sẽ xây dựng một ứng dụng web bao gồm một biểu mẫu tải lên PDF và một trường mật khẩu tùy chọn. Khi tệp PDF được bảo vệ bằng mật khẩu được tải lên và nhập đúng mật khẩu, người dùng sẽ có thể xem trước tệp một cách liền mạch. Mặt khác, nếu mật khẩu được cung cấp không chính xác, thông báo lỗi sẽ hiển thị, nhắc người dùng thử lại.

Để phát triển ứng dụng này, bạn sẽ sử dụng Thể hiện khung web để phát triển phụ trợ, CSS thuần túy cho mục đích tạo kiểu, và SDK PDF của Foxit để tích hợp chức năng PDF.

điều kiện tiên quyết

• NodeJS phiên bản 8+ và NPM phiên bản 5+
• Foxit PDF SDK dành cho Web ( tải về dùng thử miễn phí có sẵn ở đây )
• Mã bản quyền Foxit và số sê-ri của bạn

Tạo ứng dụng Express mới

Trình tạo Express giúp dễ dàng thiết lập một ứng dụng mới. Chỉ cần chạy lệnh sau trong thiết bị đầu cuối của bạn:

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

Lệnh này sẽ tạo một ứng dụng mới với tệp .gitignore và tệp mẫu Tay lái .

Thêm gói dotenv npm ( sử dụng để truy cập khóa cấp phép và số sê-ri Foxit của bạn) và cài đặt các phụ thuộc Express':

 npm i dotenv && npm i

Sau khi bạn đã tải xuống Foxit PDF SDK dành cho Web, bạn sẽ tìm thấy mã cấp phép và số sê-ri của mình trong tệp examples/license-key.js . Tiếp theo, tạo một tệp mới tại thư mục gốc của ứng dụng web của bạn có tên là .env và thêm hai giá trị:

 LICENSE_SN="" LICENSE_KEY=""

Sao chép thư viện Foxit vào ứng dụng web của bạn để bạn có thể truy cập nó từ giao diện người dùng. Tiếp theo, sao chép thư mục lib/ từ Foxit PDF SDK mà bạn đã tải xuống và dán nó vào thư mục public/ của ứng dụng web của bạn. Bây giờ thư viện Foxit JavaScript PDF sẽ có sẵn trong ứng dụng web của bạn.

Cuối cùng, bạn không muốn thông tin nhạy cảm hoặc các gói độc quyền kết thúc trong kiểm soát phiên bản, vì vậy hãy thêm phần bên dưới vào tệp .gitignore của bạn:

 ... public/lib/ .env

Khi ứng dụng web của bạn có tất cả các phụ thuộc cần thiết, bạn có thể tiến hành tạo tuyến đường chịu trách nhiệm hiển thị bản xem trước PDF bằng Foxit.

Thiết lập tuyến đường

Mỗi trang trong ứng dụng Express đều có một lộ trình, bao gồm cả trang tải lên PDF mà bạn sẽ tạo trong bản trình diễn này. Cập nhật tệp routes/index.js để chuyển mã cấp phép và số sê-ri cho chế độ xem:

 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;

Cho phép bạn dễ dàng cập nhật thông tin đăng nhập của mình trên máy chủ mà không cần thông tin đăng nhập mã cứng yêu cầu thay đổi mã. Bằng cách thêm một lớp xác thực vào ứng dụng Express của mình, bạn có thể kiểm soát quyền truy cập vào thông tin đăng nhập Foxit và hạn chế khả năng hiển thị đối với người dùng được ủy quyền.

Trước khi có các biến process.env , bạn cần thêm thư viện dotenv để tải các biến từ tệp .env của bạn. Mở app.js và thêm phần sau vào đầu tệp:

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

LICENSE_SN và LICENSE_KEY của bạn đang được lưu trữ an toàn và chỉ được chuyển đến giao diện người dùng khi được yêu cầu. Tiếp theo, bạn sẽ xử lý phần hiển thị của ứng dụng web.

Tải lên và hiển thị các tệp PDF

Foxit's PDF SDK sẽ xử lý phần lớn công việc liên quan đến kiểm tra mật khẩu và hiển thị tệp PDF cho người dùng, nhưng bạn cần quản lý giao diện người dùng cho cả tệp và mật khẩu đầu vào. Trước đó, bạn cần cập nhật bố cục để nó bao gồm các kiểu cơ sở và sau đó bạn có thể chia tỷ lệ 'khung nhìn'. Điều này sẽ dẫn đến bản xem trước PDF có kích thước phù hợp với màn hình của người dùng.

Mở tệp views/layout.hbs và thay thế bằng tệp sau:

 <!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>

Thao tác này sẽ tải thư viện tạo kiểu PureCSS , nhưng bạn có thể sử dụng bất kỳ khung tạo kiểu giao diện người dùng nào khác mà bạn quen thuộc.

Mở tệp views/index.hbs và thay thế bằng tệp bên dưới:

 <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>

Tập tin này phục vụ ba mục đích. Đầu tiên, nó bao gồm một biểu mẫu tải lên PDF có trường mật khẩu. Phần tử đầu vào tải tệp lên có <label> , phần tử này hoạt động như một nút tải lên có kiểu dáng độc đáo. Tiếp theo, thẻ <div id=”pdf-viewer”> bao bọc trình đọc Foxit PDF được sử dụng trong hàm pdfViewer.init trong JavaScript tùy chỉnh. Phần cuối cùng của tệp này tải lớp PDFViewCtrl.PDFViewer của Foxit và khởi tạo nó bằng cách sử dụng mã bên trong các thẻ <script> .

Chức năng của ứng dụng đã gần hoàn thiện, nhưng trước khi bạn kiểm tra, hãy mở tệp public/stylesheets/style.css và thay thế bằng tệp sau:

 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; }

Cho phép bạn tạo kiểu cho nút tải lên PDF để nó có giao diện nhất quán với các nút PureCSS khác, đồng thời thêm một chút đệm vào ứng dụng của bạn.

Để kiểm tra ứng dụng của bạn, trước tiên hãy lưu công việc của bạn và sau đó chạy npm start từ thiết bị đầu cuối của bạn. Nút sẽ khởi động một máy chủ và ứng dụng web của bạn sẽ khả dụng tại localhost:3000 .

Để xử lý trường hợp người dùng nhập sai mật khẩu trong khi tải lên tệp PDF được bảo vệ bằng mật khẩu, bạn có thể cải tiến mã hiện có để hiển thị thông báo lỗi và cho phép người dùng thử lại. Đây là cách bạn có thể triển khai chức năng này:

Xử lý lỗi

Phương thức pdfViewer.openPDFByFile của Foxit trả về một lời hứa , nếu bạn muốn biết khi nào nó được giải quyết, hãy thêm lệnh gọi lại vào phương thức then hoặc catch .

Trong tệp views/index.hbs của bạn, hãy thay thế dòng pdfViewer.openPDFByFile… bằng dòng bên dưới:

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

Thêm một thành phần đoạn văn mới ở đầu tệp có tên 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> ...

Cuối cùng, bạn sẽ cần thêm một số kiểu dáng để thông báo lỗi chỉ được hiển thị sau đó phương thức catch được gọi. Trong tệp public/stylesheets/style.css của bạn, hãy thêm vào bên dưới:

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

Nếu bạn nhập sai mật khẩu (hoặc để trống trường mật khẩu) và tệp PDF được bảo vệ bằng mật khẩu đã được tải lên, bạn sẽ thấy thông báo lỗi, như bạn có thể thấy bên dưới:

Trong hướng dẫn này, bạn đã học cách xây dựng một ứng dụng web Node an toàn cho phép người dùng xem trước các tệp PDF được bảo vệ bằng mật khẩu trong trình duyệt của họ. Bằng cách tận dụng Foxit PDF SDK, bạn có thể giảm đáng kể thời gian và công sức phát triển. Foxit PDF SDK cung cấp nhiều tài liệu và một loạt các ví dụ để hỗ trợ bạn xây dựng các ứng dụng khác nhau.

Điều đáng chú ý là Foxit cung cấp SDK PDF không chỉ cho các ứng dụng web mà còn cho các nền tảng khác như ứng dụng dành cho thiết bị di động và ứng dụng gốc . Điều này có nghĩa là bạn có thể tận dụng sức mạnh của Foxit PDF SDK trên các môi trường khác nhau, đảm bảo khả năng xử lý PDF nhất quán và đáng tin cậy trong các ứng dụng của bạn.