Как распечатать часть отрендеренной HTML-страницы на JavaScript?

Код JavaScript window.print () может распечатать текущую HTML-страницу.

Если у меня есть div на странице HTML (например, страница отображается сASP.NET MVC вид), то я хочу, чтобы печатать только div.

Есть ли JQueryненавязчивый JavaScript или обычный код JavaScript для реализации этого запроса?

Делая это более понятным, предположим, что отображаемая HTML-страница выглядит так:

<html xmlns="http://www.w3.org/1999/xhtml">

    <head id="Head" runat="server">
        <title>
            <asp:ContentPlaceHolder runat="server" ID="TitleContent" />
        </title>
    </head>

    <body>
            <div id="div1" class="div1">....</div>
            <div id="div2" class="div2">....</div>
            <div id="div3" class="div3">....</div>
            <div id="div4" class="div4">....</div>
            <div id="div4" class="div4">....</div>
        <p>
            <input id="btnSubmit" type="submit" value="Print" onclick="divPrint();" />
        </p>
    </body>
</html>

Затем я хочу нажать на кнопку Печать, только печать div3.

Ответы на вопрос(5)

<div id="invocieContainer">
    <div class="row">
        ...Your html Page content here....
    </div>
</div>

<script src="/Scripts/printThis.js"></script>
<script>
    $(document).on("click", "#btnPrint", function(e) {
        e.preventDefault();
        e.stopPropagation();
        $("#invocieContainer").printThis({
            debug: false, // show the iframe for debugging
            importCSS: true, // import page CSS
            importStyle: true, // import style tags
            printContainer: true, // grab outer container as well as the contents of the selector
            loadCSS: "/Content/bootstrap.min.css", // path to additional css file - us an array [] for multiple
            pageTitle: "", // add title to print page
            removeInline: false, // remove all inline styles from print elements
            printDelay: 333, // variable print delay; depending on complexity a higher value may be necessary
            header: null, // prefix to html
            formValues: true // preserve input/form values
        });

    });
</script>

For printThis.js souce code, copy and pase below URL in new tab https://raw.githubusercontent.com/jasonday/printThis/master/printThis.js

Попробуйте этот код JavaScript:

function printout() {

    var newWindow = window.open();
    newWindow.document.write(document.getElementById("output").innerHTML);
    newWindow.print();
}
 02 июл. 2009 г., 04:01
Это будет работать, но с некоторой модификацией, позволяющей странице «перезагружать» после того, как вы напечатали свою цель. (Как вы заметили, это будет проблемой.) Например, непосредственно перед печатью откройте модальное окно или какое-то наложение, указывающее, что печать может теперь произойти (или вызовите window.print () прямо тогда), а затем, когда пользователь щелкает OK или Close, таблицы стилей могут сбрасываться самостоятельно.
 18 авг. 2015 г., 03:34
Это просто извергло неформатированную таблицу на новую вкладку для меня. Ничего не напечатано.
 02 июл. 2009 г., 04:02
Кроме того, вам необязательно иметь динамически загружаемый внешний CSS-файл, его можно предварительно загрузить, но просто настроить классы в целевом div или другом контейнере, когда он будет готов к печати. (И удаление классов, когда сделано.)
Решение Вопроса

Я бы сказал об этом примерно так:

<html>
    <head>
        <title>Print Test Page</title>
        <script>
            printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">')
            function printDiv(divId) {
                window.frames["print_frame"].document.body.innerHTML=printDivCSS + document.getElementById(divId).innerHTML;
                window.frames["print_frame"].window.focus();
                window.frames["print_frame"].window.print();
            }
        </script>
    </head>

    <body>
        <h1><b><center>This is a test page for printing</center></b><hr color=#00cc00 width=95%></h1>
        <b>Div 1:</b> <a href="javascript:printDiv('div1')">Print</a><br>
        <div id="div1">This is the div1's print output</div>
        <br><br>
        <b>Div 2:</b> <a href="javascript:printDiv('div2')">Print</a><br>
        <div id="div2">This is the div2's print output</div>
        <br><br>
        <b>Div 3:</b> <a href="javascript:printDiv('div3')">Print</a><br>
        <div id="div3">This is the div3's print output</div>
        <iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
    </body>
</html>
 KentZhou13 июл. 2009 г., 18:49
Благодарю. Это решение отлично работает.
 30 нояб. 2016 г., 05:22
window.frames["print_frame"].window.focus(); setTimeout(function() { window.frames["print_frame"].window.print(); }, 0);
 13 июл. 2009 г., 23:58
printDivCSS просто необходим, если вам нужно отформатировать то, что вы печатаете, с помощью таблицы стилей. Если вы не хотите, чтобы ваш печатный текст форматировался с помощью таблицы стилей, тогда он вам не нужен.
 05 сент. 2009 г., 22:46
