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

我有一个 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保留 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 的情况下进行打印。同时，我们必须想方设法效仿这一任务。

    实现此目的的一种方法是将文档转换为画布，然后通过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 的浏览器：

    • 浏览器 9+
    • 边缘（所有版本）
    • 火狐 3.6+
    • 铬 4+
    • 野生动物园 4+
    • Safari iOS 3.2+
    • 交易 10.1+
    • 安卓浏览器 3+

    它并不完美，但比默认打印要好得多。

    • 1