toshimasa-nanaki/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
    <title>{{ title }}</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="../static/libs/pdf.js"></script>
</head>

<body>
    <button id="prev">Previous</button>
    <button id="next">Next</button>
    <canvas id="the-canvas"></canvas>
    <script>
        const pdfjsLib = window['pdfjs-dist/build/pdf'];
        const url = "../static/test.pdf";

        let pdfDoc = null,
            nowpage = 1,
            scale = 2.0,
            canvas = document.getElementById('the-canvas'),
            context = canvas.getContext('2d');

        function renderPage(num) {
            pdfDoc.getPage(num).then(function (page) {
                const viewport = page.getViewport({ scale: scale });
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                const renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                const renderTask = page.render(renderContext);

                renderTask.promise.then(function () {});
            });
        }

        $('#prev').on("click", function () {
            if (nowpage <= 1) {
                return;
            }
            nowpage--;
            $('#prev').prop("disabled", nowpage === 1);
            $('#next').prop("disabled", false);
            renderPage(nowpage);
        });

        $('#next').on("click", function () {
            if (nowpage >= pdfDoc.numPages) {
                return;
            }
            nowpage++;
            $('#prev').prop("disabled", false);
            $('#next').prop("disabled", nowpage === pdfDoc.numPages);
            renderPage(nowpage);
        });

        pdfjsLib.getDocument(url).promise.then(function (pdf) {
            pdfDoc = pdf;
            $('#prev').prop("disabled", true);
            $('#next').prop("disabled", false);
            renderPage(nowpage);
        });
    </script>
</body>
</html>

## server.py
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html', title='PDFテスト')


if __name__ == "__main__":
    app.run()
	<!DOCTYPE html>
	<html>

	<head>
	<title>{{ title }}</title>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script src="../static/libs/pdf.js"></script>
	</head>

	<body>
	<button id="prev">Previous</button>
	<button id="next">Next</button>
	<canvas id="the-canvas"></canvas>
	<script>
	const pdfjsLib = window['pdfjs-dist/build/pdf'];
	const url = "../static/test.pdf";

	let pdfDoc = null,
	nowpage = 1,
	scale = 2.0,
	canvas = document.getElementById('the-canvas'),
	context = canvas.getContext('2d');

	function renderPage(num) {
	pdfDoc.getPage(num).then(function (page) {
	const viewport = page.getViewport({ scale: scale });
	canvas.height = viewport.height;
	canvas.width = viewport.width;

	const renderContext = {
	canvasContext: context,
	viewport: viewport
	};
	const renderTask = page.render(renderContext);

	renderTask.promise.then(function () {});
	});
	}

	$('#prev').on("click", function () {
	if (nowpage <= 1) {
	return;
	}
	nowpage--;
	$('#prev').prop("disabled", nowpage === 1);
	$('#next').prop("disabled", false);
	renderPage(nowpage);
	});

	$('#next').on("click", function () {
	if (nowpage >= pdfDoc.numPages) {
	return;
	}
	nowpage++;
	$('#prev').prop("disabled", false);
	$('#next').prop("disabled", nowpage === pdfDoc.numPages);
	renderPage(nowpage);
	});

	pdfjsLib.getDocument(url).promise.then(function (pdf) {
	pdfDoc = pdf;
	$('#prev').prop("disabled", true);
	$('#next').prop("disabled", false);
	renderPage(nowpage);
	});
	</script>
	</body>
	</html>
	from flask import Flask, render_template

	app = Flask(__name__)

	@app.route('/')
	def index():
	return render_template('index.html', title='PDFテスト')


	if __name__ == "__main__":
	app.run()