Cách preview file PDF trên trình duyệt nhưng ngăn chặn người dùng tải xuống

Ta có thể dễ dàng gắn một file PDF vào trang web, nhưng cách này có thể khiến người dùng có nhiều hơn các thao tác mà bạn muốn giới hạn. Có thể bạn chỉ muốn hiển thị file PDF cho người dùng có thể đọc nhưng bạn lại không muốn người dùng tải xuống file đó do có thể ảnh hưởng đến doanh thu hoặc lý do pháp lý. Đôi khi bạn muốn hiển thị tài liệu cho các thành viên của trang web của bạn, nhưng bạn không muốn họ chia sẻ nó với những người không phải là thành viên.

Bất kể lý do của bạn là gì, bài viết này sẽ chỉ cho bạn cách ngăn chặn việc tải xuống PDF trong ứng dụng web của bạn.

Mọi cách người dùng có thể một số cách sau để tải xuống PDFs

1. Nhấp vào nút tải xuống trên trình xem PDF của trình duyệt của bạn.
2. Nhấp chuột phải vào PDF và chọn "Save As"
3. In trang web và chọn "Save As PDF."

Bây giờ, chúng ta sẽ tìm hiểu các giải pháp cho tất cả các cách này!

Hạn chế

Tôi muốn minh bạch về các hạn chế của hướng dẫn này. Vì thông tin trên trang web của bạn nằm trên web công cộng, luôn có cách nào đó để người dùng có thể lấy hoặc tái tạo PDF thông qua dữ liệu trên trang web của bạn. Hướng dẫn này chỉ ngăn người dùng "Normal" khỏi việc tải xuống PDF của bạn - không phải người dùng "hacker" hoặc "Dev". Hướng dẫn này cũng không ngăn được hành vi chụp màn hình vì điều đó nằm dưới sự kiểm soát của hệ điều hành và không thể được ảnh hưởng bởi code chạy trong trình duyệt.

Bây giờ chúng ta đã hiểu về các vấn đề kỹ thuật ngăn chặn nhé!

1. Loại bỏ nút download

Một cách đơn giản để ngăn chặn người dùng tải xuống PDF là loại bỏ nút download hoặc các phần tử gợi tải xuống khác trên trang web. Bằng cách này, người dùng sẽ không thể trực tiếp tải xuống tài liệu từ trang web của bạn. Tuy nhiên, cách này chỉ ngăn chặn những người dùng thông thường và không phải là một biện pháp bảo mật chặt chẽ.

Với cách này, đơn giản là bạn truyền thêm #toolbar=0 vào cuối đường dẫn link file PDF. Ví dụ:

<embed src="Link-PDF-File.pdf#toolbar=0"/>

Cách này sẽ khiến toolbar preview PDF mất đi thanh toolbar trên cùng và người dùng không thể download bằng nút tải xuống ở đó. Tuy nhiên cách này có 1 hạn chế là khi người dùng click chuột phải thì vẫn có thể tải xuống file PDF.

2. Sử dụng các thư viện JS

Bạn có thể sử dụng các thư viện JavaScript để tải nội dung PDF lên trình duyệt thay vì tải xuống máy tính của người dùng. Các thư viện như PDF.js cung cấp khả năng hiển thị nội dung PDF trong trình duyệt mà không cần tải xuống. Điều này giúp bạn kiểm soát việc truy cập vào tài liệu PDF mà không cần phải lo lắng về việc người dùng tải xuống và chia sẻ tài liệu một cách không kiểm soát được.

Thư viện JS tham khảo: https://github.com/latuminggi/pdf.js_readonly - Thư viện này là bổ sung dựa trên PDF.js

Giao diện preview PDF được hiển thị như sau: Demo

3. Sử dụng google drive

Một phương pháp khác là sử dụng dịch vụ lưu trữ như Google Drive để hiển thị tài liệu PDF trên trang web của bạn. Bằng cách nhúng tài liệu PDF từ Google Drive vào trang web, bạn có thể kiểm soát quyền truy cập và chia sẻ của tài liệu. Bạn có thể cấu hình tài liệu để chỉ cho các thành viên của trang web của bạn có quyền xem, trong khi người dùng bên ngoài không thể truy cập hoặc tải xuống tài liệu.

Với cách này, bạn cần truy cập upload file PDF lên google drive. Nhấn dấu ba chấm => chia sẻ => mở popup chia sẻ. Tại đây, bạn cần nhấn cài đặt (bánh răng ở góc phải) => bỏ tick "Người xem và người nhận xét có thể thấy cách tải xuống, in và sao chép" và tại Quyền truy cập chung chọn bất kỳ ai có đường liên kết và cài đặt chỉ "Người xem"

Kết luận

Hãy nhớ rằng không có biện pháp nào là hoàn toàn bảo mật và người dùng vẫn có thể thực hiện các hành động như chụp màn hình để sao chép nội dung.

Nếu bạn thấy điều này hữu ích, hãy cho tôi 1 lượt vote nhé.

Đừng ngần ngại đặt bất kỳ câu hỏi nào trong phần bình luận. Tôi thích giúp đỡ các Dev đồng nghiệp của mình và sẽ cập nhật bài viết với bất kỳ thông tin hữu ích nào.

Chúc may mắn và code không gặp bug )