printing div content with css applied

后端未结

关注

 8  819

I am working on a project and I want to print div content.The code which I am using is fulfilling my requirements,but I am getting simple output without Css applied to it an

相关标签:

8条回答

生来不讨喜

2020-12-28 17:21

Pass the div to be printed, as an input to print function,

<input type='button' id='btn-print' value='Print Receipt' onclick="printDiv('#invoice-box-id');" />

Then clone the element,

function printDiv(elem)
{
   renderMe($('<div/>').append($(elem).clone()).html());
}

Pass the cloned element to render, include the stylesheet in it.

function renderMe(data) {
    var mywindow = window.open('', 'invoice-box', 'height=1000,width=1000');
    mywindow.document.write('<html><head><title>invoice-box</title>');
    mywindow.document.write('<link rel="stylesheet" href="printstyle.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');


    setTimeout(function () {
    mywindow.print();
    mywindow.close();
    }, 1000)
    return true;
}

If innerHTML is passed, it will ignore the styles.

0 讨论(0)

[愿得一人]

2020-12-28 17:24

If you are using image as background image of site you will definitely not get it, while printing browser disables all background images.

Try to use img tags instead. Also make sure in your browser disable images option is not checked.

0 讨论(0)
发布评论:

提交评论
- 加载中...
刺人心

2020-12-28 17:25
You need to change the css property media to print. Add new line to your function createPopup() as below you attached your css:
```
mywindow.document.write( "<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\" media=\"print\"/>" );
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

野趣味

2020-12-28 17:27

I combined and had this working perfectly:

function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head>');
    mywindow.document.write("<link href=\"../lib/bootstrap/css/bootstrap.min.css\" rel=\"stylesheet\"><link href=\"../css/core.css\" rel=\"stylesheet\"><link href=\"../css/components.css\" rel=\"stylesheet\"><link href=\"../css/icons.css\" rel=\"stylesheet\">")
    mywindow.document.write('</head><body >');
    mywindow.document.write(document.getElementById('printit').innerHTML);
    mywindow.document.write('</body></html>');

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/


    setTimeout(function () {
    mywindow.print();
    mywindow.close();
    }, 1000)
    return true;
}

0 讨论(0)

后悔当初

2020-12-28 17:31

My suggestion is to add to the <body> tag some javascript to do the printing and closing.

<body onload="window.print();window.close()">

Doing this will always allow enough time for the document and the CSS to load before the print window opens, and then closes the window immediately after the print dialogue closes.

0 讨论(0)
发布评论:

提交评论
- 加载中...

刺人心

2020-12-28 17:33

       function printpage() {
           var getpanel = document.getElementById("<%= Panel1.ClientID%>");
           var MainWindow = window.open('', '', 'height=500,width=800');
           MainWindow.document.write('<html><head><title></title>');
           MainWindow.document.write("<link rel=\"stylesheet\" href=\"styles/Print.css\" type=\"text/css\"/>");
           MainWindow.document.write('</head><body onload="window.print();window.close()">');
           MainWindow.document.write(getpanel.innerHTML);
           MainWindow.document.write('</body></html>');
           MainWindow.document.close();
           setTimeout(function () {
               MainWindow.print();
           }, 500)
           return false;

}

0 讨论(0)

1 2 下一页