Jump to content
vmars316

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

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by vmars316

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

vmars316, not working at all or with errors?

Looks like collectedTextareas variable was not initialized

 

Edited by smus

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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>

 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...