PdfEditor/public/viewer.html

<script src="viewer.js" type="text/javascript"></script>
<link rel="stylesheet" href="viewer.css" />
<link rel="stylesheet" href="https://toert.github.io/Isolated-Bootstrap/versions/4.1.0/iso_bootstrap4.1.0min.css" />
<style>
    @media print {
        .bootstrap {
            display: none;
        }
    }    
</style>
<div class="bootstrap">
    <div class="toolbar">
        <div class="btn-group">
            <button id="saveButton" class="btn btn-secondary" title="Save PDF">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g><g><path d="M38,32.4c0.7-0.1,1.7-0.2,3.1-0.2c1.4,0,2.4,0.3,3.1,0.8c0.6,0.5,1.1,1.3,1.1,2.3s-0.3,1.8-0.9,2.4    c-0.8,0.7-1.9,1.1-3.3,1.1c-0.3,0-0.6,0-0.8,0v3.6H38V32.4z M40.3,37c0.2,0,0.4,0.1,0.8,0.1c1.2,0,2-0.6,2-1.6    c0-0.9-0.6-1.5-1.8-1.5c-0.5,0-0.8,0-0.9,0.1V37z"/><path d="M46.7,32.4c0.8-0.1,1.9-0.2,3.1-0.2c1.9,0,3.2,0.3,4.1,1.1c1,0.8,1.7,2,1.7,3.8c0,1.9-0.7,3.3-1.7,4.1    c-1.1,0.9-2.7,1.3-4.7,1.3c-1.2,0-2-0.1-2.6-0.1V32.4z M49,40.6c0.2,0,0.5,0,0.8,0c2.1,0,3.4-1.1,3.4-3.5c0-2.1-1.2-3.2-3.2-3.2    c-0.5,0-0.8,0-1,0.1V40.6z"/><path d="M57.1,32.2h6.2v1.9h-3.9v2.3h3.6v1.9h-3.6v4.1h-2.3V32.2z"/></g><g><path d="M88.9,25.9L67.4,4.4c-1-1-2.3-1.5-3.7-1.5H16.5c-3.3,0-6,2.7-6,6v82c0,3.3,2.7,6,6,6h68c3.3,0,6-2.7,6-6v-61    C90.5,28.4,89.9,26.9,88.9,25.9z M50.5,83.3L39,71.8h5.9V53.2h11.3v18.6h5.9L50.5,83.3z M77.4,44.7c0,1.2-1,2.1-2.1,2.1H25.8    c-1.2,0-2.1-1-2.1-2.1V31.2c0-1.2,1-2.1,2.1-2.1h49.5c1.2,0,2.1,1,2.1,2.1V44.7z"/></g></g></svg>
            </button>
            <button id="whiteoutButton" class="btn btn-secondary" title="Whiteout">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none" x="0px" y="0px" viewBox="0 0 100 100"><defs><g id="a"><path stroke="none" d=" M 53.9 88.85 L 53.9 96.65 67.45 96.65 67.45 88.85 53.9 88.85 M 32.5 88.85 L 32.5 96.65 46.1 96.65 46.1 88.85 32.5 88.85 M 11.15 75.25 L 3.35 75.25 3.35 96.65 24.7 96.65 24.7 88.85 11.15 88.85 11.15 75.25 M 11.15 53.9 L 3.35 53.9 3.35 67.45 11.15 67.45 11.15 53.9 M 3.35 46.1 L 11.15 46.1 11.15 32.5 3.35 32.5 3.35 46.1 M 24.7 11.15 L 24.7 3.35 3.35 3.35 3.35 24.7 11.15 24.7 11.15 11.15 24.7 11.15 M 46.1 11.15 L 46.1 3.35 32.5 3.35 32.5 11.15 46.1 11.15 M 67.45 11.15 L 67.45 3.35 53.9 3.35 53.9 11.15 67.45 11.15 M 96.65 75.25 L 88.85 75.25 88.85 88.85 75.25 88.85 75.25 96.65 96.65 96.65 96.65 75.25 M 96.65 53.9 L 88.85 53.9 88.85 67.45 96.65 67.45 96.65 53.9 M 88.85 24.7 L 96.65 24.7 96.65 3.35 75.25 3.35 75.25 11.15 88.85 11.15 88.85 24.7 M 88.85 32.5 L 88.85 46.1 96.65 46.1 96.65 32.5 88.85 32.5 Z"/></g></defs><g transform="matrix( 1, 0, 0, 1, 0,0) "><use xlink:href="#a"/></g><g transform="matrix( 1, 0, 0, 1, -0.2,0) "></g></svg>
            </button>
            <button id="editTextButton" class="btn btn-secondary" title="Edit Text">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16" x="0px" y="0px"><g><path d="M15 2h-4c-.553 0-1-.448-1-1s.447-1 1-1h4c.553 0 1 .448 1 1s-.447 1-1 1zM13 16c-.553 0-1-.447-1-1v-14c0-.552.447-1 1-1s1 .448 1 1v14c0 .553-.447 1-1 1zM15 16h-4c-.553 0-1-.447-1-1s.447-1 1-1h4c.553 0 1 .447 1 1s-.447 1-1 1zM9.001 13c-.384 0-.749-.221-.915-.594l-3.086-6.944-3.086 6.944c-.224.504-.815.731-1.32.508-.504-.225-.732-.815-.507-1.32l4-9c.16-.361.518-.594.913-.594s.753.233.914.594l4 9c.224.505-.003 1.096-.508 1.32-.132.059-.269.086-.405.086zM8 11h-6c-.552 0-1-.447-1-1s.448-1 1-1h6c.552 0 1 .447 1 1s-.448 1-1 1z"/></g></svg>
            </button>
        </div>
    </div>
</div>
<form style="display: none" action="save" method="POST" id="saveForm">
    <input type="hidden" name="html" id="htmlInput" />
    <input type="hidden" name="filename" id="filenameInput" />
</form>