Share Xem tài liệu PDF trực tiếp trên trình duyệt với thư viện PDF.js

[filiallion]

Language

Tiếng Việt

Nếu các bạn sử dụng trình duyệt web Firefox thì có lẽ các bạn cũng đã ít nhất một lần đọc tài liệu PDF trực tiếp trên Firefox rồi. Vậy làm cách nào để tạo ra trình đọc tài liệu trực tiếp này trên Firefox? Rất đơn giản, Mozilla cung cấp cho các bạn lập trình viên một bộ thư viện JavaScript dùng để xây dựng trình đọc tài liệu PDF một cách dễ dàng, bộ thư viện mà tôi nhắc tới đó chính là PDF.js. Cũng cần phải lưu ý với các bạn, thư viện PDF.js là bộ thư viện do chính Mozilla phát triển nên chắc chắn đảm bảo tính ổn định hơn so với các thư viện khác, đặc biệt là sử dụng trên trình duyệt Firefox.

Việc sử dụng thư viện PDF.js cũng không quá khó khăn, các bạn chỉ việc tải thư viện PDF.js tại địa chỉ https://mozilla.github.io/pdf.js/getting_started/#download và tích hợp vào website với dòng mã lệnh HTML như sau:

<script src="path/to/pdf.js"></script>

Và sau đây là ví dụ đơn giản để các bạn hiển thị tài liệu PDF trên trình duyệt:

//Đọc tài liệu PDF
var loadingTask = pdfjsLib.getDocument('path/to/filename.pdf');

//Hiển thị trên trình duyệt
loadingTask.promise.then(function(pdf) {
    pdf.getPage(1).then(function(page) {
        var viewport = page.getViewport({
            scale: 1.5
        });
       
        var canvas    = document.getElementById('pdf-canvas');
        var context   = canvas.getContext('2d');
       
        canvas.height   = viewport.height;
        canvas.width    = viewport.width;
       
        page.render({
            canvasContext: context,
            viewport: viewport
        });
    });
});

Trên đây chỉ là một ví dụ rất đơn giản để các bạn hiển thị tài liệu PDF trên trình duyệt, để có thể thiết kế trình đọc tài liệu PDF tương tự với nhiều chức năng như trên trình duyệt Firefox thì các bạn có thể tìm hiểu thêm tại địa chỉ https://mozilla.github.io/pdf.js.