Bootstrap style no applying to print

Question

I have the following code to print a table that is held by my application:

    var elementToPrint = this.mainTable.get(0);

    newWin = window.open("");
    newWin.document.write('<html><head><title>' + elementToPrint.caption + '</title>' +
                        '</head><body class=\'visible-print\'>');
    newWin.document.write(elementToPrint.outerHTML);
    newWin.print();
    newWin.close();

Where this.mainTable is a jQuery object.

At my common page (_Layout.cshtml) I have:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="UTF-8" />

    <title>MyApp</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" media="all">
    <link href="@Url.Content("~/Content/bootstrap-theme.min.css")" rel="stylesheet" media="all">
</head>

The print routine runs fine, except that it looses all styling, printing plain text with unformatted data (side by side data).

I need to keep the original bootstrap layout (colors, borders, strips, etc.). What please needs to be changed...

Thanks,

Tharaka · Accepted Answer · 2014-03-27T01:50:13.467

1

When you create a new window, it essentially creates a new html page which DOES NOT inherit from your master page. Thus the new html page will not have your bootstrap css references.

You should be adding these bootstrap css references while you document.write the as follows,

newWin.document.write('<html><head><title>' + elementToPrint.caption + '</title>');
newWin.document.write('<link href="Your-Path/bootstrap.min.css" rel="stylesheet" />');
newWin.document.write('<link href="Your-Path/bootstrap-theme.min.css" rel="stylesheet" />');
newWin.document.write('</head><body class=\'visible-print\'>');

UPDATE Standard twitter-bootstrap does contain css rules for media type Print as follows, which removes any screen css rules,

@media print {
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

You need to get a custom bootstrap, with out "Print media styles" (Recomended) OR manually remove these @media print.

Here is a Plunker that shows Printing with Bootstrap CSS styles

edited Mar 27 '14 at 01:50

answered Mar 25 '14 at 01:13

Tharaka

2,355
1
20
22

Are you sure that the path to the css files are correct? – Tharaka Mar 25 '14 at 01:47
Ehm, would you be able to add 'media' attribute to the links and check? – Tharaka Mar 25 '14 at 02:30
Yes.. Not working. Is there any way to check if path is correct ? There are not error being set, even in the browser debug F12. – Mendes Mar 25 '14 at 13:08
Okay, the bootstrap has @Print media attr. and it starts as follows, print { * { color: #000 !important; text-shadow: none !important; background: transparent !important; box-shadow: none !important; } You will need to get rid of these if you want the colors in the print. You can get a custom bootstrap without these 'print' from http://getbootstrap.com/customize/?id=9775022 – Tharaka Mar 26 '14 at 01:15
How did you go with fixing your problem. If you found my answer is correct and helpful could please mark this as the answer as explained here meta.stackoverflow.com/a/5235 – Tharaka Mar 28 '14 at 00:06

Bootstrap style no applying to print

1 Answers1

Linked