Cara menampilkan pdf di html menggunakan javascript

PDF.js adalah perpustakaan JavaScript yang dikelola oleh Mozilla dan dirancang untuk menangani PDF dalam JavaScript

Kami akan membuat penampil PDF yang memiliki fungsi berikut

• Lihat PDF
• Pergi ke halaman berikutnya
• Pergi ke halaman sebelumnya
• Pergi ke nomor halaman tertentu

Langkah

Buat file

let pdf ; // to store pdf data 
let canvas; // to render pdf
let isPageRendering; // to check if the pdf is currently rendering
let  pageRenderingQueue = null; // to store next page number to render
let canvasContext; // context of canvas
let totalPages; // total  pages of pdf
let currentPageNum = 1;

0 yang menyertakan

• kanvas → Di mana pdf akan dirender
• tombol sebelumnya → Untuk pergi ke halaman sebelumnya
• tombol berikutnya → Untuk pergi ke halaman berikutnya
• kotak masukan → Untuk memasukkan nomor halaman
• Tombol buka halaman → Tombol untuk membuka halaman tertentu
• Elemen 2 bentang → Menampilkan nomor halaman saat ini dan total halaman PDF

        Previos Page
        next Page
        
            of
        

        
        Go To Page

_

Menginisialisasi file JavaScript untuk merender PDF

Selain file

let pdf ; // to store pdf data 
let canvas; // to render pdf
let isPageRendering; // to check if the pdf is currently rendering
let  pageRenderingQueue = null; // to store next page number to render
let canvasContext; // context of canvas
let totalPages; // total  pages of pdf
let currentPageNum = 1;

_0, kami akan membuat file

let pdf ; // to store pdf data 
let canvas; // to render pdf
let isPageRendering; // to check if the pdf is currently rendering
let  pageRenderingQueue = null; // to store next page number to render
let canvasContext; // context of canvas
let totalPages; // total  pages of pdf
let currentPageNum = 1;

2 tempat kami dapat menulis kode JavaScript untuk membuat penampil PDF

Inisialisasi variabel

let pdf ; // to store pdf data 
let canvas; // to render pdf
let isPageRendering; // to check if the pdf is currently rendering
let  pageRenderingQueue = null; // to store next page number to render
let canvasContext; // context of canvas
let totalPages; // total  pages of pdf
let currentPageNum = 1;

Selanjutnya, tambahkan event listener untuk menangani perender PDF setelah halaman dimuat

window.addEventListener('load', function () {
    isPageRendering= false;
    pageRenderingQueue = null;
    canvas = document.getElementById('pdf_canvas');
    canvasContext = canvas.getContext('2d');
    
    initEvents(); Add events
    initPDFRenderer(); // render first page
});

Terapkan fungsi let pdf ; // to store pdf data let canvas; // to render pdf let isPageRendering; // to check if the pdf is currently rendering let pageRenderingQueue = null; // to store next page number to render let canvasContext; // context of canvas let totalPages; // total pages of pdf let currentPageNum = 1; _3

• Kita perlu menginisialisasi PDF. js dengan PDF sumber
• Kita dapat menggunakan metode getDocument untuk mendapatkan janji yang diselesaikan ke pdfData
• Data PDF memiliki fungsi

  let pdf ; // to store pdf data 
  let canvas; // to render pdf
  let isPageRendering; // to check if the pdf is currently rendering
  let  pageRenderingQueue = null; // to store next page number to render
  let canvasContext; // context of canvas
  let totalPages; // total  pages of pdf
  let currentPageNum = 1;
  

  _4

• let pdf ; // to store pdf data 
  let canvas; // to render pdf
  let isPageRendering; // to check if the pdf is currently rendering
  let  pageRenderingQueue = null; // to store next page number to render
  let canvasContext; // context of canvas
  let totalPages; // total  pages of pdf
  let currentPageNum = 1;
  

  4 akan mengembalikan

  let pdf ; // to store pdf data 
  let canvas; // to render pdf
  let isPageRendering; // to check if the pdf is currently rendering
  let  pageRenderingQueue = null; // to store next page number to render
  let canvasContext; // context of canvas
  let totalPages; // total  pages of pdf
  let currentPageNum = 1;
  

  6
