Announcement

**rnd me** · Aug 17, 2011, 03:16 PM

with the exception of older IE, you can use dataURLs to print a fake text file instead of a web page.

the issue with using window.open + popup.document.write() is that you always have an HTML document. even if you prepend "<pre>" to your data, it will still print as a web page.

Code:

window.open("data:application/rtf;," + escape( "hello\tworld!\ntext mode is cool" ));

firefox prints plain text files as graphic, because it adds the different font headers like url, date, page#, etc...

so, the best option is to download the text.

here is a slightly complex routine that i just now verified as working to do what you want using firefox and a batch file.

notepad has a hidden flag "/p" that auto-prints the file and closes notepad.

we can use a batch file to take advantage of this capability and bind the output from firefox to notepad and ultimately to the printer.

print.bat:

Code:

notepad /p %1

create print.bat in a folder you have access to.

js snip to invoke a file save/open dialog.

Code:

var data="hello\tworld!\ntext mode is cool"; //modify this var for your program
window.open("data:application/print;," + escape( data ));

now, here is the complicated part:
after you create the print.bat file, run the snip above in firebug or a demo page.
firefox will prompt you to open/save a file of unknown type.

check "Open with"
click "Browse...".
click the new "Browse..." button on bottom-left of the "choose helper application" list window.
browse to the folder containing your .bat file (you won't see it in the file list at this point)
in the "File name:" field, type "*.*" (without quotes) and click "Open"
select your print.bat file from the list (you should be able to see it now)
click "Open"
click "Do this automatically from now on"
click ok

you should hear/see it printing within a few seconds if it worked.

the next time you run the js, it will simply print, no human intervention required.

**Old Pedant** · Aug 17, 2011, 08:39 PM

That's simply amazing, RndMe!

I dunno if I'll ever have need to do this, but wow! Just knowing that I can...

**Manvi** · Aug 18, 2011, 06:34 AM

printing textual data from browser

I have two html files..
First one like this :-
[code]
<html>
<body>

<h1>Main window</h1>

</p>

<a href="javascript:window.open('subWindow.html')">Open sub window</a>

</body>
</html>

and the second one is :
[code]
<html>
<body onload="window.print()">

<h1>Sub window</h1>

<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
<tr>
<td>Column 2</td>
<td>C 1</td>
<td>C 2</td>
<td>C 3</td>
</tr>
<tr>
<td>Column 3</td>
<td>X 3</td>
<td>Y 4</td>
<td>X 3</td>
</tr>
<tr>
<td>Column 4</td>
<td>M 2</td>
<td>M 3</td>
<td>M 4</td>
</tr>
</table>
</p>

</body>
</html>

the second file gets triggred to the printer But this prints the browser window - in graphic mode ( Dot matrix printer and consumes a lot off time to print a single window ...

Can this be printed in text mode..

**rnd me** · Aug 18, 2011, 02:32 PM

Code:

 <html>
<body>

<h1>Sub window</h1>

<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
<tr>
<td>Column 2</td>
<td>C 1</td>
<td>C 2</td>
<td>C 3</td>
</tr>
<tr>
<td>Column 3</td>
<td>X 3</td>
<td>Y 4</td>
<td>X 3</td>
</tr>
<tr>
<td>Column 4</td>
<td>M 2</td>
<td>M 3</td>
<td>M 4</td>
</tr>
</table>

<script>
var data=[].slice.call(document.querySelectorAll("table tr")).map(function(row){
 return row.textContent.trim().replace(/\n/g,"\t");
}).join("\n");

window.open("data:application/print;," + escape( data ));
</script>

</body>
</html>

**Manvi** · Aug 19, 2011, 01:08 AM

Thanks for yoyr reply..
when m saving this file with .html extension it is not getting triggered to printer as there is no body onload on this..

I am not able to proceed with it.. can u plz help me resolve the issue..nd do i need to create a bat file also for the notepad as specified in previous post...

**jnsunkersett** · Aug 19, 2011, 07:56 AM

Hello "rnd_me",

the real magic seems to be in the script;

Please can you explain the script ?
(What is slice, slice.call(), document.querySelectorAll("table tr"), etc)

thanks in advance.
jeevan

**rnd me** · Aug 19, 2011, 12:31 PM

Originally posted by Manvi View Post

Thanks for yoyr reply..
when m saving this file with .html extension it is not getting triggered to printer as there is no body onload on this..

I am not able to proceed with it.. can u plz help me resolve the issue..nd do i need to create a bat file also for the notepad as specified in previous post...

you can call the js code in my .bat-file-using post in an onload event to make it work as you need. but, if the <script> is at the bottom of <body>, it should just work as coded. i only tested in FF, since this was for a controlled environment question, i can't assume the public could handle the convoluted sequence of clicks to enable this neat functionality...

the only way to print text these days that i know of is notepad. it used to be you could just redirect to lpt1, but most computers don't have lpt ports anymore...

**rnd me** · Aug 19, 2011, 12:43 PM

Originally posted by jnsunkersett View Post

Please can you explain the script ?
(What is slice, slice.call(), document.querySelectorAll("table tr"), etc)

basically, it's the minimum amount of code you need in a modern browser to do simple jQuery-like chains of processing.

[].slice.call is a funky but short way of turning list-like objects into true Arrays in javascript. javascript uses a lot of almost-arrays like arguments, dom collections, and others that use numerical indexes and maintain a .length property. the problem with these non-arrays is that they don't have the great prototype methods that arrays have like slice, map, and filter.

once i have elements in an array, i can manipulate the array and chain together many array operations, much like you can chain jQuery operations together. the arrays give us tools to the right of the dot that collections and other object don't have. It's a good model of programming, and it's great for processing tabular data.

line by line:

Code:

var data=[].slice.call(document.querySelectorAll("table tr"))

gathers a true array of table rows, one row element per array index. querySelectorAll is basically a built-in "jQuery" functionality that lets us grab complex collections of elements using css selectors.

Code:

.map(function(row){

iterate over the row array, using row as a stand-in for each row as it's processed. much like for(row in rows), or rows as row in php.

Code:

  return row.textContent.trim().replace(/\n/g,"\t");

take each row's text version of its contents. Firefox puts each cell's text on a new line. i replace that new line with a tab, so that each row is one line, and each cell is separated from the next by a tab. this is essentially data in a tab-delimited format.

Code:

}).join("\n");

now turn the array of strings (tab-separated cell data) into one string, with each row on a new line; just like a table.

**Manvi** · Sep 27, 2011, 05:34 AM

Throwing Error in code

Hi,

When i am using this code in my jsp then it is throwing a error

"Message: Object doesn't support this property or method"

on line
var data=[].slice.call(document.querySelectorAll("table tr")).map(function(row)

because of which my printing is taking more time..

Please help me with this..

Thank You

Announcement

Printing textual data from browser (window.print())

Printing textual data from browser (window.print())

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment