Кнопка, чтобы печатать (Только контент DIV) сохраняя стили

У меня есть div

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 сохраняя стили этого.

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

Такой он такой, как видят в Вебе introducir la descripción de la imagen aquí

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

introducir la descripción de la imagen aquí

1
задан 11.01.2017, 18:16
0 ответов

Попытайся с этой функцией:

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" />
4
ответ дан 03.12.2019, 17:45
  • 1
    Функционируй, но он не сохраняет стили (css) –  11.01.2017, 12:14
  • 2
    ¿ Podrí схвати размещать aquí стили, что ты считаешь по отношению к нему помещенными в тебе div? –  11.01.2017, 12:55
  • 3
    @cnbandicoot для того, чтобы стили остались в HTML, который уходит в imprime, HTML должен содержать эти стили. Я рекомендую тебе обновлять твой ответ, чтобы показывать có mo ты можешь прилагать стили в HTML. –  11.01.2017, 18:37
  • 4
    Привет хороший день, большое спасибо из-за примера, подал меня многого, случайности кто-то будет знать, как прекращаться, когда печатается Страница 1 2 и маршрута url в конце листа? –  11.12.2017, 23:02

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

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

Способ ему удается ésto состоит в том, чтобы конвертировать документ в canvas и потом в изображение (по умолчанию PNG) посредством HTMLCanvasElement#toDataURL. Однажды сделанный ésto одинокий было бы достаточно добавлять изображение к tag <img> и печатать документ.

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

Я помещаю тебе пример используя книжный магазин html2canvas и событие keydown чтобы перехватывать комбинацию Ctrl + p что является быстрым доступом к выбору печати браузера, таким образом что мы можем предотвращать назначенную по умолчанию печать и в Вашем месте, мы сделали nuesta. Также он используется bootstrap, чтобы видеть качество renderizado.

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>

Единственное, что ты был бы должен делать, состоит в том, чтобы гарантировать тебя, что у тебя были разрешения для popups. Ésto может быть предотвращенным делаясь в том же документе, перед тем, как звонить в window#print кладется screenshot и удаляет узел отец, и после называя это, вновь кладется узел. Смоги иметь какие-то ограничения, если ты используешь frameworks такие реактивы как React или Vue.

Заметь: Как кажется, StackOverflow блокирует popups в Вашем редакторе. Я реализовал Pen для того, чтобы ты это увидел в функционировании.

Поддержка

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

  • IE 9 +
  • Edge (все версии)
  • Firefox 3.6 +
  • Chrome 4 +
  • Safari 4 +
  • Safari iOS 3.2 +
  • Произведи 10.1 +
  • Android browser 3 +

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

1
ответ дан 03.12.2019, 17:45
  • 1
    То, что я сделал в конце концов, состоит в том, чтобы помещать стили прямо в tags html с этикеткой style así сохрани какой-либо из стилей, который уже меня в порядке. –  13.01.2017, 10:10