Tạo file pdf javascript

in your HTML page and browsing through its pages using Javascript.

Xin lưu ý rằng PDF. JS chỉ là trình xem PDF chứ không phải trình chỉnh sửa PDF. Nó không phải là thư viện để tạo tệp PDF

PDF. JS được Firefox sử dụng nội bộ để hiển thị các tệp PDF. Trên thực tế PDF. JS tốt đến mức ngay cả Opera cũng quyết định sử dụng nó

Ví dụ — Hiển thị PDF trong div Container

Nhấp vào nút bên dưới để hiển thị tệp PDF này

Hiển thị PDF

Đang tải PDF

Trước Sau

Trang của

Đang tải trang

Tải xuống mã ví dụ

Tải xuống

PDF. API JS được sử dụng trong hướng dẫn này

Khi bạn đưa tệp PDF vào. JS, bạn sẽ có một pdfjsLib đối tượng chung. Đối tượng này cung cấp một số API mà bạn có thể gọi trong mã Javascript của mình.

• pdfjsLib. getDocument({ url. pdf_url })

  Phương thức không đồng bộ này tải tệp PDF. Giá trị trả về là một Promise giải quyết bằng đối tượng PDFDocumentProxy . Nói một cách đơn giản, PDFDocumentProxy là phần xử lý của tệp PDF hiện tại.

  pdf_url là url của tệp PDF trong máy chủ của bạn. Các tệp PDF tên miền chéo được cho phép nhưng các tiêu đề CORS cần được đặt trong máy chủ.

  Trong trường hợp bạn muốn hiển thị tệp PDF trong khi tải lên, một url cục bộ của tệp PDF có thể được tạo thông qua URL. hàm createObjectURL() .

  Bạn cũng có thể truyền dữ liệu nhị phân dưới dạng tham số. Nếu bạn có dữ liệu được mã hóa cơ số 64, bạn có thể chuyển đổi dữ liệu đó thành chuỗi nhị phân thông qua hàm atob .

  // normal url to a PDF or a local object url created while uploading PDF
  // pdf_doc holds the handle to the PDF document
  pdf_doc = await pdfjsLib.getDocument({ url: 'http://yourserver.com/sample.pdf' });
  
  // binary data
  pdf_doc = pdfjsLib.getDocument({ data: binary_data });
  

  Lưu ý rằng nếu sử dụng await để đợi Promise được giải quyết, thì nó cần được gói trong một async function.

• pdf_doc . số trang

  Đây là thuộc tính chỉ đọc lấy số trang trong tệp PDF

  var total_pages = pdf_doc.numPages;

• pdf_doc . getPage( page_no )

  Phương thức không đồng bộ này tải trang được chỉ định của PDF. Giá trị trả về là một Lời hứa giải quyết bằng một đối tượng PDFPageProxy . Nói một cách đơn giản, PDFPageProxy là phần xử lý của trang được chỉ định của PDF.

  Lưu ý rằng chức năng này chỉ tải trang chứ không hiển thị trang trên màn hình

  // page holds the handle of the given PDF page number
  page = await pdf_doc.getPage(page_no);
  

• trang . getViewport( tỷ lệ )

  Phương thức đồng bộ này trả về kích thước của trang hiện tại của PDF (tính bằng px) ở mức thu phóng được chỉ định

  // get viewport at scale = 1
  var viewport = page.getViewport(1);
  
  // height of the page
  var height = viewport.height;
  
  // width of the page
  var width = viewport.width;
  

• trang . kết xuất( renderContext )

  Phương pháp không đồng bộ này hiển thị trang hiện tại của PDF trên màn hình

  Rendering can be done in either a or

  // get viewport at scale=1
  var viewport = page.getViewport(1);
  
  // holds viewport properties where page will be rendered
  var render_context = {
      canvasContext: document.querySelector('#pdf-canvas').getContext('2d'),
      viewport: viewport
  };
  
  // wait for the page to render
  await page.render(render_context);
  

