ARTICLE AD BOX
Introduction To My Project:
I am working on a single page website that focuses on being a quick and easy way to combine, edit, convert, rename, and create PDF files.
Here's a link: My Online PDF File Editor/Converter Website
HTML Snippet:
<form id="pdfForm"> <h2>Upload PDF Files</h2> <input type="file" id="pdfUpload" multiple accept=".pdf"><br><br> <h2>Image Upload</h2> <input type="file" id="imageUpload" multiple accept="image/*"><br><br> <h2>Zip File Options</h2> <button type="button" id="zipImages">Archive Images into Zip</button><br> <label for="zipFileName">Rename Zip File:</label> <input type="text" id="zipFileName"><br><br> <h2>Re-order Images</h2> <select id="imageOrder"> <option value="original">Original Order</option> <option value="alphabetical">Alphabetical</option> <option value="reverse">Reverse Alphabetical</option> <option value="modified">By Modified Date</option> </select><br><br> <h2>Add Header and Footer</h2> <label for="headerText">Centered Header Text:</label> <input type="text" id="headerText"><br><br> <label for="footerText">Centered Footer Text:</label> <input type="text" id="footerText"><br><br> <h2>Footer Page Numbering</h2> <label for="footerNumberFormat">Left Footer Page Number:</label> <select id="footerNumberFormat"> <option value="# | #"># | #</option> <option value="Page # | #">Page # | #</option> <option value="Pg # | #">Pg # | #</option> <option value="# | Pg #"># | Pg #</option> </select><br><br> <label for="rightFooterText">Right Footer Text:</label> <input type="text" id="rightFooterText"><br><br> <h2>Resize Page & Margins</h2> <div class="slider-container"> <label class="slider-label">Page Width</label> <input type="range" id="pageWidth" min="400" max="1200" value="800"> </div> <div class="slider-container"> <label class="slider-label">Page Height</label> <input type="range" id="pageHeight" min="400" max="1200" value="600"> </div> <div class="slider-container"> <label class="slider-label">Margins</label> <input type="range" id="pageMargin" min="10" max="100" value="20"> </div> <div class="preview-box" id="previewBox"> <p>Resizable Preview Area</p> </div> <h2>Rename PDF File</h2> <label for="pdfFileName">Rename PDF File:</label> <input type="text" id="pdfFileName"><br><br> <button type="button" id="savePdf">Save File As</button> <button type="button" id="viewPdf">View PDF File</button> </form>JavaScript Snippet: * this script resizes proportions and padding of pdf document.
<script> const previewBox = document.getElementById("previewBox"); const pageWidth = document.getElementById("pageWidth"); const pageHeight = document.getElementById("pageHeight"); const pageMargin = document.getElementById("pageMargin"); function updatePreview() { previewBox.style.width = pageWidth.value + "px"; previewBox.style.height = pageHeight.value + "px"; previewBox.style.padding = pageMargin.value + "px"; } pageWidth.addEventListener("input", updatePreview); pageHeight.addEventListener("input", updatePreview); pageMargin.addEventListener("input", updatePreview); updatePreview(); // initialize </script>What I Want:
I want to be able to do the following functions and have the options:
Upload multiple pdf files in order to extract their images. And then re-order them and rename the output ZIP archive file before saving it.
Upload multiple (jpg, png, or gif) images and re-order them and make them a single pdf before saving them.
Add internal header and footer text to the file (including page numbering).
Preview the page set-up and size on same page.
Rename the pdf file and save it.
Or view the pdf on the online web browser pdf viewer/reader.
