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  , 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ó  .   Thư viện JavaScript JavaScript   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  khung web để phát triển phụ trợ,  cho mục đích tạo kiểu, và  để tích hợp chức năng PDF.   Thể hiện   CSS thuần túy   SDK PDF của Foxit  điều kiện tiên quyết  phiên bản 8+ và  phiên bản 5+   NodeJS   NPM  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   và tệp mẫu   . .gitignore Tay lái  Thêm gói   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': dotenv   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   . 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à   và thêm hai giá trị: examples/license-key.js .env   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   từ Foxit PDF SDK mà bạn đã tải xuống và dán nó vào thư mục   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. lib/ public/  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   của bạn: .gitignore   ... 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   để chuyển mã cấp phép và số sê-ri cho chế độ xem: 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;  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   , bạn cần thêm thư viện   để tải các biến từ tệp   của bạn. Mở   và thêm phần sau vào đầu tệp: process.env dotenv .env app.js   require('dotenv').config(); ...    và   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. LICENSE_SN LICENSE_KEY  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   và thay thế bằng tệp sau: 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>  Thao tác này sẽ tải thư viện tạo kiểu   , 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. PureCSS  Mở tệp   và thay thế bằng tệp bên dưới: 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>  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ó   , 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ẻ   bao bọc trình đọc Foxit PDF được sử dụng trong hàm   trong JavaScript tùy chỉnh. Phần cuối cùng của tệp này tải lớp   của Foxit và khởi tạo nó bằng cách sử dụng mã bên trong các thẻ   . <label> <div id=”pdf-viewer”> pdfViewer.init PDFViewCtrl.PDFViewer <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   và thay thế bằng tệp sau: 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; }  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   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   .  npm start 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   của Foxit trả về một   , 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   hoặc   . pdfViewer.openPDFByFile lời hứa then catch  Trong tệp   của bạn, hãy thay thế dòng   bằng dòng bên dưới: views/index.hbs pdfViewer.openPDFByFile…   ...    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   được gọi. Trong tệp   của bạn, hãy thêm vào bên dưới: catch public/stylesheets/style.css   ... #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  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.   tài liệu  Đ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  . Đ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.   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  Cũng được xuất bản   . ở đây

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

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

dài quá đọc không nổi

Boost your HackerNoon story @ $159.99! 🚀

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

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

184 Stories To Learn About Psychology

72 Stories To Learn About The Essays Of Adam Smith

61 Stories To Learn About Polotical Philosophy

85 Stories To Learn About Productivity Hacks

184 Stories To Learn About Psychology

72 Stories To Learn About The Essays Of Adam Smith

61 Stories To Learn About Polotical Philosophy

85 Stories To Learn About Productivity Hacks

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps