'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

Link to comment

Share on other sites

Funce

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

smus

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

smus

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity