Роздрукуйте вміст DIV


336

Який найкращий спосіб надрукувати вміст DIV?


Спробуйте елемент друку тут
Gabe

1
Що ви маєте на увазі під друком? Як у фізичному принтері?
Юрій Факторович

"Друк", як у принтері? чи до документа?
Ед Схембор

Я знайшов найкращий плагін на даний момент,
MaxI

3
Так само як орієнтир для тих, хто намагається знайти рішення цього питання про друк діва. Я вважаю наступну відповідь дуже корисною: stackoverflow.com/a/7532581/405117
Вікрам

Відповіді:


518

Невеликі зміни порівняно з попередньою версією - тестовано на 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;
}

8
Це швидке рішення. Ідеальне рішення - використовувати окремий CSS для друку. Можливо, ви можете детальніше розглянути деталі (вимоги) вашої проблеми.
Білл Паетке

6
Ви можете посилатися на таблицю стилів у спливаючому вікні. Додайте ще один рядок коду між тегами <head>: mywindow.document.write ('<link rel = "stylesheet" href = "main.css" type = "text / css" />');
Білл Паетке

5
@Rahil змінити це на це: mywindow.document.close (); mywindow.focus (); mywindow.print (); mywindow.close ();
ROFLwTIME

3
^ додати newwindow.focus (); щоб увімкнути крос-браузер друку.
JackMahoney

7
Іноді трапляється, якщо не вдалося завантажити попередній перегляд друку, можливо, коли вміст для друку досить великий (я помітив це лише в Chrome, тоді як ця сторінка друкує досконалість у Firefox, однак я не виключаю, що це може статися і в Firefox чи інших браузерах). Найкращий спосіб, який я знайшов, - це запустити друк (і закрити) тільки після завантаження Windows. Отже після: mywindow.document.write(data);Додайте це: mywindow.document.write('<script type="text/javascript">$(window).load(function() { window.print(); window.close(); });</script>');І видаліть: mywindow.print();іmywindow.close();
Фабій

164

Я думаю, що є краще рішення. Зробіть свій div, щоб надрукувати покриття всього документа, але лише тоді, коли він надрукований:

@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;
    }
}

Ідеально, набагато приємніше, ніж спливаюче вікно.
GreenWebDev

5
На жаль, він не буде працювати в IE так , як очікувалося, побачимо: stackoverflow.com/questions/975129 / ...
jarek.jpa

16
Вміст, який повинен переповнюватися на кілька сторінок, схоже, врізається в Chrome.
Ізмаїл Смирнов

На IE вам потрібно приховати решту документа. Змінившись вище, буде працювати: @media print {body * {display: none; } .myDivToPrint {display: block; фоновий колір: білий; висота: 100%; ширина: 100%; положення: фіксований; верх: 0; зліва: 0; маржа: 0; підкладка: 15px; розмір шрифту: 14px; лінія-висота: 18px; }}
RonnBlack

2
Можливо, вам потрібно буде поставити z-індекс: 9999999; якщо у вас інші елементи розташовані вище.
Адам М.

43

Хоча це сказав @gabe , Якщо ви використовуєте jQuery, ви можете використовувати мій printElementплагін.

Там є зразок тут , і більше інформації про плагін тут .

Використання досить прямо вперед, просто захопіть елемент за допомогою селектора jQuery і роздрукуйте його:

$("#myDiv").printElement();

Я сподіваюся, що це допомагає!


14
Через 8 років це призведе до "a.browser не визначено", оскільки виклик .browser був видалений у jquery 1.9
KingsInnerSoul

1
@KingsInnerSoul не будь таким грубим з користувачами jQuery, ці часи для них досить суворі; p
Олександр Дабрікурт

22

Використовуючи Jquery, просто використовуйте цю функцію:

<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
}
</script>

Ваша кнопка друку буде виглядати приблизно так:

<button id="print" onclick="printContent('id name of your div');" >Print</button>

Редагувати: Якщо у вас є дані форми, які вам потрібно зберегти, клон не копіює їх, тому вам просто потрібно захопити всі дані форми та замінити їх після відновлення таким чином:

<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>

$ ('body'). html (відновлення сторінки); не працюватиме, оскільки на той час немає елемента тіла. тому краще буде замінити його на location.reload ();
Налагоджувач

Ні. Якщо ви перезавантажите сторінку, ви видалите будь-яку інформацію у формах або будь-які інші налаштування, які можуть знадобитися там. Це прекрасно працює. Якщо ви знайдете час для перегляду коду, ви побачите, що для відновлення вар НЕ є вся інформація про сторінку для заміни. Перестаньте намагатися редагувати мій код і або перевіряйте його на собі, або вивчайте, що робить кожна з частин функції.
Gary Hayes

