'window.print();' print text as .pdf ?

vmars316 · September 22, 2019

Hello & Thanks:

I have several <textarea> s and I am using 'window.print();' to print them out as .pdf .

So I dump them all into a <pre> area .

Problem is , I want to print each as a 'new page' .

In '.txt' files I can use a character sequence 'CRLF' to force a 'new line' .

? Is there a character sequence I can insert into <pre>

to force a 'new page' for 'window.print();' ?

That would surely make things a lot easier

Thanks

Funce · September 22, 2019

There's no particular character per say, but if you create separate <pre> elements you can apply this styling in your stylesheet.

@media print {
    .pre-break-after {
        page-break-after: always;
    }
}

Give it a try.

vmars316 · September 22, 2019

Ok ,I'll give it a shot...

vmars316 · September 23, 2019

Hmm...

Cant seem to get this puppy going , need help .

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<meta charset="utf-8" />
        <title>FreshDraft.StrippedDown></title>
        <!--
               https://www.freeformatter.com/html-validator.html 
               The saveAs Button , saves only html , no Links to images ,  no images !
               The Browser more 'Tools / savepage as' option saves Links to images .
               http://vmars.us/ShowMe/ShortStory-Color-VM.html
               http://thiscouldbebetter.neocities.org/texteditor.html 
               https://www.w3schools.com/code/tryit.asp?filename=G807IALLC2Y6
        -->
<style>
@media print {
.copyFrom {
        page-break-after: always;
    }
    }

@media print {
#pageBreak{
        page-break-after: always;
    }
    }
@media print {
#printBox{
        page-break-after: always;
    }
    }

</style>

</head>
<body id="bodyId" >  

    <div>
<br>             <pre id="printBox"style="border-style: solid;">printBox</pre>
<br>             <textarea class="copyFrom"  spellcheck="false" rows="4" cols="12">This is textarea 1
textarea 1 line 2
</textarea>   
<br>             <textarea class="copyFrom"  spellcheck="false" rows="4" cols="12">textarea 2 line 1
textarea 2 line 2
</textarea>   
<br>             <pre id="pageBreak" style="border-style: dotted;">pre pageBreak area line 1
pre pageBreak area line 2
</pre>
    </div>
<br>

    <div>
<br>
<button id="printThis" onclick="printAllThis()" >Print This</button>
<button id="cancelPrint" onclick="cancelAllPrint()" >Cancel</button>
    </div>
 
<script>
        var  printBox  = document.querySelector('#printBox');
        var  collectedTextareas ;
        function printAllThis() { 
                    copyFrom = document.getElementsByClassName("copyFrom");
                    for (var i = 0; i < copyFrom.length; i++) {
                      collectedTextareas = collectedTextareas + copyFrom[i].value + pageBreak.innerHTML; 
                     }
                      printBox.innerHTML = collectedTextareas ;   
                      window.print();
                      console.log("window.printing");
}
</script>

<script>
        function cancelAllPrint() {
        return;
}
</script>

</body></html>

https://www.w3schools.com/code/tryit.asp?filename=G807IALLC2Y6

Thanks

Edited September 23, 2019 by vmars316

vmars316 · September 23, 2019

I got rid of the Border around printBox , but still no multiple pages:

https://www.w3schools.com/code/tryit.asp?filename=G80SDRE1RQ1M

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<meta charset="utf-8" />
        <title>FreshDraft.StrippedDown></title>
        <!--
               https://www.freeformatter.com/html-validator.html 
               The saveAs Button , saves only html , no Links to images ,  no images !
               The Browser more 'Tools / savepage as' option saves Links to images .
               http://vmars.us/ShowMe/ShortStory-Color-VM.html
               http://thiscouldbebetter.neocities.org/texteditor.html 
               https://www.w3schools.com/code/tryit.asp?filename=G80SDRE1RQ1M
        -->
<style>
@media print {
.copyFrom {
        page-break-after: always;
    }
    }

@media print {
#pageBreak{
        page-break-after: always;
    }
    }
@media print {
#printBox{
        page-break-after: always;
    }
    }

</style>

</head>
<body id="bodyId" >  

    <div>
<br>             <pre id="printBox"style="border-style: solid;">printBox</pre>
<br>             <textarea class="copyFrom"  spellcheck="false" rows="4" cols="12">This is textarea 1 line 1
textarea 1 line 2
</textarea>   
<br>             <textarea class="copyFrom"  spellcheck="false" rows="4" cols="12">textarea 2 line 1
textarea 2 line 2
</textarea>   
<br>             <pre id="pageBreak" style="border-style: dotted;">pre pageBreak area line 1
pre pageBreak area line 2
</pre>
    </div>
<br>

    <div>
<br>
<button id="printThis" onclick="printAllThis()" >Print This</button>
<button id="cancelPrint" onclick="cancelAllPrint()" >Cancel</button>
    </div>
 
<script>
        var  printBox  = document.querySelector('#printBox');
        var  collectedTextareas ;
        function printAllThis() { 
                    copyFrom = document.getElementsByClassName("copyFrom");
                    for (var i = 0; i < copyFrom.length; i++) {
                      collectedTextareas = collectedTextareas + copyFrom[i].value + pageBreak.innerHTML; 
                     }
                      printBox.style.border = "none";
                      printBox.innerHTML = collectedTextareas ;   
                      window.print();
                      console.log("window.printing");
                      printBox.style.border = "solid";
}
</script>

<script>
        function cancelAllPrint() {
        console.log("Nuttin to cancel !");
}
</script>

</body></html>

Thanks

smus · September 23, 2019

vmars316, not working at all or with errors?

Looks like collectedTextareas variable was not initialized

Edited September 23, 2019 by smus

vmars316 · September 23, 2019

Thanks;

Corrected , but still no go:

<script>
        var  printBox  = document.querySelector('#printBox');
        var  collectedTextareas ;
        function printAllThis() { 
                    collectedTextareas = "";
                    copyFrom = document.getElementsByClassName("copyFrom");
                    for (var i = 0; i < copyFrom.length; i++) {
                      collectedTextareas = collectedTextareas + copyFrom[i].value + pageBreak.innerHTML; 
                     }
                      printBox.style.border = "none";
                      printBox.innerHTML = collectedTextareas ;   
                      window.print();
                      console.log("window.printing");
                      printBox.style.border = "solid";
}
</script>

smus · September 23, 2019

var pageBreak = document.getElementById("pageBreak")

All var declarations must be inside the function

vmars316 · September 23, 2019

Ah , at last , it works:

Ok Funce , I finally see what you meant .

Thanks All .

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8" />
<title>FreshDraft.StrippedDown></title>
<style>
@media print {
.pageBreak{
        page-break-after: always;
    }
    }
</style>
</head>
<body id="bodyId" >  
    <div>
<br>             <textarea class="copyFrom"  spellcheck="false" rows="4" cols="12">textarea 1 line 1
textarea 1 line 2
</textarea>   
<br>             <textarea class="copyFrom"  spellcheck="false" rows="4" cols="12">textarea 2 line 1
textarea 2 line 2
</textarea>   
<br>
                 <pre class="pageBreak">.</pre>
                 <pre class="pageBreak">.</pre>
    </div>
<br>
    <div>
<br>
<button id="printThisBtn" onclick="printAllThis()" style="display: block">Print This</button>
    </div>
<script>
                var    copyFrom = document.getElementsByClassName("copyFrom");
                var    pageBreak = document.getElementsByClassName("pageBreak");
                var    printThisBtn = document.querySelector("#printThisBtn");
        function printAllThis() { 
                    collectedTextareas = "";
                    for (var i = 0; i < copyFrom.length; i++) {
                      pageBreak[i].innerHTML  = copyFrom[i].value ; 
                     }
                    for (var i = 0; i < copyFrom.length; i++) {
                      copyFrom[i].style.display = "none";
                     }
                      printThisBtn.style.display = "none";
                      window.print();
                      console.log("window.printing");
                    for (var i = 0; i < copyFrom.length; i++) {
                      copyFrom[i].style.display = "block";
                     }
                      printThisBtn.style.display = "block";
}
</script>
</body></html>

Sign In

'window.print();' print text as .pdf ?

Recommended Posts

vmars316 5

Link to post

Share on other sites

Funce 42

Link to post

Share on other sites

vmars316 5

Link to post

Share on other sites

vmars316 5

Link to post

Share on other sites

vmars316 5

Link to post

Share on other sites

smus 1

Link to post

Share on other sites

vmars316 5

Link to post

Share on other sites

smus 1

Link to post

Share on other sites

vmars316 5

Link to post

Share on other sites

Join the conversation

Browse

Activity