html - 如何使用打印按钮从html页面仅打印一个div内容

标签 html css

我的 html 代码中有 2 个 div 标签。页面顶部有 1 个打印按钮。当我单击打印按钮时,它会打印 html 页面上的所有内容(意味着来自两个 div 的内容)。我想限制此打印按钮的功能,直到仅第一个 div,并且我将在下一个 div 之前添加另一个打印按钮以独立打印该 div 内容。有什么办法可以做到这一点吗?

    <html>
     <body>
      <input type="button" value="Print" class="noprint" onclick="window.print();return false;">
       <div>
          ...
          //my content.Want to print only this div when I will click print button.
          ...
       </div>
       //I will add another print button here which will allow me to print the next div.
       <div>
         ...
          //my content
         ...
        </div>
      </body>
     </html>

最佳答案

@media print {
   * 
    {    
     display: none !important;
    }

   .printable
    {
     display: block !important;
    }
}

然后将可打印类添加到要打印的 div 中。

关于html - 如何使用打印按钮从html页面仅打印一个div内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26667390/

相关文章:

html - 根据屏幕分辨率调整iFrame的高度

javascript - 在图像完全加载之前显示预加载 gif?

javascript - 如何使 html 中的框过渡更平滑?

html - 具有固定位置的 CSS 表格页脚

javascript - 如何让 iframe 在现有页面顶部的页面前面加载?

html - 页脚未显示在底部

javascript - Bootstrap - 如何缩小图像以适应窗口高度?

html - Wkhtmltopdf 页脚未随位置渲染

css - 使用 Node.js 和 Express 时,路由参数导致 CSS 无法加载

html - CSS 图像未在 Sublime Text 2 中显示