1

I want to display a certain text (an ID) on each page printed by the browser, like a header in a Word document. From looking around there are a multitude of hacks around, which seem not to be working for all browsers and web sites (How to use HTML to print header and footer on every printed page of a document?).

I was thinking I could change the title of the web page before printing, to display the ID in the auto header added by the browser, and after printing reset it to its original title (the ID should not be there in the title upon leaving the page, to be saved by browser history). It is possible to listen to print events in all browsers: https://stackoverflow.com/a/3619706/198953 however when trying it out in chrome with the following code:

        var mqList = window.matchMedia("print");
        mqList.addListener(function (mql) {
            if (mql.matches)
                document.title = "a certain text";
            else
                document.title = origTitle;
        });

the page's title is updated after the print preview shows. Now, I can set the title on entering the page to the ID, but I cannot have the ID to be saved by browser history. Are there no fool-proof solution to my problem?

Question: How can I display a specific text on each page printed by the browser, without it being saved in browser history?

Community
  • 1
  • 1
cederlof
  • 7,206
  • 4
  • 45
  • 62
  • 1
    Question: are you sure that the title is going to be printed? It's fairly common for browsers to allow users to opt out of printing page metadata (title, date, URL). Maybe you'd be better served with something *inside* the document's body, which could be displayed directly by a @media CSS rule. – Touffy Oct 06 '15 at 09:25
  • @Touffy it is OK for the user to opt out of the metada being printed, however, the default setting is to show it, and that is enough. – cederlof Oct 06 '15 at 10:25
  • 1
    Have you tried http://www.w3.org/TR/css3-page/#populating-margin-boxes ? I don't expect it to be implemented much, but it looks promising. – Touffy Oct 06 '15 at 12:17
  • Thanks, the support for browsers seem variable, however might be good for the future! – cederlof Oct 06 '15 at 12:23

3 Answers3

1

I would look at using a print media selector, as Touffy just mentioned.

You could have a block of text that you can alter, but would only display for printer media type.

This question has the CSS you need and a small example:

Element visible only on print page

Community
  • 1
  • 1
Russ Clarke
  • 17,511
  • 4
  • 41
  • 45
  • Thanks, I'm using media queries for printing, however I need a solution where the text is displayed in the header for *each* printed page in a batch. – cederlof Oct 06 '15 at 10:24
  • Can you not simply implement this CSS into a new element in the page header? – Russ Clarke Oct 06 '15 at 11:14
  • I have a site-page which when printed will become three printed pages (too long for one). There are no page header that will print for each page? – cederlof Oct 06 '15 at 11:25
0

You can simply set the title of document by accessing the title property from document object and set it to your new value. This is ref

document.title = "Some new title text";

Source: W3Schools.com

shivam mahendru
  • 11
  • 1
0

To get a page title in the place of about:blank when printing via window.print(): Add the following lines:

document.write('<head>' +
   '<title>' +
   'My Title' +
   '</title>'+ ...)
Patricode
  • 1
  • 2