Я проверил, какова была ситуация. IE7 будет печатать активный кадр по умолчанию, поэтому я должен сфокусировать () кадр. Это не позволит мне сосредоточиться () & quot; видимость: скрытая & quot; содержание, поэтому мне пришлось удалить этот бит стилевого форматирования. Рамка уже имеет ширину, высоту и рамку 0, поэтому она скрыта даже без форматирования стиля. Таким образом, все работает. О, последнее замечание: если пользователь пытается CTRL + F выполнить поиск на странице, возможно, что его поиск найдет совпадения внутри фрейма, совпадения, которые он не может увидеть. Вам нужно будет очистить рамку после завершения печати, чтобы исправить это.
 26 янв. 2016 г., 20:57
@CodingWithStyle Этот ответ был бы гораздо полезнее, если бы вы объяснили свой подход / решение, а не просто предоставили код.

Вы можете использовать таблицу стилей печати, но это повлияет на все функции печати.

Вы можете попробовать напечатать таблицу стилей извне, и она будет включена через JavaScript при нажатии кнопки, а затем вызватьwindow.print(), затем после этого удалите его.

 02 июл. 2009 г., 04:02
Кроме того, вам необязательно иметь динамически загружаемый внешний CSS-файл, его можно предварительно загрузить, но просто настроить классы в целевом div или другом контейнере, когда он будет готов к печати. (И удаление классов, когда сделано.)
 02 июл. 2009 г., 04:01
Это будет работать, но с некоторой модификацией, позволяющей странице «перезагружать» после того, как вы напечатали свою цель. (Как вы заметили, это будет проблемой.) Например, непосредственно перед печатью откройте модальное окно или какое-то наложение, указывающее, что печать может теперь произойти (или вызовите window.print () прямо тогда), а затем, когда пользователь щелкает OK или Close, таблицы стилей могут сбрасываться самостоятельно.

что и некоторые из предложений, вам нужно сделать по крайней мере следующее:

Load some CSS dynamically through JavaScript Craft some print-specific CSS rules Apply your fancy CSS rules through JavaScript

Пример CSS может быть таким простым:

@media print {
  body * {
    display:none;
  }

  body .printable {
    display:block;
  }
}

В таком случае ваш JavaScript должен был бы только применить & quot; printable & quot; класс для вашего целевого div, и он будет единственным видимым (если нет других конфликтующих правил CSS - отдельное упражнение), когда произойдет печать.

<script type="text/javascript">
  function divPrint() {
    // Some logic determines which div should be printed...
    // This example uses div3.
    $("#div3").addClass("printable");
    window.print();
  }
</script>

При желании вы можете удалить класс из целевого объекта после печати и / или удалить динамически добавленный CSS после печати.

Ниже приведен полный рабочий пример, единственное отличие состоит в том, что CSS для печати не загружается динамически. Если вы хотите, чтобы он действительно был ненавязчивым, тогда вам нужнозагрузить CSS динамически, как в этом ответе.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Print Portion Example</title>
    <style type="text/css">
      @media print {
        body * {
          display:none;
        }

        body .printable {
          display:block;
        }
      }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  </head>

  <body>
    <h1>Print Section Example</h1>
    <div id="div1">Div 1</div>
    <div id="div2">Div 2</div>
    <div id="div3">Div 3</div>
    <div id="div4">Div 4</div>
    <div id="div5">Div 5</div>
    <div id="div6">Div 6</div>
    <p><input id="btnSubmit" type="submit" value="Print" onclick="divPrint();" /></p>
    <script type="text/javascript">
      function divPrint() {
        // Some logic determines which div should be printed...
        // This example uses div3.
        $("#div3").addClass("printable");
        window.print();
      }
    </script>
  </body>
</html>
 KentZhou13 июл. 2009 г., 18:50
Благодарю. Кажется, не работает должным образом.
 07 сент. 2009 г., 04:39
Трудно сказать, не видя CSS и исходный код страницы самостоятельно. Можете ли вы опубликовать это где-то какjsbin.com?
 KentZhou04 сент. 2009 г., 21:31
Для FF это решение напечатает всю страницу с div3. Для IE7 это решение напечатает всю страницу, но заменит div3 пустым.
 04 сент. 2009 г., 22:30
Какая версия Firefox? Когда я проверял это с IE, это было с IE6, и он работает правильно - только печать "Div 3". Firefox 3.5.2 демонстрирует такое же поведение. Google Chrome 2.0.172.43 также демонстрирует такое же поведение. Может быть, я не понимаю ваши требования.
 KentZhou06 сент. 2009 г., 22:58
БЛАГОДАРЮ. Мой сценарий таков: я помещаю ваше предложение css @media print ... в site.css. Моя страница отображается как & lt; body & gt; & lt; div class = "fixed" & gt; & lt; div class = "col1" & gt; & lt; div id = & quot; DivForPrint & quot; & gt; & Lt; / дел & GT; & Lt; / дел & GT; & Lt; / дел & GT; & Lt; / тело & GT; может быть css не подходит для этого случая?

Ваш ответ на вопрос