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。

限制某些元素被打印

2 个答案: