Подтвердить что ты не робот

Печать определенной части веб-страницы

Я пытаюсь напечатать определенную часть моего приложения.

Приложение имеет список пользователей, отображающих их имя и фамилию. Когда я нажимаю на пользователя, я получаю всплывающее окно с более подробной информацией о них.

Как я могу распечатать только всплывающее окно для пользователя, которого я нажал? Всплывающее окно выглядит следующим образом:

 <div id="user<?=$user->id;?>" class="popup">
      <div class="details">
           User details...
      </div>
      <a href="#print">Print</a>
 </div>

Кнопка печати еще не работает.

4b9b3361

ОТВЕТЫ

Ответ 1

Вы можете использовать простой JavaScript, чтобы напечатать определенный div со страницы.

var prtContent = document.getElementById("your div id");
var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();

Ответ 2

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

Javscript:

function printInfo(ele) {
    var openWindow = window.open("", "title", "attributes");
    openWindow.document.write(ele.previousSibling.innerHTML);
    openWindow.document.close();
    openWindow.focus();
    openWindow.print();
    openWindow.close();
}

HTML:

<div id="....">
    <div>
        content to print
    </div><a href="#" onclick="printInfo(this)">Print</a>
</div>

Несколько примечаний здесь: якорь НЕ должен иметь пробелов между ним и div, содержащий содержимое для печати

Ответ 3

Вместо всего сложного JavaScript вы можете добиться этого простым CSS: просто используйте два файла CSS, один для обычного экрана, а другой для отображения ТОЛЬКО содержимого вы хотите распечатать. В этом последнем файле скройте все, что вы не хотите печатать, отобразите только всплывающее окно.

Не забудьте указать атрибут media обоих файлов CSS:

<link rel="stylesheet" href="screen-css.css" media="all" />
<link rel="stylesheet" href="print-css.css" media="print" />

Ответ 4

Я сделал это расширение jQuery для печати HTML выбранного элемента: $('#div2').print();

$.fn.extend({
    print: function() {
        var frameName = 'printIframe';
        var doc = window.frames[frameName];
        if (!doc) {
            $('<iframe>').hide().attr('name', frameName).appendTo(document.body);
            doc = window.frames[frameName];
        }
        doc.document.body.innerHTML = this.html();
        doc.window.print();
        return this;
    }
});

Смотрите в действии здесь.

Ответ 5

Просто используйте CSS, чтобы скрыть контент, который вы не хотите печатать. Когда пользователь выбирает печать - страница будет искать CSS " media =" print " для получения инструкций о макете страницы.

CSS = media = "print" содержит инструкции, чтобы скрыть содержимое, которое мы не хотим печатать.

<!-- CSS for the things we want to print (print view) -->
<style type="text/css" media="print">

#SCREEN_VIEW_CONTAINER{
        display: none;
    }
.other_print_layout{
        background-color:#FFF;
    }
</style>

<!-- CSS for the things we DO NOT want to print (web view) -->
<style type="text/css" media="screen">

   #PRINT_VIEW{
      display: none;
   }
.other_web_layout{
        background-color:#E0E0E0;
    }
</style>

<div id="SCREEN_VIEW_CONTAINER">
     the stuff I DO NOT want printed is here and will be hidden - 
     and not printed when the user selects print.
</div>

<div id="PRINT_VIEW">
     the stuff I DO want printed is here.
</div>

Ответ 6

Вот моя расширенная версия, когда мы хотим загрузить файлы css или есть ссылки на изображения в части для печати. ​​

В этих случаях нам нужно подождать, пока файлы css или изображения не будут полностью загружены до вызова функции print(). Поэтому лучше переместить вызовы print() и close() в html. Ниже приведен пример кода:

var prtContent = document.getElementById("order-to-print");
var WinPrint = window.open('', '', 'left=0,top=0,width=384,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write('<html><head>');
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/normalize.css">');
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/receipt.css">');
WinPrint.document.write('</head><body onload="print();close();">');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.write('</body></html>');
WinPrint.document.close();
WinPrint.focus();

Ответ 7

У меня есть лучший вариант,

Сначала разделите печатный и непечатаемый раздел по имени класса или идентификатору

window.onafterprint = onAfterPrint;

function print(){
  //hide the nonPrintable div  
}

function onAfterPrint(){
  // Visible the nonPrintable div
}
<input type="button" onclick="print()" value="Print"/>

Ответ 8

Как сказано здесь: fooobar.com/questions/103504/..., вы можете добавить конкретный раздел в скрытый фрейм с Javascript, сфокусировать его и распечатать.

Ответ 9

В функции printPageArea() передайте определенный идентификатор div, который вы хотите распечатать. Я нашел этот код JavaScript с codexworld.com.

function printPageArea(areaID){
    var printContent = document.getElementById(areaID);
    var WinPrint = window.open('', '', 'width=900,height=650');
    WinPrint.document.write(printContent.innerHTML);
    WinPrint.document.close();
    WinPrint.focus();
    WinPrint.print();
    WinPrint.close();
}

Полный код и учебник можно найти здесь - Как напечатать область страницы с помощью JavaScript.

Ответ 10

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

Он работает путем итерации по выбранным элементам узла и для каждого узла проходит по дереву DOM до элемента BODY. На каждом уровне, включая начальный (который является уровнем узлов для печати), он присоединяет класс маркера (pe-preserve-print) к текущему узлу. Затем присоединяет другой класс маркера (pe-no-print) ко всем братьям и сестрам текущего узла, но только если на них нет класса pe-preserve-print. Как третий акт, он также присоединяет другой класс к сохраненным элементам предка pe-preserve-ancestor.

Простой простой дополнительный css только для печати скроет и покажет соответствующие элементы. Некоторые преимущества этого подхода состоят в том, что все стили сохраняются, он не открывает новое окно, нет необходимости перемещать множество элементов DOM, и, как правило, он неинвазивен с вашим исходным документом.

Смотрите демо, или прочитайте соответствующую статью для получения дополнительной информации.

Ответ 11

window.onafterprint = onAfterPrint;

function print(){
  //hide the nonPrintable div  
}

function onAfterPrint(){
  // Visible the nonPrintable div
}
<input type="button" onclick="print()" value="Print"/>

Ответ 12

Попробуйте эту удивительную библиотеку ink-html library

import print from 'ink-html'
// const print = require('ink-html').default

// js
print(window.querySelector('#printable'))
// Vue.js
print(this.$refs.printable.$el)