Print DIV content by JQuery

前端未结

关注

 6  851

suppose i have many div\'s in my page but i want to print the content of specific div using jquery. i found there is a plugin for that.

jQuery Print Element

usin

相关标签:

6条回答

佛祖请我去吃肉

2021-02-06 03:59

I prefer this one, I have tested it and its working

https://github.com/jasonday/printThis

$("#mySelector").printThis();

$("#mySelector").printThis({
*      debug: false,              * show the iframe for debugging
*      importCSS: true,           * import page CSS
*      printContainer: true,      * grab outer container as well as the contents of the selector
*      loadCSS: "path/to/my.css", * path to additional css file
*      pageTitle: "",             * add title to print page
*      removeInline: false        * remove all inline styles from print elements
*  });

0 讨论(0)

花落未央

2021-02-06 04:05
You can follow these steps :
1. wrap the div you want to print into another div.
2. set the wrapper div display status to none in css.
3. keep the div you want to print display status as block, anyway it will be hidden as its parent is hidden.
4. simply call $('SelectorToPrint').printElement();
0 讨论(0)
发布评论:

提交评论
- 加载中...
爱一瞬间的悲伤

2021-02-06 04:08
There is a way to use this with a hidden div but you have to work abit more with the printElement() function and css.

Css:
```
#SelectorToPrint{
     display: none;
}
```
Script:
```
  $("#SelectorToPrint").printElement({ printBodyOptions:{styleToAdd:'padding:10px;margin:10px;display:block', classNameToAdd:'WhatYouWant'}})
```
This will override the display: none in the new window you open and the content will be displayed on the print-preview page and the div on you site remains hidden.
0 讨论(0)
发布评论:

提交评论
- 加载中...

礼貌的吻别

2021-02-06 04:09

Here is a JQuery&JavaScript solutions to print div as it styles(with internal and external css)

$(document).ready(function() {
            $("#btnPrint").live("click", function () {//$btnPrint is button which will trigger print
                var divContents = $(".order_summery").html();//div which have to print
                var printWindow = window.open('', '', 'height=700,width=900');
                printWindow.document.write('<html><head><title></title>');
                printWindow.document.write('<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" >');//external styles
                printWindow.document.write('<link rel="stylesheet" href="/css/custom.css" type="text/css"/>');
                printWindow.document.write('</head><body>');
                printWindow.document.write(divContents);
                printWindow.document.write('</body></html>');
                printWindow.document.close();

                printWindow.onload=function(){
                printWindow.focus();                                         
                printWindow.print();
                printWindow.close();
                }
            });
});

This will print your div in new window.

Button to trigger event

<input type="button" id="btnPrint" value="Print This">

0 讨论(0)

梦如初夏

2021-02-06 04:12
your question doesn't sound as if you even tried it yourself, so i shouldn't even think of answering, but: if a hidden div can't be printed with that one line:
```
$('SelectorToPrint').printElement();
```
simply change it to:
```
$('SelectorToPrint').show().printElement();
```
which should make it work in all cases.

for the rest, there's no solution. the plugin will open the print-dialog for you where the user has to choose his printer. you simply can't find out if a printer is attached with javascript (and you (almost) can't print without print-dialog - if you're thinking about that).

NOTE:

The $.browser object has been removed in version 1.9.x of jQuery making this library unsupported.
0 讨论(0)
发布评论:

提交评论
- 加载中...
猫巷女王i

2021-02-06 04:12

try this jquery library, jQuery Print Element

http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/

0 讨论(0)
发布评论:

提交评论
- 加载中...