enter image description here
I want to show pdf content with toolbar as above, but it’s only show pdf, How can I configuration to show that.
that’s my step:
- I install pdfjs-dist:
npm i pdfjs-dist
- my code:
const pdfUrl = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
let pdfDoc = null,
pageNum = 1,
scale = 0.4,
canvas = document.getElementById('pdf-canvas'),
ctx = canvas.getContext('2d'),
pageRendering = false,
pageNumPending = null;
function showPdf() {
pdfjsLib.getDocument(pdfUrl).promise.then(function(pdfDoc_) {
console.log(pdfDoc_);
pdfDoc = pdfDoc_;
document.getElementById('page_count').textContent = pdfDoc.numPages;
// Initial/first page rendering
renderPage(pageNum);
});
}
function renderPage(num) {
pageRendering = true;
pdfDoc.getPage(num).then(function(page) {
const viewport = page.getViewport({scale: scale});
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
const renderContext = {
canvasContext: ctx,
viewport: viewport
};
const renderTask = page.render(renderContext);
renderTask.promise.then(function() {
pageRendering = false;
if (pageNumPending !== null) {
// New page rendering is pending
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
}
html:
<button type="button" class="btn btn-outline-secondary" @click="showPdf();">PDF</button>
<div class="p-2 border">
<canvas id="pdf-canvas"></canvas>
</div>
import:
import 'pdfjs-dist/build/pdf.min.mjs';
import * as pdfjsLib from 'pdfjs-dist/build/pdf.min.mjs';
pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`;
window.pdfjsLib = pdfjsLib;
I try to customize a simple toolbar but take too much time, Somebody help..!
thanks