⚠️ Important Note: Since your PDF is an image-based document,
the converted Word file will contain the text but may not perfectly match the
original formatting (fonts, exact positions, colors). This is a limitation of
OCR technology.
💡 For best results: Use Adobe Acrobat Online or SmallPDF for
better formatting preservation. These professional tools can maintain more of
the original document structure.
💡 Important: Your PDF appears to be a scanned/image-based document.
This converter uses OCR (Optical Character Recognition) to read the text from images.
This process may take 1-3 minutes depending on your file size and computer speed.
Yeshua, My Savior – New Creation Church NCC @ June 2025
Album: Your Life Is Mine CCLI Song No. 7258093
Original Key Signature: C (Relative Am) (Female Singer)
Time Signature: 4/4 Tempo: 74 bpm
Sequence: Intro-V-C-Int-V-V-C-Int-B1(6x)-B2-C-V-Outro
Intro: | Am - - - | Fmaj7 - - - | C - - - | G - - - (2x)
6 3 2 1 4 3 2 1 5 2 1 7 5 2 1 7
Verse
- | Am - - - | F - - - | C - - - | G - - -
Ye-shu-a, Mes-si - ah, the One Who was and is and is to come
- | Am - - - | F - - - | C - - - | G - - -
Ye-shu-a, my Sav - iour, the Alp-ha and O-me-ga till the end
Chorus
| Am - - - | F - - - | C - - - | G - - -
Be-hold the Lamb of God, Who takes a-way the sin of the world
| Am - - - | F - - -
Be-hold He’s com-ing with the clouds
| C - - - | G - - -
Every eye and e-very tribe will see Him reign
Interlude: | Fmaj7 - - - | Am - -
[Repeat Verse - Verse - Chorus]
Interlude: | Fmaj7 - - - | Dm - - - | C - - - | Em7 - - - (2x)
Oh oh oh oh oh oh oh oh oh oh
6 3 6 3 5 2 5 2 1 7
Bridge 1 (6x) [Choir Oh (2x), Sing Bridge 1 (4x)]
| Fmaj7 - - - | Dm - - -
The One Who sets the cap-tives free, we praise Your Name e-ter-nal-ly
Oh oh oh oh
| C - - - | Em7 - - -
You are Lord You are Lord
oh oh oh oh oh oh
Bridge 2
- | Am - - - | Dm - - - | Am - - - | Dm - -
Ye-shu-a oh oh Oh Ye-shu-a oh oh Oh
- | Am - - - | Dm - - - | Am - - - | Dm - - -
Ye-shu-a oh oh Oh Ye-shu-a oh oh Oh
[Repeat Chorus - Verse (drop)]
Outro: | Am - - - | Fmaj7 - - - | C - - - | G - - - | Am
the <pre> and <div> is the wrapper of the song?
Yes, that is correct. Think of it like a container and its content:
The <div> (The Box/Container): Think of this as the physical "envelope" or "page" that holds everything. When you click the "Save to PDF" button, the script tells the computer: "Look for the <div> with the ID portion-1 and turn everything inside that box into a PDF."
The <pre> (The Paper/Formatting): This stands for "preformatted text." In HTML, standard text usually collapses all your spaces into one. If you just used a normal paragraph, all those neat alignments for your chords (like the spaces before Am or Fmaj7) would disappear. The <pre> tag forces the browser to display the text exactly as you typed it, maintaining every single space and line break.
Why this combination is perfect for your song:
By putting the <pre> inside the <div>, you get two benefits:
Visual Precision: The <pre> tag keeps your chords perfectly aligned above your lyrics.
PDF Capability: The <div> gives the save function a "handle" (the ID) so it knows exactly what part of the page to capture.
If you ever want to add a second version of the song, you would just create a new <div> with a different ID (e.g., id="portion-2") and put another <pre> block inside that one.
Does this clear up how the structure works, or would you like to know how to add more sections using this method?
<div class="pdf-content-wrapper" id="Chords With Phrasing">
<pre>
Yeshua, My Savior – New Creation Church NCC @ June 2025
Album: Your Life Is Mine CCLI Song No. 7258093
Original Key Signature: C (Relative Am) (Female Singer)
Yes, that specific code block is the engine (Script - Executable codes) that makes the "Save as PDF" feature work.
Here is a breakdown of what that script is doing, step-by-step, so you can understand why it is responsible for the PDF creation:
document.getElementById(divId): This is the "finder." It looks for the specific <div> (your container) that has the ID you told it to look for (like portion-1).
html2canvas(element, ...): This is the "photographer." Since a browser displays HTML but a PDF needs a flat image, this tool takes a "screenshot" of your <div>.
canvas.toDataURL('image/png'): This turns that screenshot into a digital file (an image) that the computer can easily handle.
new jsPDF(...): This creates a fresh, blank A4-sized PDF document.
pdf.addImage(...): This takes the "photo" taken in step 2 and pastes it onto the PDF page.
pdf.save(...): This triggers the browser to download the file to your computer.
Important Note on Connections
This script works only if two things are true:
The ID matches: You must have an element in your HTML with that exact ID (e.g., <div id="portion-1">). If you change the ID in the HTML but forget to update the button's onclick command, it will fail.
The Button triggers it: The code in your button (e.g., onclick="savePDF('portion-1')") is the "trigger." It tells the function above which specific divId to grab.
If you have multiple sections (like portion-1, portion-2, and portion-3), this single script is flexible—you can reuse it for any of them simply by changing the ID you pass to the savePDF() function in your buttons.
Does this help you feel more confident about how the "Save to PDF" part of your blog post is functioning?
