Add thêm PDF.JS vào web asp.net MVC hướng dẫn chi tiết dễ làm theo

PDF.JS là gì

PDF.js là một thư viện JavaScript dùng để hiển thị các tệp định dạng tài liệu có đuôi .PDF trên các trình duyệt và đặc biệt là trình duyệt di động bằng cách sử dụng HTML5 Canvas theo tiêu chuẩn web.

Vì mặc định hiện tại các trình duyệt di động và một số trình duyệt khi bạn nhúng iframe hay nhúng PDF vào web sẽ không xem được trên trình duyệt di động và một số trình duyệt cũ.

PDF.JS ra đời giúp chúng ta xem và quản lý file PDF dưới mọi hình thức và xem được file PDF ở mọi trình duyệt.

Tổng quan về PDF.JS

Bài này ITSEOVN sẽ hướng dẫn cơ bản cách thêm thư viện PDF.JS vào web asp.net MVC vì mặc định nếu thêm không đúng sẽ không xem được trên trình duyệt di động.

Demo:

• https://trungtamthuoc.com/atest/viewpdf?pdf=/pdf/hdsd-xarelto-10mg.pdf
• https://mozilla.github.io/pdf.js/web/viewer.html
• https://mozilla.github.io/pdf.js/legacy/web/viewer.html

Trang chủ của thư viện

• https://mozilla.github.io/pdf.js/

Tải thư viện PDF.js (chọn 1 trong 2 ở dưới):

• Tải trực tiếp bản đang chạy tốt ổn định mà ITSEOVN đang sử dụng cho web asp.net: tải ngay.
• Tải từ nhà cung cấp: Xem tải.

Cách thêm PDF.js vào web asp.net

Bước 1: Tải thư viện PDF.js ở trên xuống và cho vào thư mục gốc của web.

Bước 2: Tạo 1 Controller tên bất kỳ hoặc có sẵn, sau đó chèn Action code sau vào.

Mã:

public ActionResult viewpdf()
{
    var pdf = "/pdf/itseovn.pdf"; //đường đẫn file pdf
    ViewBag.Vbpdf = pdf;
    return View();
}

Bước 3: tại View VeiwPdf.cshtml ta chèn code sau vào:

HTML:

<div id="pdf_container"></div>
<script type="text/javascript" src="/pdf/pdf.min.js"></script>
<link href="/pdf/pdf_viewer.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    #pdf_container {
        background: #ccc;
        text-align: center;
        display: none;
        padding: 5px;
        height: 820px;
        overflow: auto;
    }

        #pdf_container canvas {
            border: 1px solid black;
            direction: ltr;
            width: 100% !important;
            max-width: 950px !important;
        }

    @@media (max-width: 767px) {
        #pdf_container canvas {
            border: 1px solid black;
            direction: ltr;
            width: 100% !important;
            height: 400px;
        }
    }
</style>
<script type="text/javascript">
    var pdfjsLib = window['pdfjs-dist/build/pdf'];
    pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf/pdf.worker.min.js';
    var pdfDoc = null;
    var scale = 1; //Set Scale for zooming PDF.
    var resolution = 1; //Set Resolution to Adjust PDF clarity.
    var url = '@ViewBag.Vbpdf';
    LoadPdfFromUrl(url);
    function LoadPdfFromUrl(url) {
        //Read PDF from URL.
        pdfjsLib.getDocument(url).promise.then(function (pdfDoc_) {
            pdfDoc = pdfDoc_;
            //Reference the Container DIV.
            var pdf_container = document.getElementById("pdf_container");
            pdf_container.style.display = "block";
            //Loop and render all pages.
            for (var i = 1; i <= pdfDoc.numPages; i++) {
                RenderPage(pdf_container, i);
            }
        });
    };
    function RenderPage(pdf_container, num) {
        pdfDoc.getPage(num).then(function (page) {
            //Create Canvas element and append to the Container DIV.
            var canvas = document.createElement('canvas');
            canvas.id = 'pdf-' + num;
            ctx = canvas.getContext('2d');
            pdf_container.appendChild(canvas);
            //Create and add empty DIV to add SPACE between pages.
            var spacer = document.createElement("div");
            spacer.style.height = "20px";
            pdf_container.appendChild(spacer);
            //Set the Canvas dimensions using ViewPort and Scale.
            var viewport = page.getViewport({ scale: scale });
            canvas.height = resolution * viewport.height;
            canvas.width = resolution * viewport.width;
            //Render the PDF page.
            var renderContext = {
                canvasContext: ctx,
                viewport: viewport,
                transform: [resolution, 0, 0, resolution, 0, 0]
            };
            page.render(renderContext);
        });
    };
</script>

• Chạy web để xem kết quả.

Các câu hỏi về PDF xử lý được ở bài này:

• PDF Viewer support in mobile browser (iPhone & Android)
• PDF không hoạt động khi xem trên trình duyệt di động.
• Các xem file PDF trên trình duyệt di động.