Це краще. Він включає дизайн сторінки під час друку на відміну від тих, що були згадані вище, де мені ще потрібно поставити css-посилання із заголовка тощо. Дякую!
Хорц

шлях, який ви пройшли el, жахливий, тим більше, що використовуєте jQ. Набагато краще просто пройти selectorта позбутися жорсткого коду#
RozzA

Я завжди використовував цей метод сьогодні. Я помітив, що він не працює належним чином на пристрої Android (Google Chrome). Область для друку сторінки щоразу змінюється і містить деякі додаткові частини el. Я думаю, що команда друку надсилається при відновленні тіла.
Алі Шейхпур

18

Звідси 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>

1
потрібна модифікація, щоб розділити footerStr на 2 частини. тому що brwoser використовує "</body>" як основний кінець поточної сторінки. var footstr1 = "</"; var footstr2 = "тіло>"; var footerstr = footstr1 + footstr12;
mirzaei

13

Я використовував Bill Paetzkeвідповідь, щоб надрукувати зображення, що містять зображення, але це не працює з Google Chrome

Мені просто потрібно було додати цей рядок, myWindow.onload=function(){щоб він працював, і ось повний код

<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>

також якщо комусь просто потрібно надрукувати div з id, йому не потрібно завантажувати jquery

ось чистий код JavaScript для цього

<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>

Я сподіваюся, що це може комусь допомогти


Це працювало для мене! Верблюд мене вкусив, хоча в оригінальній відповіді використовується "mywindow" vs. "myWindow". Дякую!
опкод

12
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;
}

Це надрукує потрібну divобласть та поверне вміст таким, яким він був. printdivnameце divдрук.


потрібна модифікація, щоб розділити footerStr на 2 частини. тому що brwoser використовує "</body>" як основний кінець поточної сторінки. var footstr1 = "</"; var footstr2 = "тіло>"; var footerstr = footstr1 + footstr12;
mirzaei

Це геніально! Але так, вам потрібен хак з mirzaei, інакше, якщо тег розбивається на тезі, і ви отримаєте порушене форматування. З хаком це чудово працює! Ви також можете додати власну внутрішню обгортку, щоб полегшити особливі стилі друку. Це має бути прийнятою відповіддю.
користувач2662680

9

Створіть окрему таблицю стилів друку, яка приховує всі інші елементи, крім вмісту, який ви бажаєте надрукувати. Позначте його, використовуючи 'media="print"під час завантаження:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Це дозволяє завантажувати для друку абсолютно іншу таблицю стилів.

Якщо ви хочете змусити діалогове вікно браузера для друку для сторінки, ви можете зробити це так при завантаженні за допомогою JQuery:

$(function() { window.print(); });

або викликає будь-яку іншу подію, яку ви хочете, наприклад, користувач натискає кнопку.


2
Так, це теж спрацювало б; важко - ну, неможливо - точно знати, який сценарій.
Pointy

Я згоден, що окремий CSS - ідеальне рішення. І скопіювати вміст div у нове вікно - швидке рішення.
Білл Паетке

9

Я думаю, що запропоновані рішення мають такі недоліки:

  1. Рішення для запитів медіа CSS припускають, що для друку існує лише одна поділка.
  2. Рішення javascript працюють лише у певних браузерах.
  3. Знищення вмісту батьківського вікна та відтворення, що створює безлад.

Я покращив рішення вище. Ось те, що я перевірив, працює дуже добре із наступними перевагами.

  1. Працює у всіх браузерах, включаючи IE, Chrome, Safari та firefox.
  2. Не знищує та не завантажує батьківське вікно.
  3. Можна надрукувати будь-яку кількість DIV на сторінці.
  4. Використовує HTML-шаблони, щоб уникнути об'єднання рядків, схильних до помилок.

Основні моменти, які слід зазначити:

  1. У новоствореному вікні має бути onload = "window.print ()".
  2. Не дзвоніть на батьківщину targetwindow.close () або targetwindow.print ().
  3. Переконайтесь, що ви робите targetwindow.document.close () та target.focus ()
  4. Я використовую jquery, але ви можете виконати ту саму техніку, використовуючи і звичайний javascript.
  5. Ви можете побачити це в дії тут http://math.tools/table/multiplication . Ви можете надрукувати кожну таблицю окремо, натиснувши кнопку друку на заголовку поля.

<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>
  


Це було чудово, і крос-браузер працював набагато краще, ніж прийняті результати!
dama_do_bling

7

Я написав плагін для вирішення цього сценарію. Я був незадоволений плагінами там і вирішив зробити щось більш масштабне / налаштоване.

https://github.com/jasonday/printЦе


1
Велике спасибі за вашу наполегливу працю Джейсон ..... !! Дійсно буду використовувати в моїх більше проектах. Який розум дує плагін людина ...... Speechless .....

6

Прийняте рішення не працювало. Chrome друкував порожню сторінку, оскільки вчасно не завантажував зображення. Цей підхід працює:

