locked
How to maintain Css Settings when printing using JavaScript RRS feed

  • Question

  • User-797751191 posted

    Hi

       I have below code . It removes Css settings . I want to keep CSS settings intact when printing. I have Css on page itself

    <script>
            function printTbl() {
            var TableToPrint = document.getElementById('myt');
            newWin = window.open("");
            newWin.document.write(TableToPrint.outerHTML);
            newWin.print();
            newWin.close();
        }

    Thanks

    Friday, June 14, 2019 7:44 AM

All replies

  • User753101303 posted

    Hi,

    The root cause is likely that you copy HTML markup to a new window and so all styles not defined locally are not carried forward to your new window.

    You could try to write the same <link rel="stylesheet" href="site.css"> found in your main page so that your HTML markup can still use the same styles (you could still have issues if some styles are inherited from outer HTML elements that are not transferred to your printing only window).

    I see this approach being used quite often but I would rather use https://benfrain.com/create-print-styles-using-css3-media-queries/ which seems cleaner to me...

    Friday, June 14, 2019 12:45 PM
  • User-1174608757 posted

    Hi jsshivalik,

    According to your code, since you are writing out the inner html of your div and not the actual div tag,so it wouldn't keep the css .I suggest that you could write as below:

    function PrintContent()
    {
        var e = document.createElement('div');
        e.id = 'myt';
        e.innerHTML = $('#myt').html();
      //t is the id of div which is used to insert content document.getElementById('t').appendChild(e); }

    Here is the link,I hope it could help you.

    https://stackoverflow.com/questions/4656073/print-div-with-javascript-and-preserve-style

    Best Regards

    Wei

    Monday, June 17, 2019 8:54 AM