Viết mã, Bước 1. Bao gồm PDF. Tệp tập lệnh JS

• Chuyển đến PDF. Trang chủ JS và tải xuống các tệp. Sẽ có 2 tệp trong thư mục "build". Bao gồm chúng trong HTML của bạn. Trong hướng dẫn này, phiên bản 2. 2 của PDF. JS đã được sử dụng

  PDF. Các tệp JS khá lớn. Sẽ tốt hơn nếu bạn thu nhỏ chúng. Bạn có thể sử dụng công cụ khai thác UglifyJS trực tuyến

• Ngoài ra, bạn có thể bao gồm PDFJS từ CDN.

Bước 2. Chuẩn bị HTML

Show PDF 


    
Loading document ...
    

        

            

                Previous
                Next
            
            
Page 
 of 

        
        
        
Loading page ...
    

• #show-pdf-button sẽ bắt đầu tải tệp PDF.
• #pdf-loader là nơi chứa thông báo "Đang tải PDF" sẽ hiển thị trong khi PDF đang được tải.
• #pdf-prev & #pdf-next là các nút sẽ chuyển sang phần Trước và Tiếp theo .
• #pdf-current-page sẽ giữ số trang hiện tại của PDF.
• #pdf-total-pages sẽ giữ tổng số trang trong PDF.
• #pdf-canvas là phần tử canvas nơi PDF sẽ được hiển thị.
• #page-loader sẽ hiển thị thông báo "Đang tải trang" trong khi trang đang được hiển thị.

Bước 3. Xác định một số biến Javascript

Chúng tôi cần một vài biến toàn cục sẽ chứa các thuộc tính được sử dụng trong toàn bộ mã

________số 8

• _PDF_DOC sẽ giữ đối tượng PDFDocumentProxy được phân giải trên getDocument() Promise.
• _CURRENT_PAGE sẽ giữ số trang hiện tại. _TOTAL_PAGES sẽ giữ tổng số trang trong PDF.
• _PAGE_RENDERING_IN_PROGRESS là một lá cờ sẽ giữ cho dù hiện tại có được hiển thị hay không. Nếu quá trình hiển thị trang đang diễn ra, thì giao diện người dùng sẽ không bắt đầu hiển thị trang khác. Điều này là để ngăn nội dung trang không khớp. Hãy nhớ rằng hiển thị trang không đồng bộ, sẽ mất ít nhất vài mili giây để hiển thị một trang.
• _CANVAS sẽ giữ phần tử canvas.

Bước 4. Hiển thị PDF bằng Javascript

Hai chức năng tùy chỉnh được hiển thị bên dưới xử lý hầu hết mã

showPDF tải tệp PDF. Nó chấp nhận url của PDF làm tham số. Khi tải thành công, nó gọi hàm showPage sẽ hiển thị trang đầu tiên của PDF.

showPage tải và hiển thị một trang được chỉ định của PDF. Trong khi một trang đang được hiển thị, các nút Trước và Tiếp theo bị tắt. Một điểm rất quan trọng cần lưu ý là chúng ta phải thay đổi tỷ lệ của trang được hiển thị theo chiều rộng của phần tử canvas. Trong trường hợp hiện tại, chiều rộng của phần tử canvas nhỏ hơn chiều rộng thực của PDF, vì vậy khi PDF được hiển thị trong canvas, nó phải được thu nhỏ lại.

Trình xử lý sự kiện trên các nút Trước / Tiếp theo tăng/giảm đơn giản trang hiện tại được hiển thị và gọi hàm showPage .

var _PDF_DOC,
    _CURRENT_PAGE,
    _TOTAL_PAGES,
    _PAGE_RENDERING_IN_PROGRESS = 0,
    _CANVAS = document.querySelector('#pdf-canvas');

// initialize and load the PDF
async function showPDF(pdf_url) {
    document.querySelector("#pdf-loader").style.display = 'block';

    // get handle of pdf document
    try {
        _PDF_DOC = await pdfjsLib.getDocument({ url: pdf_url });
    }
    catch(error) {
        alert(error.message);
    }

    // total pages in pdf
    _TOTAL_PAGES = _PDF_DOC.numPages;
    
    // Hide the pdf loader and show pdf container
    document.querySelector("#pdf-loader").style.display = 'none';
    document.querySelector("#pdf-contents").style.display = 'block';
    document.querySelector("#pdf-total-pages").innerHTML = _TOTAL_PAGES;

    // show the first page
    showPage(1);
}

// load and render specific page of the PDF
async function showPage(page_no) {
    _PAGE_RENDERING_IN_PROGRESS = 1;
    _CURRENT_PAGE = page_no;

    // disable Previous & Next buttons while page is being loaded
    document.querySelector("#pdf-next").disabled = true;
    document.querySelector("#pdf-prev").disabled = true;

    // while page is being rendered hide the canvas and show a loading message
    document.querySelector("#pdf-canvas").style.display = 'none';
    document.querySelector("#page-loader").style.display = 'block';

    // update current page
    document.querySelector("#pdf-current-page").innerHTML = page_no;
    
    // get handle of page
    try {
        var page = await _PDF_DOC.getPage(page_no);
    }
    catch(error) {
        alert(error.message);
    }

    // original width of the pdf page at scale 1
    var pdf_original_width = page.getViewport(1).width;
    
    // as the canvas is of a fixed width we need to adjust the scale of the viewport where page is rendered
    var scale_required = _CANVAS.width / pdf_original_width;

    // get viewport to render the page at required scale
    var viewport = page.getViewport(scale_required);

    // set canvas height same as viewport height
    _CANVAS.height = viewport.height;

    // setting page loader height for smooth experience
    document.querySelector("#page-loader").style.height =  _CANVAS.height + 'px';
    document.querySelector("#page-loader").style.lineHeight = _CANVAS.height + 'px';

    var render_context = {
        canvasContext: _CANVAS.getContext('2d'),
        viewport: viewport
    };
        
    // render the page contents in the canvas
    try {
        await page.render(render_context);
    }
    catch(error) {
        alert(error.message);
    }

    _PAGE_RENDERING_IN_PROGRESS = 0;

    // re-enable Previous & Next buttons
    document.querySelector("#pdf-next").disabled = false;
    document.querySelector("#pdf-prev").disabled = false;

    // show the canvas and hide the page loader
    document.querySelector("#pdf-canvas").style.display = 'block';
    document.querySelector("#page-loader").style.display = 'none';
}

// click on "Show PDF" buuton
document.querySelector("#show-pdf-button").addEventListener('click', function() {
    this.style.display = 'none';
    showPDF('https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf');
});

// click on the "Previous" page button
document.querySelector("#pdf-prev").addEventListener('click', function() {
    if(_CURRENT_PAGE != 1)
        showPage(--_CURRENT_PAGE);
});

// click on the "Next" page button
document.querySelector("#pdf-next").addEventListener('click', function() {
    if(_CURRENT_PAGE != _TOTAL_PAGES)
        showPage(++_CURRENT_PAGE);
});

tính tương thích của trình duyệt web

Đoạn mã trên sẽ hoạt động tốt trong tất cả các trình duyệt chính, bao gồm cả IE 10+

Kích hoạt lựa chọn văn bản?

Để kích hoạt lựa chọn văn bản, cần phải làm theo một số bước bổ sung. Xem Cách bật lựa chọn văn bản trong PDF. JS để biết thêm

Plugin Javascript Trình xem PDF

Một plugin Trình xem PDF đáp ứng cao cấp cũng có sẵn. Nó có một số tính năng nâng cao như nhúng nhiều tệp PDF vào một trang, xem tệp PDF khi nhấp vào liên kết, chế độ toàn màn hình & phương thức, tìm hiểu xem người dùng đã xem hết tệp PDF hay chưa, v.v.