Open a new javascript window(.open) along with its CSS styling

后端 未结 6 468
佛祖请我去吃肉
佛祖请我去吃肉 2020-11-27 18:50

I\'m trying to get this function to work on the website of a project I\'m working on. The purpose of this function is to only (physically) print the contents of a child div

相关标签:
6条回答
  • 2020-11-27 18:56

    I do something similiar to the above example but found it doesn't work in all browsers. The following was tested with all the major browsers and works for me. (Remember, some styles can be dependent on parent elements, so if your div is nested inside those elements the styles may not look exactly the same in the print window as on your parent page)

    function printWithCss() {
            //Works with Chome, Firefox, IE, Safari
            //Get the HTML of div
            var title = document.title;
            var divElements = document.getElementById('printme').innerHTML;
            var printWindow = window.open("", "_blank", "");
            //open the window
            printWindow.document.open();
            //write the html to the new window, link to css file
            printWindow.document.write('<html><head><title>' + title + '</title><link rel="stylesheet" type="text/css" href="/Css/site-print.css"></head><body>');
            printWindow.document.write(divElements);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            printWindow.focus();
            //The Timeout is ONLY to make Safari work, but it still works with FF, IE & Chrome.
            setTimeout(function() {
                printWindow.print();
                printWindow.close();
            }, 100);
        }
    
    0 讨论(0)
  • 2020-11-27 18:56

    I had the same issue. What I am finding is that it is printing before the css has time to render on the page. What I did to find this was do a setTimeout on the print call and all styling was then showing up in the printed document. If I did not do the timeout I found that the styling was not being picked up in the print call.

    0 讨论(0)
  • 2020-11-27 18:57

    Build a complete HTML page in the opened window and reference your CSS-file there:

    var win = window.open('','printwindow');
    win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="styles.css"></head><body>');
    win.document.write($("#content").html());
    win.document.write('</body></html>');
    win.print();
    win.close();
    
    0 讨论(0)
  • 2020-11-27 18:59

    Just in case any one is trying to make this happen with Angular, please put your CSS file in the assets folder.

    0 讨论(0)
  • 2020-11-27 19:06

    I also had the problem with CSS loading after the page rendering, so solution was to read the css file content and write it to the new document:

        var w = window.open();
        jQuery.get('/styles.css', function (data) {
            w.document.write('<html><head><style>');
            w.document.write(data);
            w.document.write('</style></head><body>');
            w.document.write($('.print-content').html());
            w.document.write('</body></html>');
            w.print();
            w.close();
        });
    
    0 讨论(0)
  • 2020-11-27 19:17

    I wanted to have all the styles from the parent page and print. So I wanted to use all the css links in the HEAD.

    My solution uses jQuery.

    (function print() {
        // getting the tag element I want to print
        // cloning the content so it doesn't get messed
        // remove all the possible scripts that could be embed
        var printContents = $('body').clone().find('script').remove().end().html();
    
        // get all <links> and remove all the <script>'s from the header that could run on the new window
        var allLinks = $('head').clone().find('script').remove().end().html();
    
        // open a new window
        var popupWin = window.open('', '_blank');
        // ready for writing
        popupWin.document.open();
    
        // -webkit-print-color-adjust to keep colors for the printing version
        var keepColors = '<style>body {-webkit-print-color-adjust: exact !important; }</style>';
    
        // writing
        // onload="window.print()" to print straigthaway
        popupWin.document.write('<html><head>' + keepColors + allLinks + '</head><body onload="window.print()">' + printContents + '</body></html>');
    
        // close for writing
        popupWin.document.close();
    })();
    
    0 讨论(0)
提交回复
热议问题