• Setelah janjinya adalah

  let pdf ; // to store pdf data 
  let canvas; // to render pdf
  let isPageRendering; // to check if the pdf is currently rendering
  let  pageRenderingQueue = null; // to store next page number to render
  let canvasContext; // context of canvas
  let totalPages; // total  pages of pdf
  let currentPageNum = 1;
  

  _7, kita mendapatkan

  let pdf ; // to store pdf data 
  let canvas; // to render pdf
  let isPageRendering; // to check if the pdf is currently rendering
  let  pageRenderingQueue = null; // to store next page number to render
  let canvasContext; // context of canvas
  let totalPages; // total  pages of pdf
  let currentPageNum = 1;
  

  8
• Kita kemudian dapat menggunakan metode

  let pdf ; // to store pdf data 
  let canvas; // to render pdf
  let isPageRendering; // to check if the pdf is currently rendering
  let  pageRenderingQueue = null; // to store next page number to render
  let canvasContext; // context of canvas
  let totalPages; // total  pages of pdf
  let currentPageNum = 1;
  

  _9 di data halaman untuk merendernya di kanvas

function initPDFRenderer() {
    let url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
    // const url = 'filepath.pdf'; // to load pdf from our machine
    let option  = { url};
    
    pdfjsLib.getDocument(option)
            .promise
            .then( pdfData => {
                  totalPages = pdfData.numPages; // total number of pages 
                  let pagesCounter= document.getElementById('total_page_num'); // update total pages text
                  pagesCounter.textContent = totalPages;
                  // assigning read pdfContent to global variable
                  pdf = pdfData;
                  console.log(pdfData);
                  renderPage(currentPageNum);
            });
}

Sekarang, ketika kita memanggil

window.addEventListener('load', function () {
    isPageRendering= false;
    pageRenderingQueue = null;
    canvas = document.getElementById('pdf_canvas');
    canvasContext = canvas.getContext('2d');
    
    initEvents(); Add events
    initPDFRenderer(); // render first page
});

_0 itu akan menetapkan pdfData ke variabel PDF

Tambahkan acara untuk tombol paginasi

Tambahkan acara untuk tombol

window.addEventListener('load', function () {
    isPageRendering= false;
    pageRenderingQueue = null;
    canvas = document.getElementById('pdf_canvas');
    canvasContext = canvas.getContext('2d');
    
    initEvents(); Add events
    initPDFRenderer(); // render first page
});

1,

window.addEventListener('load', function () {
    isPageRendering= false;
    pageRenderingQueue = null;
    canvas = document.getElementById('pdf_canvas');
    canvasContext = canvas.getContext('2d');
    
    initEvents(); Add events
    initPDFRenderer(); // render first page
});

2, dan

window.addEventListener('load', function () {
    isPageRendering= false;
    pageRenderingQueue = null;
    canvas = document.getElementById('pdf_canvas');
    canvasContext = canvas.getContext('2d');
    
    initEvents(); Add events
    initPDFRenderer(); // render first page
});

3

function initEvents() {
    let prevPageBtn = document.getElementById('prev_page');
    let nextPageBtn = document.getElementById('next_page');
    let goToPage = document.getElementById('go_to_page');
    prevPageBtn.addEventListener('click', renderPreviousPage);
    nextPageBtn.addEventListener('click',renderNextPage);
    goToPage.addEventListener('click', goToPageNum);
}

