citrus-cms/resources/views/admin/dashboard/admin.blade.php

<!-- pdf.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.10.377/build/pdf.min.js"></script>
<style>
	.flowchart .page {
		zoom: 50%;
		transition: all .5s
	}
</style>
<script>
	$(function () {
		var zoom = 50;
		$(".zoomin").on("click", function () {
			zoom = zoom + 10;
			$(".flowchart .page").css("zoom", zoom + "%");

		});
		$(".zoomout").on("click", function () {
			zoom = zoom - 10;
			$(".flowchart .page").css("zoom", zoom + "%");

		});


	});
</script>
<script>
	$(function () {
		const $pdf = '{{url("assets/diagram.pdf")}}';

		const $initialState = {
			pdfDoc: null,
			currentPage: 1,
			pageCount: 0,
			zoom: 0.615,
		};

		// Render the page.
		const renderPage = () => {
			// Load the first page.
			$initialState.pdfDoc
				.getPage($initialState.currentPage)
				.then((page) => {
					console.log('page', page);

					const canvas = $('#canvas')[0];
					const $ctx = canvas.getContext('2d');
					const $viewport = page.getViewport({
						scale: $initialState.zoom,
					});

					canvas.height = $viewport.height;
					canvas.width = $viewport.width;

					// Render the PDF page into the canvas context.
					const renderCtx = {
						canvasContext: $ctx,
						viewport: $viewport,
					};

					page.render(renderCtx);

					$('#page_num').html($initialState.currentPage);
				});
		};

		// Load the document.
		pdfjsLib
			.getDocument($pdf)
			.promise.then((doc) => {
				$initialState.pdfDoc = doc;
				console.log('pdfDocument', $initialState.pdfDoc);

				$('#page_count').html($initialState.pdfDoc.numPages);

				renderPage();
			})
			.catch((err) => {
				alert(err.message);
			});

		function showPrevPage() {
			if ($initialState.pdfDoc === null || $initialState.currentPage <= 1)
				return;
			$initialState.currentPage--;
			// Render the current page
			$('#current_page').val($initialState.currentPage);
			renderPage();
		}

		function showNextPage() {
			if (
				$initialState.pdfDoc === null ||
				$initialState.currentPage >=
				$initialState.pdfDoc._pdfInfo.numPages
			)
				return;

			$initialState.currentPage++;
			$('#current_page').val($initialState.currentPage);
			renderPage();
		}

		// Button events.
		$('#prev-page').click(showPrevPage);
		$('#next-page').click(showNextPage);

		// Display a specific page.
		$('#current_page').on('keypress', (event) => {
			if ($initialState.pdfDoc === null) return;
			// Get the key code.
			const $keycode = event.keyCode ? event.keyCode : event.which;
			if ($keycode === 13) {
				// Get the new page number and render it.
				let desiredPage = $('#current_page')[0].valueAsNumber;

				$initialState.currentPage = Math.min(
					Math.max(desiredPage, 1),
					$initialState.pdfDoc._pdfInfo.numPages,
				);
				renderPage();

				$('#current_page').val($initialState.currentPage);
			}
		});

		// Zoom functionality.
		$('#zoom_in').on('click', () => {
			if ($initialState.pdfDoc === null) return;
			$initialState.zoom *= 4 / 3;

			renderPage();
		});

		$('#zoom_out').on('click', () => {
			if ($initialState.pdfDoc === null) return;
			$initialState.zoom *= 2 / 3;
			renderPage();
		});
	});
</script>
<header>
	<table class="table ">
		<tr>
			<td width="20%" style="vertical-align: middle">
				<div class="btn-group">
					<button class="btn btn-outline-primary" id="zoom_in">
						<i class="fas fa-search-plus"></i>
					</button>

					<button class="btn btn-outline-primary" id="zoom_out">
						<i class="fas fa-search-minus"></i>
					</button>
				</div>
			</td>
			<td width="60%" class="text-center"><img src="{{url("assets/citrus-logos/citrus-yatay.svg")}}" class="p-1"
					alt=""></td>
			<td width="20%" style="vertical-align: bottom;font-size:16px">

			</td>
		</tr>
	</table>

</header>
<div class="flowchart" style="overflow:auto;width:100%;height:80vh;margin-top:10px">

	<!-- Canvas to place the PDF -->
	<canvas id="canvas" class="canvas__container"></canvas>
</div>