Home / Questions / 43444
Accepted
Pavlo B.
Asked: 2020-01-12 00:51:56 +0800 CST 2020-01-12 00:51:56 +0800 CST

Кнопка для печати (только содержимое DIV) с сохранением стилей

  • 772

у меня есть див

function imprSelec(historial){
  var ficha=document.getElementById(historial);
  var ventimp=window.open(' ','popimpr');
  ventimp.document.write(ficha.innerHTML);
  ventimp.document.close();
  ventimp.print();
  ventimp.close();
}
    <div id="historial">
      <h3><center>Mi contenido</center></h3>
      ...
    </div>
<a href="javascript:imprSelec('historial')">Imprimir</a>

И я хочу распечатать его, я пробовал так, но у меня это не работает, по сути, это ничего не делает. Но я хочу, чтобы печаталось только содержимое div, historialсохраняя стили div.

Добавляю изображения:

Вот как это выглядит в сети введите описание изображения здесь

И вот как это выглядит, более или менее нормально, так как я поставил стили прямо в атрибуте, хотя цвета фона меня не очень устраивают.

введите описание изображения здесь

javascript

2 Answers

  1. Best Answer

    Попробуйте эту функцию:

    function printDiv(nombreDiv) {
     var contenido= document.getElementById(nombreDiv).innerHTML;
     var contenidoOriginal= document.body.innerHTML;

     document.body.innerHTML = contenido;

     window.print();

     document.body.innerHTML = contenidoOriginal;
}

    И вызывая его следующим образом:

    <div id="areaImprimir">
      <h3><center>Mi contenido</center></h3>
      ...
</div>

<input type="button" onclick="printDiv('areaImprimir')" value="imprimir div" />
    • 9

  2. Лично я все еще ищу кросс-браузерное решение этой проблемы. По умолчанию стили не учитываются при печати в большинстве браузеров. В случае с Chrome мне даже media="all"не удалось сохранить стили.

    Я предполагаю, что в какой-то момент это будет стандартизировано, что позволит печатать с полной поддержкой CSS. Между тем, мы должны найти способы повторить эту задачу.

    Один из способов добиться этого — преобразовать документ в холст, а затем в изображение (по умолчанию PNG) через файлы HTMLCanvasElement#toDataURL. Как только это будет сделано, все, что вам нужно сделать, это добавить изображение к тегу <img>и распечатать документ.

    Основная проблема заключается в том, что нет способа запретить пользователю печатать обычным способом через меню браузера, поэтому вы должны убедиться, что вы всегда предоставляете видимую опцию для печати содержимого.

    Я привожу вам пример использования библиотеки html2canvas и события keydownдля перехвата комбинации Ctrl + p, которая представляет собой быстрый доступ к опции печати браузера, чтобы мы могли предотвратить печать по умолчанию и вместо этого давайте сделаем свою. Bootstrap также используется для просмотра качества рендеринга.

    document.addEventListener('keydown', function (e) {
  e.preventDefault();
  if (e.ctrlKey && e.key === 'p') {
    takeScreenshot(function (screenshot) {
      printPage(screenshot);
    });
  }
});

function printPage (screenshot) {
  var win = window.open('', 'prueba');
  win.document.write('<html>');
  win.document.write('<head></head>');
  win.document.write('<body>');
  win.document.write('<img src="' + screenshot + '"/>');
  win.document.write('</body>');
  win.document.write('</html>');
  win.print();
  win.close();
}

function takeScreenshot (cb) {
  html2canvas(document.getElementById('area'), {
    useCORS: true,
    onrendered: function (canvas) {
      var image = canvas.toDataURL();
      cb(image);
    }
  });
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <div id="area" class="container">
    <div class="jumbotron">
      <h2>Ejemplo de impresión</h2>
    </div>
    <table class = "table table-striped table-bordered">
       <caption>Usuarios activos</caption>
       
       <thead>
          <tr>
             <th>Name</th>
             <th>City</th>
             <th>Pincode</th>
            <th>Delete</th>
          </tr>
       </thead>
       
       <tbody>
          <tr>
             <td>John Doe</td>
             <td>Bangalore</td>
             <td>560001</td>
              <td>
                <button class="btn btn-danger btn-xs">Delete</button>
              </td>
          </tr>
          
          <tr>
             <td>Lourdes Reitz</td>
             <td>Mumbai</td>
             <td>400003</td>
              <td>
                <button class="btn btn-danger btn-xs">Delete</button>
              </td>
          </tr>
          
          <tr>
             <td>Angela Spoya</td>
             <td>Pune</td>
             <td>411027</td>
              <td>
                <button class="btn btn-danger btn-xs">Delete</button>
              </td>
          </tr>
       </tbody>
    	
    </table>
    </div>

    Единственное, что вам нужно сделать, это убедиться, что у вас есть разрешения для всплывающих окон. Этого можно избежать, сделав это в том же документе, перед вызовом window#printставится скриншот и удаляется родительский узел, а после его вызова узел ставится снова. У него могут быть некоторые ограничения, если вы используете реактивные фреймворки, такие как React или Vue.

    Примечание . Очевидно, StackOverflow блокирует всплывающие окна в вашем редакторе. Я сделал ручку , чтобы вы могли увидеть ее в действии.

    Поддерживать

    Все браузеры, которые реализуют Canvas :

    • IE 9+
    • Край (все версии)
    • Фаерфокс 3.6+
    • Хром 4+
    • Сафари 4+
    • Сафари iOS 3.2+
    • Торговля 10.1+
    • андроид браузер 3+

    Это не идеально, но намного лучше, чем печать по умолчанию.

    • 1