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 PDFInisialisasi 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
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;
- Kita perlu menginisialisasi PDF. js dengan PDF sumber
- Kita dapat menggunakan metode getDocument untuk mendapatkan janji yang diselesaikan ke pdfData
- Data PDF memiliki fungsi
_4let 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 mengembalikanlet 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;
6let 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;
- Setelah janjinya adalah
_7, kita mendapatkanlet 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;
8let 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;
- Kita kemudian dapat menggunakan metode
_9 di data halaman untuk merendernya di kanvaslet 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;
function initPDFRenderer[] {
let url = '//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 PDFTambahkan 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
}];
3function 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
window.addEventListener['load', function [] {
isPageRendering= false;
pageRenderingQueue = null;
canvas = document.getElementById['pdf_canvas'];
canvasContext = canvas.getContext['2d'];
initEvents[]; Add events
initPDFRenderer[]; // render first page
}];
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 kanvasfunction 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 kitaJika 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 = '//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 = '//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 = '//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 = '//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
4 –function initPDFRenderer[] { let url = '//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 halamanfunction initPDFRenderer[] { let url = '//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 = '//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 halamanfunction initPDFRenderer[] { let url = '//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]; }]; }
function renderNextPage[ev] {
if[currentPageNum >= totalPages] {
alert["This is the last page"];
return ;
}
currentPageNum++;
renderPageQueue[currentPageNum];
}
function renderPreviousPage[ev] {
if[currentPageNum