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

Как распечатать часть отображаемой 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.

4b9b3361

ОТВЕТЫ

Ответ 1

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

<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 print output</div>
        <br><br>
        <b>Div 2:</b> <a href="javascript:printDiv('div2')">Print</a><br>
        <div id="div2">This is the div2 print output</div>
        <br><br>
        <b>Div 3:</b> <a href="javascript:printDiv('div3')">Print</a><br>
        <div id="div3">This is the div3 print output</div>
        <iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
    </body>
</html>

Ответ 2

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

  • Загрузите некоторый CSS динамически через JavaScript
  • Создание некоторых правил CSS для печати
  • Примените свои правила оформления CSS с помощью JavaScript

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

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

  body .printable {
    display:block;
  }
}

Вместо этого ваш JavaScript должен будет применить только класс "printable" к вашему целевому 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>

Ответ 3

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

function printout() {

    var newWindow = window.open();
    newWindow.document.write(document.getElementById("output").innerHTML);
    newWindow.print();
}

Ответ 4

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

Для кода comStyle.js, скопируйте и подставьте URL-адрес на новой вкладке      https://raw.githubusercontent.com/jasonday/printThis/master/printThis.js

Ответ 5

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

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

Ответ 6

Как использовать холст? Нарисуйте его в новом окне, а затем вызовите метод print() из этого нового окна?

Здесь вы можете найти дополнительную документацию: drawWindow()