Друкувати лише <div id = "printarea"> </div>?

444

Як надрукувати вказаний div (без відключення вручну всього іншого вмісту на сторінці)?

Я хочу уникати нового діалогового вікна попереднього перегляду, тому створювати нове вікно з цим вмістом не корисно.

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

— noesgard
джерело

1

stackoverflow.com/questions/2255291/… це посилання працює ідеально

— Jinna Balu

792

Ось загальне рішення, використовуючи лише CSS , яке я перевірив, щоб він працював.

@media print {
  body * {
    visibility: hidden;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

Альтернативні підходи не такі хороші. Використовувати displayскладне, тому що якщо є якийсь елементdisplay:none жоден його нащадок не відображатиметься. Щоб скористатися ним, ви повинні змінити структуру своєї сторінки.

Використання visibilityпрацює краще, оскільки ви можете ввімкнути видимість для нащадків. Невидимі елементи все ще впливають на макет, тому я рухаюся section-to-printвгорі ліворуч, щоб він правильно друкував.

— Беннетт Макльвей
джерело

21

це, безумовно, найшвидший і найчистіший спосіб, мені цікаво, чому ця відповідь не отримала найбільше голосів -.-

— Dany Khalife

34

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

— Малькольм Маклауд

5

Це чудовий початок, але у мене виникли дві неприємності: для одного, якщо хтось із батьків елемента визначив своє відносне / абсолютне позиціонування, вміст все одно буде компенсований, якщо я position:fixedзамість цього не використовував . Однак Chrome і Safari також будуть усікати вміст, особливо після першої сторінки. Так що мій остаточний обхідний шлях був встановлений як мета і всіх батьків доoverflow:visible; position:absolute !important; top:0;left:0

— natevw

1

@ dudeNumber4 #section-to-printвідповідає самому розділу; #section-to-print *відповідає кожному піделементу розділу. Отже, це правило просто робить розділ і весь його вміст видимим.

— Bennett McElwee

3

Ви можете спробувати рішення JavaScript, але це не спрацює, якщо ваш користувач використовує команду Друк браузера.

— Беннетт Макльвей

243

У мене є краще рішення з мінімальним кодом.

Помістіть частину для друку всередині div з таким ідентифікатором:

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

Потім додайте подію як onclick (як показано вище) та передайте ідентифікатор div, як я зробив вище.

Тепер давайте створимо дійсно простий javascript:

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

Зауважте, наскільки це просто? Ніяких спливаючих вікон, жодних нових вікон, жодної шаленої стилізації, ніяких бібліотек JS, як jquery. Проблема справді складних рішень (відповідь не є складною, і не те, про що я маю на увазі) полягає в тому, що вона НІКОЛИ не буде перекладати у всіх браузерах ніколи! Якщо ви хочете зробити різні стилі, зробіть так, як показано у відповіді, додавши медіа-атрибут до посилання таблиці стилів (media = "print").

Немає пуху, легкий, він просто працює.

— Кевін Флорида
джерело

@Kevin, я спробую це для форми, але вона надрукує порожню форму (без даних), і мені потрібна заповнена форма, щоб бути надрукованою перед надсиланням

— Arif

98

@asprin попередження! Це не безладний код. Використовувати innerHTML для видалення, а потім відтворити все тіло добре для простих сторінок, але за допомогою більш досконалих налаштувань (меню, слайд-шоу тощо) це може стерти деякі динамічні поведінки, додані іншими сценаріями.

— Крістоф

17

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

— Андрій Волгін

1

На жаль, не працює добре в Chrome, якщо ви закриєте вікно попереднього перегляду друку, а потім спробуйте зробити jQuery .click. Соромно, бо код такий легкий.

— rybo111

3

@BorisGappov - дуже простий приклад із одним натисканням події, що підтверджує мою думку: jsfiddle.net/dc7voLzt Я знову скажу: це не безладний код! Проблема не в самому друку, а в тому, щоб відновити оригінальну сторінку!

— Крістоф

121

Усі відповіді поки що досить помилкові - вони або передбачають додавання class="noprint"до всього, або будуть заплутані displayвсередині#printable .

Я думаю, що найкращим рішенням було б створити обгортку навколо недрукувальних речей:

<head>
    <style type="text/css">

    #printable { display: none; }

    @media print
    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style>
</head>
<body>
    <div id="non-printable">
        Your normal page contents
    </div>

    <div id="printable">
        Printer version
    </div>
</body>

Звичайно, це не ідеально, оскільки це включає переміщення речей у вашому HTML ...

— Грег
джерело

Я думаю, що ти маєш рацію, але як я вбиваю стилізацію таблиці навколо div (якщо це можливо, щоб видалити стилізацію - я можу надрукувати таблицю та виключити решту вмісту досить легко

— noesgard

Я використовую Javascript для

— підбору

9

Я вважаю за краще використовувати семантичний HTML. Форматуванням друку в ідеалі повинна керуватися CSS. Дивіться моя відповідь про те , як зробити це: stackoverflow.com/questions/468881 / ...

— Bennett Мселві

Погодьтеся з Беннетом, використання видимості замість дисплея є набагато чистішим рішенням

— guigouz

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

— Кевін Флорида,

108

З jQuery це так просто:

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();

— романинський
джерело

3

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

— Рафі Джакобі

8

хитрість полягає в тому, щоб викликати його на створеній користувачем події, наприклад, при натисканні миші. Ви також можете додати після першого рядка: if (! w) попередження ("Будь ласка, увімкніть спливаючі вікна");

— romaninsh

1

хто-небудь отримав це працює на IE11? Він просто відкриває вікно, а потім негайно його закриває. Працює в Chrome, FF та сафарі.

— greatwitenorth

3

Я втратив css під час друку з цим, чи є спосіб зберегти css?

— Moxet Khan

2

@MoxetKhan, у цій публікації є рішення з css vevlo.com/how-to-print-div-content-using-javascript

— lakesare

22

Чи можете ви використовувати таблицю стилів друку та використовувати CSS для впорядкування вмісту, який ви хочете надрукувати? Прочитайте цю статтю, щоб отримати більше покажчиків.

— Пол Діксон
джерело

У мене є аркуш стилю друку - намагаюся уникати введення правила стилю у весь інший вміст ...

— noesgard

У мене є таблиця з включеним стилем, яка звертається до діва, про який йде мова, якщо я встановив таблицю для відображення: жодна - чи можу я все-таки відобразити div?

— noesgard

Я думаю, що так, і ви можете спробувати позначити правило як! Важливо, щоб підвищити його!

— Пол Діксон

якщо таблиця не відображається, це не матиме значення, навіть якщо для div встановлено значення "display: awesome;". Батько прихований, як і діти. Це ситуація, коли вам потрібна таблиця чи це просто для макета сторінки?

— roborourke

"Бум, голова!" за макетами таблиці. = |

— ANeves

19

Це добре працює:

<style type="text/css">
@media print
{
body * { visibility: hidden; }
#printcontent * { visibility: visible; }
#printcontent { position: absolute; top: 40px; left: 30px; }
}
</style>

Зауважте, що це працює лише з "видимістю". "показ" цього не зробить. Перевірено в FF3.

— Крістіан Майолі М.
джерело

15

Мені не дуже сподобалася відповідь у цілому. Якщо у вас є клас (скажімо, printableArea) і ви маєте це як безпосередня дитина, тоді ви можете зробити щось подібне у своєму CSS для друку:

body > *:not(.printableArea) {
    display: none;
}

//Not needed if already showing
body > .printableArea {
    display: block;
}

Для тих, хто шукає PrintableArea в іншому місці, вам потрібно переконатися, що батьки printableArea показані:

body > *:not(.parentDiv),
.parentDiv > *:not(.printableArea) {
    display: none;
}

//Not needed if already showing
body > .printableArea {
    display: block;
}

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

Причина, чому це рішення працює, полягає в тому, що ви не захоплюєте всі елементи, а лише безпосередні діти тіла і ховаєте їх. Інші рішення, наведені нижче, із відображенням css, приховують усі елементи, що впливає на все, що знаходиться всередині вмісту printableArea.

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

ПРИМІТКА. Ви можете додати будь-який CSS до CSS для друку за допомогою стилів вбудованого тексту:

<style type="text/css">
@media print {
   //styles here
}
</style>

Або як я зазвичай використовую тег посилань:

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

— фанфаворит
джерело

Що робити, якщо діва, який ви хочете надрукувати, не є "безпосереднім дитиною тіла"? Я намагаюся це зробити в vue.js .. Але я отримую багато порожніх сторінок, коли використовую прийняту відповідь.

— svenema

@svenema, ви можете використовувати будь-який CSS, який хочете. Це був лише приклад.

— фанфаворит

хм, все ж, коли я намагаюся це, дійсно немає додаткових порожніх сторінок, але div div PrintableArea також не відображається; У мене просто 1 порожня порожня сторінка, коли я використовую цей код.

— svenema

Я з’ясував, що це дійсно тому, що div-файл для друкуАреа не є прямим дочірнім тегом тіла, коли я роблю це безпосередньо дитиною, ваше рішення працює; однак, у моєму випадку я не можу зробити друковану область безпосередньо дитиною. Чи є шлях до цього?

— svenema

@svenema, будь ласка, дивіться мою редакцію вище.

— фанфаворит

8

Дайте будь-який елемент , який ви хочете надрукувати ідентифікатор printMe.

Включіть цей скрипт у свій головний тег:

<script language="javascript">
    var gAutoPrint = true;

    function processPrint(){

    if (document.getElementById != null){
    var html = '<HTML>\n<HEAD>\n';
    if (document.getElementsByTagName != null){
    var headTags = document.getElementsByTagName("head");
    if (headTags.length > 0) html += headTags[0].innerHTML;
    }

    html += '\n</HE' + 'AD>\n<BODY>\n';
    var printReadyElem = document.getElementById("printMe");

    if (printReadyElem != null) html += printReadyElem.innerHTML;
    else{
    alert("Error, no contents.");
    return;
    }

    html += '\n</BO' + 'DY>\n</HT' + 'ML>';
    var printWin = window.open("","processPrint");
    printWin.document.open();
    printWin.document.write(html);
    printWin.document.close();

    if (gAutoPrint) printWin.print();
    } else alert("Browser not supported.");

    }
</script>

Викличте функцію

<a href="javascript:void(processPrint());">Print</a>

— Джейсон Планк
джерело

Це гарна робота. Але спосіб занадто складний і не працює належним чином крос-браузер (особливо старіші браузери). Я пропоную вам поглянути на моє рішення нижче.

— Кевін Флорида

6

hm ... використовуйте тип аркуша для друку ... наприклад:

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

print.css:

div { display: none; }
#yourdiv { display: block; }

— Андреас Нідермайр
джерело

Це не спрацює, якщо документ не базується на DIV або #yourdiv також включає інші DIV.

— Gumbo

#yourdiv * {display: ...} якщо ви розмістите це вгорі сторінки та маєте сучасний веб-переглядач, тоді ви можете працювати з іншими селекторами, щоб сховати невідомих людей

— Andreas Niedermair

"#yourdiv * {display: ...}" - що повинно бути ... не порушуючи макет?

— Грег

Це відображатиме вбудовані елементи також як елементи блоку. Але "#yourdiv, #yourdiv div {display: block}" це зробить.

— Гумбо

@dittodhole - подумайте про це хвилину. Що ви можете помістити туди, що не порушить макет в межах #yourdiv?

— Грег

6

<script type="text/javascript">
   function printDiv(divId) {
       var printContents = document.getElementById(divId).innerHTML;
       var originalContents = document.body.innerHTML;
       document.body.innerHTML = "<html><head><title></title></head><body>" + printContents + "</body>";
       window.print();
       document.body.innerHTML = originalContents;
   }
</script>

— Діліп Кр Сінгх
джерело

6

добре виглядати, але ти втрачаєш усі прив'язки JavaScript та інше після друку

— Julien

1

Це друк без css.

— Moxet Khan

6

Крок 1: Введіть наступний javascript у свій тег заголовка

<script language="javascript">
function PrintMe(DivID) {
var disp_setting="toolbar=yes,location=no,";
disp_setting+="directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
   var content_vlue = document.getElementById(DivID).innerHTML;
   var docprint=window.open("","",disp_setting);
   docprint.document.open();
   docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
   docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
   docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
   docprint.document.write('<head><title>My Title</title>');
   docprint.document.write('<style type="text/css">body{ margin:0px;');
   docprint.document.write('font-family:verdana,Arial;color:#000;');
   docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
   docprint.document.write('a{color:#000;text-decoration:none;} </style>');
   docprint.document.write('</head><body onLoad="self.print()"><center>');
   docprint.document.write(content_vlue);
   docprint.document.write('</center></body></html>');
   docprint.document.close();
   docprint.focus();
}
</script>

Крок 2: Викликайте функцію PrintMe ("DivID") події onclick.

<input type="button" name="btnprint" value="Print" onclick="PrintMe('divid')"/>
<div id="divid">
here is some text to print inside this div with an id 'divid'
</div>

— Хардік Такер
джерело

Це один! Використовується для модалів та галерей. Немає помилок Javascript після закриття. Дуже корисно, особливо коли ви використовуєте модалі, які довші однієї сторінки. Приємно загортає. Ідеально підходить людям, які хочуть друкувати, щоб зберігати.

— TheWeeezel

2

З CSS 3 ви можете використовувати наступне:

body *:not(#printarea) {
    display: none;
}

— Гамбо
джерело

Не можу використати те, що я боюся ... (виправте мене, якщо помиляєтесь) сторінка, над якою я працюю, - це asp.net 1.1 / DHTML

— noesgard

Від браузера залежить, чи вже доступний перемикач: not () чи ні.

— Gumbo

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

— Gumbo

Ви можете використовувати jQuery і цей селектор, який (я думаю) буде працювати в IE6 - $ ('body *: not (#printarea)'). Style ('display', 'none');

— Девід Хеггі

2

це приховає всіх нащадків #printarea, оскільки вони відповідають *: not (#printarea). Таким чином, ви закінчуєте порожній контейнер.

— цитофу

2

Я зібрав вміст за допомогою JavaScript і створив вікно, яке я міг друкувати замість нього ...

— noesgard
джерело

Чи можете ви поділитися кодом, у ньому є питання про прийняття css

— Moxet Khan

2

Метод Сандро чудово працює.

Я налаштував це, щоб дозволити використання декількох посилань printMe, зокрема, для використання на сторінках із вкладками та розширенні тексту.

function processPrint(printMe){ <- виклик змінної тут

var printReadyElem = document.getElementById(printMe); <- видалив лапки навколо printMe, щоб попросити змінну

<a href="javascript:void(processPrint('divID'));">Print</a><- передача ідентифікатора div для друку до функції перетворення змінної printMe в ідентифікатор div. єдині цитати потрібні

2

printDiv (divId) : узагальнене рішення для друку будь-якого div на будь-якій сторінці.

У мене був подібний випуск, але я хотів (а) мати можливість надрукувати всю сторінку або (б) надрукувати будь-яку з декількох конкретних областей. Моє рішення, завдяки більшій частині вищезазначеного, дозволяє вам вказати будь-який об’єкт div, який слід надрукувати.

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

По-перше, створіть необхідний css для друку, щоб придушити все (але без конкретного правила, щоб дозволити елемент, який ви хочете надрукувати).

<style type="text/css" media="print">
   body {visibility:hidden; }
   .noprintarea {visibility:hidden; display:none}
   .noprintcontent { visibility:hidden; }
   .print { visibility:visible; display:block; }
</style>

Зауважте, що я додав нові правила класу:

noprintarea дозволяє придушити друк елементів у розділі як вмісту, так і блоку.
noprintcontent дозволяє придушити друк елементів у вашому розділі - вміст пригнічується, але виділена область залишається порожньою.
друк дозволяє мати елементи, які відображаються у друкованій версії, але не на екранній сторінці. Для стилю екрана вони зазвичай матимуть "display: none".

Потім вставте три функції JavaScript. Перший лише вмикає та вимикає аркуш стилю друку.

function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }

Другий виконує справжню роботу, а третій після цього очищає. Другий (printDiv) активує аркуш стилю друку, потім додає нове правило, щоб дозволити друку бажаний div, видає друк, а потім додає затримку до остаточного ведення господарства (інакше стилі можна скинути до того, як друк буде фактично зроблено.)

function printDiv(divId)
{
  //  Enable the print CSS: (this temporarily disables being able to print the whole page)
  disableSheet(0,false);
  //  Get the print style sheet and add a new rule for this div
  var sheetObj=document.styleSheets[0];  
  var showDivCSS="visibility:visible;display:block;position:absolute;top:30px;left:30px;";
  if (sheetObj.rules) { sheetObj.addRule("#"+divId,showDivCSS); }
  else                { sheetObj.insertRule("#"+divId+"{"+showDivCSS+"}",sheetObj.cssRules.length); }
  print();
  //  need a brief delay or the whole page will print
  setTimeout("printDivRestore()",100);  
}

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

function printDivRestore()
{
  // remove the div-specific rule
  var sheetObj=document.styleSheets[0];  
  if (sheetObj.rules) { sheetObj.removeRule(sheetObj.rules.length-1); }
  else                { sheetObj.deleteRule(sheetObj.cssRules.length-1); }
  //  and re-enable whole page printing
  disableSheet(0,true);
}

Єдине, що потрібно зробити - це додати один рядок до вашої обробки завантаження, щоб стиль друку спочатку був відключений, тим самим дозволяючи друкувати цілі сторінки.

<body onLoad='disableSheet(0,true)'>

Потім з будь-якого місця документа ви можете надрукувати div. Просто видайте printDiv ("thedivid") з кнопки чи будь-чого іншого.

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

ПРИМІТКА. У моїй реалізації це повинен бути перший аркуш стилів. Змініть посилання на аркуші (0) на відповідний номер аркуша, якщо вам потрібно зробити це пізніше у послідовності аркушів.

— DrDave
джерело

2

@Kevin Florida Якщо у вас є кілька дівок з одним класом, ви можете використовувати його так:

 <div style="display:none">
   <div id="modal-2" class="printableArea">
     <input type="button" class="printdiv-btn" value="print a div!" />
   </div>
 </div>

я використовував внутрішній тип вмісту Colorbox

$(document).on('click', '.printdiv-btn', function(e) {
    e.preventDefault();

    var $this = $(this);
    var originalContent = $('body').html();
    var printArea = $this.parents('.printableArea').html();

    $('body').html(printArea);
    window.print();
    $('body').html(originalContent);
});

— Стефан
джерело

2

У моєму випадку мені довелося надрукувати зображення всередині сторінки. Коли я використовував рішення, яке проголосувало, у мене була 1 порожня сторінка, а на іншій - зображення. Сподіваюся, це комусь допоможе.

Ось css, який я використав:

@media print {
  body * {
    visibility: hidden;
  }

  #not-print * {
    display: none;
  }

  #to-print, #to-print * {
    visibility: visible;
  }

  #to-print {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 99%;
  }
}