Редагувати: Схоже, прийняте рішення було змінено після моєї публікації. Чому потік? Це рішення також працює.

    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;
    }

4

Я знаю, що це старе питання, але я вирішив цю проблему в 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;
    }
  }

3

Хоча відповідь @BC найкраще було надрукувати одну сторінку.

Але для друку декількох сторінок формату A4 одночасно за допомогою ctrl + P може допомогти наступне рішення.

@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;
}}

2
  • Відкрийте нове вікно
  • Відкрийте об'єкт документа у новому вікні та напишіть у нього простий документ, що не містить нічого, крім діла, який у вас є, та необхідного заголовка html тощо. Ви також можете захотіти, щоб документ витягнути у таблицю стилів, залежно від вмісту
  • Поставте сценарій на нову сторінку для виклику window.print ()
  • Запустіть сценарій

2

Ось мій плагін для друку 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);

2

Якщо ви хочете мати всі стилі з оригінального документа (включаючи вбудовані стилі), ви можете використовувати цей підхід.

  1. Скопіюйте повний документ
  2. Замініть корпус елементом, який ви хочете роздрукувати.

Впровадження:

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)
  }   
}

2
Я не знаю, що це найкраще рішення, але воно спрацювало чудово. Дякую!
BRogers

2

Примітка. Це працює лише на сайтах з підтримкою jQuery

З цим крутим трюком дуже просто. Це працювало для мене в браузері Google Chrome . Firefox не дозволяє друкувати у PDF без плагіна.

  1. Спочатку відкрийте інспектор за допомогою (Ctrl + Shift + I) / (Cmd + Option + I).
  2. Введіть цей код у консолі:

var jqchild = document.createElement('script');
jqchild.src = "https://cdnjs.cloudflare.com/ajax/libs/jQuery.print/1.5.1/jQuery.print.min.js";
document.getElementsByTagName('body')[0].appendChild(jqchild);
$("#myDivWithStyles").print(); // Replace ID with yours
  1. Він запускає діалогове вікно друку. Візьміть фізичний друк або збережіть його у PDF (у хромі). Готово!

Логіка проста. Ми створюємо новий тег скрипту і прикріплюємо його перед закритим тегом тіла. Ми ввели розширення друку jQuery у HTML. Змініть myDivWithStyles за допомогою власного ідентифікатора Div tag. Тепер потрібно піклуватися про підготовку віртуального вікна для друку.

Спробуйте це на будь-якому сайті. Тільки застереження, яке іноді хитро написане CSS, може спричинити відсутність стилів. Але ми отримуємо контент більшість разів.


1

В Opera спробуйте:

    print_win.document.write('</body></html>');
    print_win.document.close(); // This bit is important
    print_win.print();
    print_win.close();

1

Ось рішення IFrame, яке працює для IE та 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);
}

1

Створено щось загальне для використання на будь-якому 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();

Сподіваюсь, це допомагає.


1

Я змінив @BillPaetski відповідь, щоб використовувати querySelector, додати необов'язковий CSS, видалити вимушений тег H1 і зробити заголовок, необов’язково вказаний або витягнутий з вікна. Він також не надрукує автоматичний друк і не виставляє внутрішніх даних, щоб їх можна було вимкнути у функції обгортки або як завгодно.

Єдині два приватних vars - tmpWindow та tmpDoc, хоча я вважаю, що доступ до заголовка, css та elem може відрізнятися, слід вважати, що всі аргументи функції є приватними.

Код:
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();

Крім того, він не копіює значення <input>елементів. Як я можу використовувати це, включаючи те, що ввів користувач?
Малькольм Сальвадор

@ Malky.Kid, будь ласка, подумайте про те, що ви просите. Якщо ви хочете надрукувати форму, вам потрібно підключити розмиття події на елементах форми, і встановіть значення атрибута, обраного, за замовчуванням і InnerText з <input>, <select>, <textarea>compontents бути їх значення у час виконання. Є альтернативи, але це не проблема цього сценарію, а проблема роботи браузерів та отримання innerHTMLвласності документів із введеннями, полотнами тощо.
MrMesees

Я вже прийшов до рішення шляхом via .attr('value',). Я навіть робив це для textarea (додаючи) та прапорці ( .attr('checked',)). Я перепрошую , якщо я не думав , досить про те, що я просив.
Малькольм Сальвадор

Хочете поділитися з класом? можливо суть чи щось у коментарях. Я його схвалюю.
MrMesees

0

Наведений нижче код копіює всі відповідні вузли, на які націлений селектор запитів, копіює їх стилі, як видно на екрані, оскільки багато батьківських елементів, які використовуються для націлювання на селектори css, відсутні. Це спричиняє трохи відставання, якщо є багато дочірніх вузлів з великою кількістю стилів.

