如何使用Javascript打印指定div内容并保留全部CSS样式

问题根因 #

原有实现存在两个核心问题导致样式丢失：

1. JS 仅提取了 container 元素的内部HTML，丢失了 container 自身的class属性，对应的容器样式自然无法生效
2. 未指定CSS对打印媒体的适配，浏览器打印时默认不会应用仅作用于屏幕的样式

方案1：优化现有JS逻辑（适配原有写法） #

步骤1：调整CSS引入配置 #

确保你的doc.css同时作用于屏幕和打印场景，修改HTML中的CSS引入标签：

<link rel="stylesheet" href="doc.css" media="screen,print">

步骤2：修改打印JS函数 #

保留完整的container元素属性，避免外层样式丢失：

function printable(paravalue){
    // 保存原始页面状态
    const originalBody = document.body.innerHTML;
    const originalScrollPos = window.scrollY;
    // 克隆完整的目标元素（包含自身的class/id等所有属性）
    const targetContainer = document.getElementById(paravalue).cloneNode(true);
    // 替换body内容为克隆的完整容器
    document.body.innerHTML = '';
    document.body.appendChild(targetContainer);
    // 触发打印
    window.print();
    // 恢复原始页面
    document.body.innerHTML = originalBody;
    window.scrollTo(0, originalScrollPos);
}

方案2：CSS媒体查询实现（更稳定，推荐） #

该方案不需要修改DOM结构，不会破坏原有页面的JS事件绑定，兼容性更好。

步骤1：调整CSS引入 #

和方案1一致，确保doc.css适配打印媒体。

步骤2：新增打印专用CSS规则 #

在doc.css末尾添加如下规则，打印时仅展示container内容，其余元素全部隐藏：

/* 打印场景专属样式 */
@media print {
  /* 隐藏所有非必要元素 */
  body * {
    visibility: hidden;
  }
  /* 仅保留container及其内部元素可见 */
  .container, .container * {
    visibility: visible;
  }
  /* 调整容器位置贴合打印纸张 */
  .container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
  /* 配置打印纸张边距 */
  @page {
    margin: 1cm;
  }
  /* 可选：避免内容被分页截断 */
  .title, .body {
    page-break-inside: avoid;
  }
  /* 可选：强制打印背景色/背景图，同时需要用户在浏览器打印设置开启「打印背景图形」 */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

步骤3：简化JS函数 #

不需要再替换DOM，直接调用打印即可：

function printable(){
    window.print();
}

内容的提问来源于stack exchange，提问作者Ritankar Bhattacharjee