Мій html:

<div id="not-print" >
  <header class="row wrapper page-heading">

  </header>

  <div class="wrapper wrapper-content">
    <%= image_tag @qrcode.image_url,  size: "250x250" , alt: "#{@qrcode.name}" %>
  </div>
</div>

<div id="to-print" style="display: none;">
  <%= image_tag @qrcode.image_url,  size: "300x300" , alt: "#{@qrcode.name}" %>
</div>

— Рафаель Монтейро
джерело

2

Найкращий css, який відповідає простору порожньої висоти:

@media print {
  body * {
    visibility: hidden;
    height:0;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
    height:auto;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

— TRI ВN
джерело

2

Найкращий спосіб друкувати конкретний Div або будь-який елемент

printDiv("myDiv");

function printDiv(id){
        var printContents = document.getElementById(id).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
}

— Махетаб
джерело

1

Використовуйте спеціальну таблицю стилів для друку

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

а потім додайте клас, тобто "noprint" до кожного тегу, вміст якого ви не хочете друкувати.

У використанні CSS

.noprint {
  display: none;
}

— Xn0vv3r
джерело

1

Якщо ви хочете надрукувати лише цей div, ви повинні скористатися інструкцією:

@media print{
    *{display:none;}
    #mydiv{display:block;}
}

— Джейсон Планк
джерело

1

Функція printDiv () виходила кілька разів, але в цьому випадку ви втрачаєте всі свої прив'язуючі елементи та вхідні значення. Отже, моє рішення полягає в тому, щоб створити div для всього, що називається "body_allin", і іншого за межами першого під назвою "body_print".

Потім ви викликаєте цю функцію:

function printDiv(divName){

    var printContents = document.getElementById(divName).innerHTML;

    document.getElementById("body_print").innerHTML = printContents;

    document.getElementById("body_allin").style.display = "none";
    document.getElementById("body_print").style.display = "";

    window.print();

    document.getElementById("body_print").innerHTML = "";
    document.getElementById("body_allin").style.display = "";
    document.getElementById("body_print").style.display = "none";

}

— pmrotule
джерело

Цей рядок може бути корисним, якщо ви хочете унікальний ідентифікатор: printContents = printContents.replace (/ id = ("| ') (. *?) (" |') / G, 'id = $ 1 $ 2_2 $ 3');

— pmrotule

1

Ви можете використовувати окремий стиль CSS, який вимикає будь-який інший вміст, за винятком одного з ідентифікатором "printarea".

Див. Дизайн CSS: Перехід до друку для подальшого пояснення та прикладів.

— Kosi2801
джерело

Оновлено посилання на нове місце. Коментар замість голосування був би непоганим.

— Kosi2801

1

У мене було декілька зображень на кожному з кнопкою, і мені потрібно було натиснути кнопку, щоб надрукувати кожен div із зображенням. Це рішення працює, якщо в браузері я відключив кеш, а розмір зображення не змінюється в 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;
    }

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

— живе-кохання
джерело

1

Ще одне схвалення, не впливаючи на поточну сторінку, і воно також зберігає css під час друку. Тут селектор повинен бути конкретним селектором div, який вміст нам потрібно надрукувати.

printWindow(selector, title) {
   var divContents = $(selector).html();
   var $cssLink = $('link');
   var printWindow = window.open('', '', 'height=' + window.outerHeight * 0.6 + ', width=' + window.outerWidth  * 0.6);
   printWindow.document.write('<html><head><h2><b><title>' + title + '</title></b></h2>');
   for(var i = 0; i<$cssLink.length; i++) {
    printWindow.document.write($cssLink[i].outerHTML);
   }
   printWindow.document.write('</head><body >');
   printWindow.document.write(divContents);
   printWindow.document.write('</body></html>');
   printWindow.document.close();
   printWindow.onload = function () {
            printWindow.focus();
            setTimeout( function () {
                printWindow.print();
                printWindow.close();
            }, 100);  
        }
}

Тут за умови деякого часу видно, що зовнішній css до нього застосовується.

— Мукеш Кумар Суман
джерело

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

— Арпіт Шрівастава

1

Я спробував багато запропонованих рішень. Жоден з них не працював ідеально. Вони або втрачають прив’язки CSS або JavaScript. Я знайшов ідеальне і просте рішення, яке не втрачає ні CSS, ні JavaScript-прив’язки.

HTML:

<div id='printarea'>
    <p>This is a sample text for printing purpose.</p>
    <input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>

Javascript:

function printFunc() {
    var divToPrint = document.getElementById('printarea');
    var htmlToPrint = '' +
        '<style type="text/css">' +
        'table th, table td {' +
        'border:1px solid #000;' +
        'padding;0.5em;' +
        '}' +
        '</style>';
    htmlToPrint += divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write("<h3 align='center'>Print Page</h3>");
    newWin.document.write(htmlToPrint);
    newWin.print();
    newWin.close();
    }

— BibanCS
джерело

Це відкриття та створення іншого вікна, яке не працює на Android. Працює лише прямий window.print ().

— Мерв

1

Я дуже запізнююсь на цю вечірку, але хотів би виступити з іншим підходом. Я написав крихітний модуль JavaScript під назвою PrintElements для динамічного друку частин веб-сторінки.

Він працює шляхом ітерації через вибрані елементи вузла, і для кожного вузла він обходить дерево DOM до елемента BODY. На кожному рівні, включаючи початковий (який є рівнем вузла для друку), він приєднує маркерний клас ( pe-preserve-print) до поточного вузла. Потім додає інший маркерний клас ( pe-no-print) до всіх братів і сестер поточного вузла, але лише якщо у них немає pe-preserve-printкласу. Як третій акт, він також додає інший клас до збережених елементів предків pe-preserve-ancestor.

Дослідний простий додатковий CSS-файл для друку приховає та покаже відповідні елементи. Деякі переваги такого підходу полягають у тому, що всі стилі збережені, він не відкриває нове вікно, не потрібно переміщувати багато елементів DOM, і взагалі він не інвазивний з вашим оригінальним документом.

Перегляньте демонстраційну версію або прочитайте відповідну статтю для отримання додаткової інформації .

— Андрас Сепешазі
джерело

0

Ви можете скористатися цим: http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/

Або використовувати visibility:visibleіvisibility:hidden css властивість разом із@media print{}

'display: none' приховає всі вкладені 'display: block'. Це не рішення.

— 0xC0DEGURU
джерело

0

Я знайшов рішення.

@media print {
    .print-area {
        background-color: white;
        height: 100%;
        width: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index:1500;
        visibility: visible;
    }
    @page{
        size: portrait;
        margin: 1cm;
    }
/*IF print-area parent element is position:absolute*/
    .ui-dialog,
    .ui-dialog .ui-dialog-content{
        position:unset !important;
        visibility: hidden;
    }
}

— користувач2573099
джерело

0

На основі відповіді @Kevin Florida, я створив спосіб уникнути відключення сценарію на поточній сторінці через перезапис вмісту. Я використовую інший файл під назвою "printScreen.php" (або .html). Оберніть все, що ви хочете надрукувати, у розділ "printSource". І за допомогою JavaScript відкрийте нове створене вами вікно ("printScreen.php"), а потім захопіть вміст у "printSource" верхнього вікна.

Ось код.

Головне вікно:

echo "<div id='printSource'>";
//everything you want to print here
echo "</div>";

//add button or link to print
echo "<button id='btnPrint'>Print</button>";

<script>
  $("#btnPrint").click(function(){
    printDiv("printSource");
  });

  function printDiv(divName) {
   var printContents = document.getElementById(divName).innerHTML;
   var originalContents = document.body.innerHTML;
   w=window.open("printScreen.php", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=50,width=900,height=400");
   }
</script>

Це "printScreen.php" - інший файл для захоплення вмісту для друку

<head>
// write everything about style/script here (.css, .js)

</head>
<body id='mainBody'></body>
</html>


<script>
    //get everything you want to print from top window
    src = window.opener.document.getElementById("printSource").innerHTML;

    //paste to "mainBody"
    $("#mainBody").html(src);
    window.print();
    window.close();
</script>

— QeiNui
джерело