Ідеально, щоб у вас був готовий аркуш стилю друку, але це для випадків використання, коли аркуш стилю друку не вставляється, і ви бажаєте друкувати так, як видно на екрані.

Якщо ви скопіюєте наведені нижче елементи на консоль браузера на цій сторінці, вона надрукує всі фрагменти коду на цій сторінці.

+function() {
    /**
     * copied from  /programming/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')

0

Це дійсно старий пост, але ось одне моє оновлення, що я зробив, використовуючи правильну відповідь. Моє рішення також використовує jQuery.

Сенс цього полягає у використанні належного перегляду друку, включенні всіх таблиць стилів для належного форматування, а також підтримці в більшості браузерів.

function PrintElem(elem, title, offset)
{
    // Title constructor
    title = title || $('title').text();
    // Offset for the print
    offset = offset || 0;

    // Loading start
    var dStart = Math.round(new Date().getTime()/1000),
        $html = $('html');
        i = 0;

    // Start building HTML
    var HTML = '<html';

    if(typeof ($html.attr('lang')) !== 'undefined') {
        HTML+=' lang=' + $html.attr('lang');
    }

    if(typeof ($html.attr('id')) !== 'undefined') {
        HTML+=' id=' + $html.attr('id');
    }

    if(typeof ($html.attr('xmlns')) !== 'undefined') {
        HTML+=' xmlns=' + $html.attr('xmlns');
    }

    // Close HTML and start build HEAD
    HTML+='><head>';

    // Get all meta tags
    $('head > meta').each(function(){
        var $this = $(this),
            $meta = '<meta';

        if(typeof ($this.attr('charset')) !== 'undefined') {
            $meta+=' charset=' + $this.attr('charset');
        }

        if(typeof ($this.attr('name')) !== 'undefined') {
            $meta+=' name=' + $this.attr('name');
        }

        if(typeof ($this.attr('http-equiv')) !== 'undefined') {
            $meta+=' http-equiv=' + $this.attr('http-equiv');
        }

        if(typeof ($this.attr('content')) !== 'undefined') {
            $meta+=' content=' + $this.attr('content');
        }

        $meta+=' />';

        HTML+= $meta;
        i++;

    }).promise().done(function(){

        // Insert title
        HTML+= '<title>' + title  + '</title>';

        // Let's pickup all CSS files for the formatting
        $('head > link[rel="stylesheet"]').each(function(){
            HTML+= '<link rel="stylesheet" href="' + $(this).attr('href') + '" />';
            i++;
        }).promise().done(function(){
            // Print setup
            HTML+= '<style>body{display:none;}@media print{body{display:block;}}</style>';

            // Finish HTML
            HTML+= '</head><body>';
            HTML+= '<h1 class="text-center mb-3">' + title  + '</h1>';
            HTML+= elem.html();
            HTML+= '</body></html>';

            // Open new window
            var printWindow = window.open('', 'PRINT', 'height=' + $(window).height() + ',width=' + $(window).width());
            // Append new window HTML
            printWindow.document.write(HTML);

            printWindow.document.close(); // necessary for IE >= 10
            printWindow.focus(); // necessary for IE >= 10*/
console.log(printWindow.document);
            /* Make sure that page is loaded correctly */
            $(printWindow).on('load', function(){                   
                setTimeout(function(){
                    // Open print
                    printWindow.print();

                    // Close on print
                    setTimeout(function(){
                        printWindow.close();
                        return true;
                    }, 3);

                }, (Math.round(new Date().getTime()/1000) - dStart)+i+offset);
            });
        });
    });
}

Пізніше вам просто потрібно щось подібне:

$(document).on('click', '.some-print', function() {
    PrintElem($(this), 'My Print Title');
    return false;
});

Спробуй це.


-1

Як найкраща відповідь, про всяк випадок, якщо вам потрібно буде надрукувати зображення, як я:

Якщо ви хочете роздрукувати зображення:

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;
    }

Ви пропускаєте loadподію у спливаючому віці . Без нього ви надрукуєте порожню сторінку, оскільки зображення не завантажено. =>$(popup).load(function(){ popup.focus(); popup.print(); });
Тім Вермален

-4

Найкращим способом зробити це було б надіслати вміст div на сервер та відкрити нове вікно, де сервер міг би помістити цей вміст у нове вікно.

Якщо це не варіант, ви можете спробувати використовувати мову на стороні клієнта, як javascript, щоб приховати все на сторінці, крім цього div, а потім надрукувати сторінку ...


1
Не потрібно підстрибувати його на сервер. Ви можете відкрити вікно браузера, встановити вміст і викликати команду друку.
Джонатан Фауст

Ви можете створити нове вікно у клієнта.
Pointy

1
Джонатан: Мені подобається таке рішення. У вас є приклад коду?
usertest
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.