Imprimer le contenu D'un DIV
Quelle est la meilleure façon d'imprimer le contenu D'un DIV?
24 réponses
légères modifications par rapport à la version précédente-testé sur CHROME
function PrintElem(elem)
{
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head><title>' + document.title + '</title>');
mywindow.document.write('</head><body >');
mywindow.document.write('<h1>' + document.title + '</h1>');
mywindow.document.write(document.getElementById(elem).innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}
je pense qu'il y a une meilleure solution. Faites votre div pour imprimer couvrir le document entier, mais seulement quand il est imprimé:
@media print {
.myDivToPrint {
background-color: white;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 18px;
}
}
bien que cela ait été dit par @gmcalab, Si vous utilisez jQuery, vous pouvez utiliser mon plugin printElement.
il y a un échantillon ici , et plus d'informations sur le plugin ici .
l'usage est assez direct vers l'avant, il suffit de saisir un élément avec un sélecteur jQuery et de l'imprimer:
$("myDiv").printElement();
Espère que cela aide!
en utilisant Jquery, utilisez simplement cette fonction:
<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
}
</script>
votre bouton d'impression ressemblera à ceci:
<button id="print" onclick="printContent('id name of your div');" >Print</button>
Edit: si vous avez des données de formulaire que vous devez conserver, clone ne copiera pas cela, donc vous aurez juste besoin de saisir toutes les données de formulaire et de les remplacer après la restauration comme suit:
<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
var enteredtext = $('#text').val();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
$('#text').html(enteredtext);
}
</script>
<textarea id="text"></textarea>
D'ici http://forums.asp.net/t/1261525.aspx
<html>
<head>
<script language="javascript">
function printdiv(printpage)
{
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
</script>
<title>div print</title>
</head>
<body>
//HTML Page
//Other content you wouldn't like to print
<input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print ">
<div id="div_print">
<h1 style="Color:Red">The Div content which you want to print</h1>
</div>
//Other content you wouldn't like to print
//Other content you wouldn't like to print
</body>
</html>
function printdiv(printdivname)
{
var headstr = "<html><head><title>Booking Details</title></head><body>";
var footstr = "</body>";
var newstr = document.getElementById(printdivname).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
cela imprimera la zone div que vous voulez et réglera le contenu comme il était. printdivname est la div à imprimer.
créer une feuille de style d'impression séparée qui cache tous les autres éléments sauf le contenu que vous voulez imprimer. Signalez-le en utilisant 'media="print" lorsque vous le chargez:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
cela vous permet d'avoir une feuille de style complètement différente chargée pour les impressions.
si vous voulez forcer le dialogue d'impression du navigateur à apparaître pour la page, vous pouvez le faire comme ceci au chargement en utilisant JQuery:
$(function() { window.print(); });
ou déclenché hors de tout autre événement que vous voulez comme un utilisateur cliquant sur un bouton.
j'ai utilisé Bill Paetzke réponse à imprimer un div contiennent des images, mais il n'a pas fonctionné avec google chrome
j'ai juste besoin d'ajouter cette ligne myWindow.onload=function(){ pour le faire fonctionner et voici le code complet
<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"> </script>
<script type="text/javascript">
function PrintElem(elem) {
Popup($(elem).html());
}
function Popup(data) {
var myWindow = window.open('', 'my div', 'height=400,width=600');
myWindow.document.write('<html><head><title>my div</title>');
/*optional stylesheet*/ //myWindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
myWindow.document.write('</head><body >');
myWindow.document.write(data);
myWindow.document.write('</body></html>');
myWindow.document.close(); // necessary for IE >= 10
myWindow.onload=function(){ // necessary if the div contain images
myWindow.focus(); // necessary for IE >= 10
myWindow.print();
myWindow.close();
};
}
</script>
</head>
<body>
<div id="myDiv">
This will be printed.
<img src="image.jpg"/>
</div>
<div>
This will not be printed.
</div>
<div id="anotherDiv">
Nor will this.
</div>
<input type="button" value="Print Div" onclick="PrintElem('#myDiv')" />
</body>
</html>
aussi si quelqu'un a juste besoin d'imprimer un div avec id il n'a pas besoin de charger jquery
voici pur code javascript pour le faire
<html>
<head>
<script type="text/javascript">
function PrintDiv(id) {
var data=document.getElementById(id).innerHTML;
var myWindow = window.open('', 'my div', 'height=400,width=600');
myWindow.document.write('<html><head><title>my div</title>');
/*optional stylesheet*/ //myWindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
myWindow.document.write('</head><body >');
myWindow.document.write(data);
myWindow.document.write('</body></html>');
myWindow.document.close(); // necessary for IE >= 10
myWindow.onload=function(){ // necessary if the div contain images
myWindow.focus(); // necessary for IE >= 10
myWindow.print();
myWindow.close();
};
}
</script>
</head>
<body>
<div id="myDiv">
This will be printed.
<img src="image.jpg"/>
</div>
<div>
This will not be printed.
</div>
<div id="anotherDiv">
Nor will this.
</div>
<input type="button" value="Print Div" onclick="PrintDiv('myDiv')" />
</body>
</html>
j'espère que cela peut aider quelqu'un
j'ai écrit un plugin pour aborder ce scénario. J'étais mécontente des plugins là-bas, et j'ai entrepris de faire quelque chose de plus étendu/configurable.
je pense que les solutions proposées jusqu'à présent ont les inconvénients suivants:
- les CSS media query solutions supposent qu'il n'y a qu'une seule div à imprimer.
- les solutions javascript ne fonctionnent que sur certains navigateurs.
- détruire le contenu de la fenêtre mère et recréer qui crée un désordre.
j'ai amélioré les solutions ci-dessus. Voici quelque chose que j'ai testé qui fonctionne très bien avec les avantages suivants.
- fonctionne sur tous les navigateurs, y compris IE, Chrome, Safari et firefox.
- ne détruit pas et ne recharge pas la fenêtre parent.
- peut imprimer N'importe quel nombre de DIV dans une page.
- utilise des gabarits html pour éviter la concaténation de chaîne sujette à erreur.
points clés à noter:
- doivent avoir un onload="window.print () " sur la fenêtre nouvellement créée.
- N'appelez pas targetwindow.close () ou targetwindow.print() de l'objet parent.
- assurez-vous de faire targetwindow.document.close() et de la cible.focus()
- j'utilise jquery mais vous pouvez faire la même technique en utilisant le javascript simple aussi bien.
- vous pouvez le voir en action ici http://math.outils//table de multiplication . Vous pouvez imprimer chaque tableau séparément, en cliquant sur le bouton imprimer sur l'en-tête de la boîte.
<script id="print-header" type="text/x-jquery-tmpl">
<html>
<header>
<title>Printing Para {num}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body {
max-width: 300px;
}
</style>
</header>
<body onload="window.print()">
<h2>Printing Para {num} </h2>
<h4>http://math.tools</h4>
</script>
<script id="print-footer" type="text/x-jquery-tmpl">
</body>
</html>
</script>
<script>
$('.printthis').click(function() {
num = $(this).attr("data-id");
w = window.open();
w.document.write(
$("#print-header").html().replace("{num}",num) +
$("#para-" + num).html() +
$("#print-footer").html()
);
w.document.close();
w.focus();
//w.print(); Don't do this otherwise chrome won't work. Look at the onload on the body of the newly created window.
///w.close(); Don't do this otherwise chrome won't work
});
</script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="btn printthis" data-id="1" href="#" title="Print Para 1"><i class="fa fa-print"></i> Print Para 1</a>
<a class="btn printthis" data-id="2" href="#" title="Print Para 2"><i class="fa fa-print"></i> Print Para 2</a>
<p class="para" id="para-1">
Para 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="para" id="para-2">
Para 2 : Lorem 2 ipsum 2 dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
la solution acceptée ne fonctionnait pas. Chrome imprimait une page vierge parce qu'il ne chargeait pas l'image à temps. Cette approche fonctionne:
Edit: Il semble que la solution retenue a été modifié après mon post. Pourquoi le downvote? Cette solution fonctionne aussi.
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
w = window.open();
w.document.write(printContents);
w.document.write('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');
w.document.close(); // necessary for IE >= 10
w.focus(); // necessary for IE >= 10
return true;
}
je sais que c'est une vieille question, mais j'ai résolu ce problème w jQuery.
function printContents(id)
{
var contents = $("#"+id).html();
if ($("#printDiv").length == 0)
{
var printDiv = null;
printDiv = document.createElement('div');
printDiv.setAttribute('id','printDiv');
printDiv.setAttribute('class','printable');
$(printDiv).appendTo('body');
}
$("#printDiv").html(contents);
window.print();
$("#printDiv").remove();
}
CSS
@media print {
.non-printable, .fancybox-outer { display: none; }
.printable, #printDiv {
display: block;
font-size: 26pt;
}
}
bien que @BC answer soit le meilleur pour imprimer une seule page.
mais pour imprimer plusieurs pages de format A4 en même temps avec ctrl+P solution suivante peut aider.
@media print{
html *{
height:0px!important;
width:0px !important;
margin: 0px !important;
padding: 0px !important;
min-height: 0px !important;
line-height: 0px !important;
overflow: visible !important;
visibility: hidden ;
}
/*assing myPagesClass to every div you want to print on single separate A4 page*/
body .myPagesClass {
z-index: 100 !important;
visibility: visible !important;
position: relative !important;
display: block !important;
background-color: lightgray !important;
height: 297mm !important;
width: 211mm !important;
position: relative !important;
padding: 0px;
top: 0 !important;
left: 0 !important;
margin: 0 !important;
orphans: 0!important;
widows: 0!important;
overflow: visible !important;
page-break-after: always;
}
@page{
size: A4;
margin: 0mm ;
orphans: 0!important;
widows: 0!important;
}}
- ouvrir une nouvelle fenêtre
- ouvrir l'objet document de la nouvelle fenêtre et y écrire un document simple ne contenant rien mais le div que vous avez et l'en-tête html nécessaire etc - Vous pouvez également vouloir avoir le document tirer dans une feuille de style, en fonction de votre contenu est
- mettez un script dans la nouvelle page pour appeler la fenêtre.print ()
- déclencher le script
Voici mon plugin d'impression jquery
(function ($) {
$.fn.printme = function () {
return this.each(function () {
var container = $(this);
var hidden_IFrame = $('<iframe></iframe>').attr({
width: '1px',
height: '1px',
display: 'none'
}).appendTo(container);
var myIframe = hidden_IFrame.get(0);
var script_tag = myIframe.contentWindow.document.createElement("script");
script_tag.type = "text/javascript";
script = myIframe.contentWindow.document.createTextNode('function Print(){ window.print(); }');
script_tag.appendChild(script);
myIframe.contentWindow.document.body.innerHTML = container.html();
myIframe.contentWindow.document.body.appendChild(script_tag);
myIframe.contentWindow.Print();
hidden_IFrame.remove();
});
};
})(jQuery);
À l'Opéra, essayez:
print_win.document.write('</body></html>');
print_win.document.close(); // This bit is important
print_win.print();
print_win.close();
Voici une solution IFrame qui fonctionne pour IE et Chrome:
function printHTML(htmlString) {
var newIframe = document.createElement('iframe');
newIframe.width = '1px';
newIframe.height = '1px';
newIframe.src = 'about:blank';
// for IE wait for the IFrame to load so we can access contentWindow.document.body
newIframe.onload = function() {
var script_tag = newIframe.contentWindow.document.createElement("script");
script_tag.type = "text/javascript";
var script = newIframe.contentWindow.document.createTextNode('function Print(){ window.focus(); window.print(); }');
script_tag.appendChild(script);
newIframe.contentWindow.document.body.innerHTML = htmlString;
newIframe.contentWindow.document.body.appendChild(script_tag);
// for chrome, a timeout for loading large amounts of content
setTimeout(function() {
newIframe.contentWindow.Print();
newIframe.contentWindow.document.body.removeChild(script_tag);
newIframe.parentElement.removeChild(newIframe);
}, 200);
};
document.body.appendChild(newIframe);
}
j'ai modifié @BillPaetski answer pour utiliser querySelector, ajouter des CSS optionnels, supprimer l'étiquette H1 forcée et faire le titre optionnellement spécifié ou tiré de la fenêtre. De plus, il ne s'auto-imprime plus et expose les internes de sorte qu'ils peuvent être commutés dans la fonction wrapper ou comme vous le souhaitez.
les deux seules variables privées sont tmpWindow et tmpDoc bien que je pense que le titre, CSS et l'accès à elem peuvent varier, il faut supposer que tous les arguments de fonction sont privés.
Code:function PrintElem(elem, title, css) {
var tmpWindow = window.open('', 'PRINT', 'height=400,width=600');
var tmpDoc = tmpWindow.document;
title = title || document.title;
css = css || "";
this.setTitle = function(newTitle) {
title = newTitle || document.title;
};
this.setCSS = function(newCSS) {
css = newCSS || "";
};
this.basicHtml5 = function(innerHTML) {
return '<!doctype html><html>'+(innerHTML || "")+'</html>';
};
this.htmlHead = function(innerHTML) {
return '<head>'+(innerHTML || "")+'</head>';
};
this.htmlTitle = function(title) {
return '<title>'+(title || "")+'</title>';
};
this.styleTag = function(innerHTML) {
return '<style>'+(innerHTML || "")+'</style>';
};
this.htmlBody = function(innerHTML) {
return '<body>'+(innerHTML || "")+'</body>';
};
this.build = function() {
tmpDoc.write(
this.basicHtml5(
this.htmlHead(
this.htmlTitle(title) + this.styleTag(css)
) + this.htmlBody(
document.querySelector(elem).innerHTML
)
)
);
tmpDoc.close(); // necessary for IE >= 10
};
this.print = function() {
tmpWindow.focus(); // necessary for IE >= 10*/
tmpWindow.print();
tmpWindow.close();
};
this.build();
return this;
}
DOMPrinter = PrintElem('#app-container');
DOMPrinter.print();
si vous voulez avoir tous les styles du document original (y compris les styles inline), vous pouvez utiliser cette approche.
- copier le document complet
- remplacez le corps par l'élément que vous voulez imprimer.
mise en Œuvre:
class PrintUtil {
static printDiv(elementId) {
let printElement = document.getElementById(elementId);
var printWindow = window.open('', 'PRINT');
printWindow.document.write(document.documentElement.innerHTML);
setTimeout(() => { // Needed for large documents
printWindow.document.body.style.margin = '0 0';
printWindow.document.body.innerHTML = printElement.outerHTML;
printWindow.document.close(); // necessary for IE >= 10
printWindow.focus(); // necessary for IE >= 10*/
printWindow.print();
printWindow.close();
}, 1000)
}
}
a créé quelque chose de générique à utiliser sur n'importe quel élément HTML
HTMLElement.prototype.printMe = printMe;
function printMe(query){
var myframe = document.createElement('IFRAME');
myframe.domain = document.domain;
myframe.style.position = "absolute";
myframe.style.top = "-10000px";
document.body.appendChild(myframe);
myframe.contentDocument.write(this.innerHTML) ;
setTimeout(function(){
myframe.focus();
myframe.contentWindow.print();
myframe.parentNode.removeChild(myframe) ;// remove frame
},3000); // wait for images to load inside iframe
window.focus();
}
//usage
document.getElementById('xyz').printMe();
document.getElementsByClassName('xyz')[0].printMe();
Espérons que cette aide.
Note: cela fonctionne avec les sites activés par jQuery seulement
C'est très simple avec ce truc génial. Il a fonctionné pour moi dans Google Chrome navigateur. Firefox ne vous permettra pas d'imprimer en PDF sans plugin.
- d'abord, ouvrez l'inspecteur en utilisant (Ctrl + Shift + I) / (Cmd + Option + I).
- tapez ce code dans la console
var jq = document.createElement('script');
jq.src = "https://cdnjs.cloudflare.com/ajax/libs/jQuery.print/1.5.1/jQuery.print.min.js";
document.getElementsByTagName('body')[0].appendChild(jq)
$("#myDivWithStyles").print() // Replace ID with yours
- il lance la boîte de dialogue d'impression. Prenez une impression physique ou enregistrez-la au format PDF(dans chrome). Fait!
la logique est simple. Nous sommes en train de créer une nouvelle étiquette de script et de la fixer devant l'étiquette de fermeture du corps. Nous avons injecté une extension jQuery print dans le HTML. Changez myDivWithStyles avec votre propre ID Div. Maintenant, il faut s'occuper de la préparation d'une fenêtre virtuelle imprimable.
essayez-le sur n'importe quel site. Seule la mise en garde est parfois trickily écrit CSS peut causer manquant de styles. Mais nous obtenons le contenu la plupart du temps.
le code ci-dessous copie tous les noeuds pertinents qui sont ciblés par le sélecteur de requête, copie sur leurs styles tels que vus à l'écran, car de nombreux éléments parent utilisés pour cibler les sélecteurs css seront manquants. Cela provoque un peu de retard s'il y a beaucoup de noeuds enfants avec beaucoup de styles.
Idéalement, vous auriez une feuille de style d'impression prête, mais c'est pour les cas d'utilisation où il n'y a pas de feuille de style d'impression à insérer et vous souhaitez imprimer comme vu à l'écran.
si vous copiez les éléments ci-dessous dans la console du navigateur sur cette page, il imprimera tous les extraits de code sur cette page.
+function() {
/**
* copied from https://stackoverflow.com/questions/19784064/set-javascript-computed-style-from-one-element-to-another
* @author Adi Darachi https://stackoverflow.com/users/2318881/adi-darachi
*/
var copyComputedStyle = function(from,to){
var computed_style_object = false;
//trying to figure out which style object we need to use depense on the browser support
//so we try until we have one
computed_style_object = from.currentStyle || document.defaultView.getComputedStyle(from,null);
//if the browser dose not support both methods we will return null
if(!computed_style_object) return null;
var stylePropertyValid = function(name,value){
//checking that the value is not a undefined
return typeof value !== 'undefined' &&
//checking that the value is not a object
typeof value !== 'object' &&
//checking that the value is not a function
typeof value !== 'function' &&
//checking that we dosent have empty string
value.length > 0 &&
//checking that the property is not int index ( happens on some browser
value != parseInt(value)
};
//we iterating the computed style object and compy the style props and the values
for(property in computed_style_object)
{
//checking if the property and value we get are valid sinse browser have different implementations
if(stylePropertyValid(property,computed_style_object[property]))
{
//applying the style property to the target element
to.style[property] = computed_style_object[property];
}
}
};
// Copy over all relevant styles to preserve styling, work the way down the children tree.
var buildChild = function(masterList, childList) {
for(c=0; c<masterList.length; c++) {
var master = masterList[c];
var child = childList[c];
copyComputedStyle(master, child);
if(master.children && master.children.length > 0) {
buildChild(master.children, child.children);
}
}
}
/** select elements to print with query selector **/
var printSelection = function(querySelector) {
// Create an iframe to make sure everything is clean and ordered.
var iframe = document.createElement('iframe');
// Give it enough dimension so you can visually check when modifying.
iframe.width = document.width;
iframe.height = document.height;
// Add it to the current document to be sure it has the internal objects set up.
document.body.append(iframe);
var nodes = document.querySelectorAll(querySelector);
if(!nodes || nodes.length == 0) {
console.error('Printing Faillure: Nothing to print. Please check your querySelector');
return;
}
for(i=0; i < nodes.length; i++) {
// Get the node you wish to print.
var origNode = nodes[i];
// Clone it and all it's children
var node = origNode.cloneNode(true);
// Copy the base style.
copyComputedStyle(origNode, node);
if(origNode.children && origNode.children.length > 0) {
buildChild(origNode.children, node.children);
}
// Add the styled clone to the iframe. using contentWindow.document since it seems the be the most widely supported version.
iframe.contentWindow.document.body.append(node);
}
// Print the window
iframe.contentWindow.print();
// Give the browser a second to gather the data then remove the iframe.
window.setTimeout(function() {iframe.parentNode.removeChild(iframe)}, 1000);
}
window.printSelection = printSelection;
}();
printSelection('.default.prettyprint.prettyprinted')
même que la meilleure réponse, juste au cas où vous devez imprimer l'image comme je l'ai fait:
dans le cas où vous voulez imprimer l'image:
function printElem(elem)
{
Popup(jQuery(elem).attr('src'));
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
mywindow.document.write('</head><body >');
mywindow.document.write('<img src="'+data+'" />');
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
la meilleure façon de le faire serait de soumettre le contenu du div au serveur et d'ouvrir une nouvelle fenêtre où le serveur pourrait mettre ces contenus dans la nouvelle fenêtre.
si ce n'est pas une option, vous pouvez essayer d'utiliser un langage côté client comme javascript pour tout cacher sur la page sauf que div et ensuite imprimer la page...