首页 > web前端 > css教程 > ✨ 打印 div 的简单技巧

✨ 打印 div 的简单技巧

WBOY
发布: 2024-08-02 04:25:02
原创
756 人浏览过

✨ Simple trick for printing a div

优点

  • 您的页面在打印后仍保持交互性
  • 与框架配合良好
  • 不需要复制您的 UI 进行打印

步骤

  1. 打印模式下隐藏页面的所有内容
  2. 使目标元素在打印模式下可见

步骤1

@media print {
  body {
    visibility: hidden;
  }
}
登录后复制

步骤2

@media print {
  #section-to-print {
    top: 0;
    left: 0;
    position: absolute;
    visibility: visible;
  }
}
登录后复制

然后打印

const button = document.querySelector('print-page');

button.addEventListener('click', () => window.print());
登录后复制

此方法避免了失去交互性的陷阱,其他方法将整个页面内容替换为静态 HTML,从而失去了交互性。

const printContents = document.getElementById(divId).innerHTML;
const originalContents = document.body.innerHTML;

document.body.innerHTML = printContents;

window.print();

document.body.innerHTML = originalContents;
登录后复制

以上是✨ 打印 div 的简单技巧的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板