How to show standard toolbar in PdfJs 3.4.120 while using Canvas element?

I'm trying to display a pdf file in my spring boot-MVC application's jsp page using Pdfjs 3.4.120 version.

When I use iFrame and viewer.html, a standard toolbar(example) gets displayed but as per my requirement I can't use iFrame. With canvas element I'm unable to see a toolbar and only pdf gets rendered.

I've gone through so many articles and posts but nothing helped.

following is my code:

$.ajax({
		//some code
	}).done(function(data, textStatus, jqXHR) {
	
		var pdfData = new Uint8Array(data);
		var pdfContainer = document.getElementById('pdfContainer');
		pdfjsLib.GlobalWorkerOptions.workerSrc = "pdf.worker.min.js";

		pdfjsLib.getDocument({ data: pdfData }).promise.then(function(pdf) {

			for(pageNum = 1; pageNum <= pdf.numPages; pageNum++) {

				pdf.getPage(pageNum).then(page => {

					const canvas = document.createElement('canvas');

					var scale = 1.5;
					var viewport = page.getViewport({ scale: scale, });

					var outputScale = window.devicePixelRatio || 1;
					var context = canvas.getContext('2d');

					canvas.width = Math.floor(viewport.width * outputScale);
					canvas.height = Math.floor(viewport.height * outputScale);
					canvas.style.width = Math.floor(viewport.width) + "px";
					canvas.style.height =  Math.floor(viewport.height) + "px";

					var transform = outputScale !== 1
					  ? [outputScale, 0, 0, outputScale, 0, 0]
					  : null;

					var renderContext = {
					  canvasContext: context,
					  transform: transform,
					  viewport: viewport
					};
					page.render(renderContext);
					pdfContainer.appendChild(canvas);

                            
				});
			}
		});
	})

<div id="pdfContainer"></div>

The primary goal of PDF.js is to ship a PDF viewer for Firefox browser to view local PDF files, currently, it's not easy to integrate into a project to have custom UI and features.

The pdfjs-dist package only export some core API of PDF.js, all the viewer layer API are not exported totally, so you can't import the toolbar from pdfjs-dist.

You can build your own toolbar, it shouldn't be that hard to have basic functions. If you really want to use the default toolbar, you have to custom the build process of PDF.js to export the toolbar, use the same Dom structure, initialize the toolbar exactly the same way like PDF.js. It's a lot of work.

If you only want to show PDF with the default toolbar, you can try https://github.com/Priestch/document-viewer maintained by me, it's written in vanilla JavaScript, the goal is to make the process of integrating a PDF viewer as easy as possible. It has all the features of PDF.js.