限制打印某些元素

Question

我正在尝试仅使用 JavaScript 打印某些元素。例如，当单击链接时，它将打开打印对话窗口。但是，我希望不打印表格的某些元素，并且标题位于一行而不是分成多行。

我想摆脱编辑和删除表格单元格并将所有表格标题放在一行上。这是我当前的 JavaScript 代码：

$('#print').on('click', function() {
    var content = document.getElementById("sample_editable_2");
    var holderWindow = window.open("");

    holderWindow.document.write(content.outerHTML);
    holderWindow.print();
    holderWindow.close();
});

抱歉，如果不清楚，我以前从未尝试过。

感谢您提供的任何帮助。

• 编辑：

这是我的 css 文件

 @media print {
    .h_edit {
        display: none;
    }

    .h_delete {
        display: none;
    }

    .b_edit {
        display: none;
    }

    .b_delete {
        display: none;
    }

    .order-issue {
        white-space: nowrap;
    }

    .sub-shipping-issue {
        white-space: nowrap;
    }

    .sub-refunds-returns-issue {
        white-space: nowrap;
    }

    .sub-update-issues {
        white-space: nowrap;
    }

    .sub-campaign-issues {
        white-space: nowrap;
    }

    .sub-campaign-change-issues {
        white-space: nowrap;
    }

    .sub-campaign-design-issues {
        white-space: nowrap;
    }

    .sub-teeforall-works {
        white-space: nowrap;
    }

    .order-id {
        white-space: nowrap;
    }

    .site-url {
        white-space: nowrap;
    }
}

我这样调用 css 文件：<link rel="stylesheet" media="print" type="text/css" href="/css/print.css">

但它仍然没有隐藏元素并使它们不换行。

Answer 1

我不明白这与 javascript 有什么关系。为了控制页面的打印方式，您需要编写一个仅用于打印的 css 文件。类似的东西

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

那么在print.css 你应该这样做

.print-hide {
   display: none; // or whatever you want
}

任何带有.print-hide 的项目都将使用上述CSS 处理。

Answer 2

完成Amir Raminfar's answer，为您的第二个请求

并且标题在一行而不是分成多行

您可以在相同的“仅打印”CSS 中添加一条指令，以使某些项目不进入下一行。请注意，当必须重新设计整个表格时，这可能会破坏页面布局。

.print-one-line {
    white-space: nowrap;
}

所以：

<td class="print-hide">This won't appear</td>
<td class="print-one-line">This will not go on the next line</td>

要验证它是否正常工作，您可以检查 CSS 控制台并使用 Media Type Emulation（如果在浏览器中可用）。