<!-- 
<script>
	var myState = {
		pdf: null,
		currentPage: 1,
		zoom: 1
	}
  
	pdfjsLib.getDocument('test.pdf').then((pdf) => {
  
		myState.pdf = pdf;
		render();

	});

	function render() {
		myState.pdf.getPage(myState.currentPage).then((page) => {
	  
			var canvas = document.getElementById("pdf_renderer");
			var ctx = canvas.getContext('2d');
  
			var viewport = page.getViewport(myState.zoom);

			canvas.width = viewport.width;
			canvas.height = viewport.height;
	  
			page.render({
				canvasContext: ctx,
				viewport: viewport
			});
		});
	}

</script>
  -->
<!-- <div id="my_pdf_viewer">
    <div class="mockup-window border bg-base-300">
        <div id="canvas_container" class="flex justify-center">
            <canvas id="pdf_renderer"></canvas>
        </div>
    </div>
        

    <div id="navigation_controls">
        <button id="go_previous">Previous</button>
        <input id="current_page" value="1" type="number"/>
        <button id="go_next">Next</button>
    </div>

    <div id="zoom_controls">  
        <button id="zoom_in">+</button>
        <button id="zoom_out">-</button>
    </div>
</div> -->

<script>
	let pdf_file = 'test.pdf';
</script> 

<div class="mockup-window border bg-base-300 h-full w-full">
	<object class="pdf-view" data="{pdf_file}" title="Article PDF"> </object>
</div>

<style>
	.pdf-view {
		width: 100%;
		height: 100%;
	}
</style>