Menerapkan fungsi window.addEventListener('load', function () { isPageRendering= false; pageRenderingQueue = null; canvas = document.getElementById('pdf_canvas'); canvasContext = canvas.getContext('2d'); initEvents(); Add events initPDFRenderer(); // render first page }); _4

Sekarang, mari buat fungsi

window.addEventListener('load', function () {
    isPageRendering= false;
    pageRenderingQueue = null;
    canvas = document.getElementById('pdf_canvas');
    canvasContext = canvas.getContext('2d');
    
    initEvents(); Add events
    initPDFRenderer(); // render first page
});

_4 untuk merender halaman PDF ke kanvas

function renderPage(pageNumToRender = 1) {
    isPageRendering = true; 
    document.getElementById('current_page_num').textContent = pageNumToRender;
    // use getPage method
    
    pdf
      .getPage(pageNumToRender)
      .then( page => {
        const viewport = page.getViewport({scale :1});
        canvas.height = viewport.height;
        canvas.width = viewport.width;  
        let renderCtx = {canvasContext ,viewport};
        
        page
          .render(renderCtx)
          .promise
          .then(()=> {
            isPageRendering = false;
            // this is to check if there is next page to be rendered in the queue
            if(pageRenderingQueue !== null) { 
                renderPage(pageRenderingQueue);
                pageRenderingQueue = null; 
            }
        });
    }); 
}

---

Kami memiliki metode untuk mendapatkan pdfData dan merender halaman. Ayo tulis

window.addEventListener('load', function () {
    isPageRendering= false;
    pageRenderingQueue = null;
    canvas = document.getElementById('pdf_canvas');
    canvasContext = canvas.getContext('2d');
    
    initEvents(); Add events
    initPDFRenderer(); // render first page
});

6 kita

Jika pengguna mengklik halaman berikutnya/halaman sebelumnya, itu akan menambah/mengurangi 1 ke currentPageNum dan meneruskannya ke metode

window.addEventListener('load', function () {
    isPageRendering= false;
    pageRenderingQueue = null;
    canvas = document.getElementById('pdf_canvas');
    canvasContext = canvas.getContext('2d');
    
    initEvents(); Add events
    initPDFRenderer(); // render first page
});

7. Ini akan memeriksa apakah

window.addEventListener('load', function () {
    isPageRendering= false;
    pageRenderingQueue = null;
    canvas = document.getElementById('pdf_canvas');
    canvasContext = canvas.getContext('2d');
    
    initEvents(); Add events
    initPDFRenderer(); // render first page
});

_6 adalah nol. Jika null, maka kita memanggil metode

window.addEventListener('load', function () {
    isPageRendering= false;
    pageRenderingQueue = null;
    canvas = document.getElementById('pdf_canvas');
    canvasContext = canvas.getContext('2d');
    
    initEvents(); Add events
    initPDFRenderer(); // render first page
});

4, atau metode ini akan menetapkan nomor halaman yang akan dirender ke

function initPDFRenderer() {
    let url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
    // const url = 'filepath.pdf'; // to load pdf from our machine
    let option  = { url};
    
    pdfjsLib.getDocument(option)
            .promise
            .then( pdfData => {
                  totalPages = pdfData.numPages; // total number of pages 
                  let pagesCounter= document.getElementById('total_page_num'); // update total pages text
                  pagesCounter.textContent = totalPages;
                  // assigning read pdfContent to global variable
                  pdf = pdfData;
                  console.log(pdfData);
                  renderPage(currentPageNum);
            });
}

0. Setelah perenderan halaman selesai, ia akan memeriksa apakah

function initPDFRenderer() {
    let url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
    // const url = 'filepath.pdf'; // to load pdf from our machine
    let option  = { url};
    
    pdfjsLib.getDocument(option)
            .promise
            .then( pdfData => {
                  totalPages = pdfData.numPages; // total number of pages 
                  let pagesCounter= document.getElementById('total_page_num'); // update total pages text
                  pagesCounter.textContent = totalPages;
                  // assigning read pdfContent to global variable
                  pdf = pdfData;
                  console.log(pdfData);
                  renderPage(currentPageNum);
            });
}

1 kosong dan melakukan tindakan terkait (jika perlu)

function renderPageQueue(pageNum) {
    if(pageRenderingQueue != null) {
        pageRenderingQueue = pageNum;
    } else {
        renderPage(pageNum);
    }
}

---

Mari buat metode

function initPDFRenderer() {
    let url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
    // const url = 'filepath.pdf'; // to load pdf from our machine
    let option  = { url};
    
    pdfjsLib.getDocument(option)
            .promise
            .then( pdfData => {
                  totalPages = pdfData.numPages; // total number of pages 
                  let pagesCounter= document.getElementById('total_page_num'); // update total pages text
                  pagesCounter.textContent = totalPages;
                  // assigning read pdfContent to global variable
                  pdf = pdfData;
                  console.log(pdfData);
                  renderPage(currentPageNum);
            });
}

_2 dan

function initPDFRenderer() {
    let url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
    // const url = 'filepath.pdf'; // to load pdf from our machine
    let option  = { url};
    
    pdfjsLib.getDocument(option)
            .promise
            .then( pdfData => {
                  totalPages = pdfData.numPages; // total number of pages 
                  let pagesCounter= document.getElementById('total_page_num'); // update total pages text
                  pagesCounter.textContent = totalPages;
                  // assigning read pdfContent to global variable
                  pdf = pdfData;
                  console.log(pdfData);
                  renderPage(currentPageNum);
            });
}

3. Jika pengguna mengklik

• function initPDFRenderer() {
      let url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
      // const url = 'filepath.pdf'; // to load pdf from our machine
      let option  = { url};
      
      pdfjsLib.getDocument(option)
              .promise
              .then( pdfData => {
                    totalPages = pdfData.numPages; // total number of pages 
                    let pagesCounter= document.getElementById('total_page_num'); // update total pages text
                    pagesCounter.textContent = totalPages;
                    // assigning read pdfContent to global variable
                    pdf = pdfData;
                    console.log(pdfData);
                    renderPage(currentPageNum);
              });
  }
  

  4 –

  function initPDFRenderer() {
      let url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
      // const url = 'filepath.pdf'; // to load pdf from our machine
      let option  = { url};
      
      pdfjsLib.getDocument(option)
              .promise
              .then( pdfData => {
                    totalPages = pdfData.numPages; // total number of pages 
                    let pagesCounter= document.getElementById('total_page_num'); // update total pages text
                    pagesCounter.textContent = totalPages;
                    // assigning read pdfContent to global variable
                    pdf = pdfData;
                    console.log(pdfData);
                    renderPage(currentPageNum);
              });
  }
  

  5 dan merender halaman

• function initPDFRenderer() {
      let url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
      // const url = 'filepath.pdf'; // to load pdf from our machine
      let option  = { url};
      
      pdfjsLib.getDocument(option)
              .promise
              .then( pdfData => {
                    totalPages = pdfData.numPages; // total number of pages 
                    let pagesCounter= document.getElementById('total_page_num'); // update total pages text
                    pagesCounter.textContent = totalPages;
                    // assigning read pdfContent to global variable
                    pdf = pdfData;
                    console.log(pdfData);
                    renderPage(currentPageNum);
              });
  }
  

  6 –

  function initPDFRenderer() {
      let url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
      // const url = 'filepath.pdf'; // to load pdf from our machine
      let option  = { url};
      
      pdfjsLib.getDocument(option)
              .promise
              .then( pdfData => {
                    totalPages = pdfData.numPages; // total number of pages 
                    let pagesCounter= document.getElementById('total_page_num'); // update total pages text
                    pagesCounter.textContent = totalPages;
                    // assigning read pdfContent to global variable
                    pdf = pdfData;
                    console.log(pdfData);
                    renderPage(currentPageNum);
              });
  }
  

  7 dan merender halaman

function renderNextPage(ev) {
    if(currentPageNum >= totalPages) {
        alert("This is the last page");
        return ;
    } 
    currentPageNum++;
    renderPageQueue(currentPageNum);
}
function renderPreviousPage(ev) {
    if(currentPageNum<=1) {
        alert("This is the first page");
        return ;
    }
    currentPageNum--;
    renderPageQueue(currentPageNum);
}

---

Sekarang, mari terapkan fungsi "ke nomor halaman".

Dapatkan nomor halaman dari kotak input, lalu periksa apakah nomor tersebut valid dan panggil metode renderPage

Bagaimana cara menyematkan PDF dalam JavaScript HTML?

Bagaimana cara menampilkan PDF dalam HTML?

Bagaimana cara melihat PDF dalam JavaScript?

Bagaimana cara menampilkan PDF di iframe menggunakan JavaScript?