引导样式不适用于打印答案

【问题标题】：Bootstrap style no applying to print引导样式不适用于打印
【发布时间】：2014-05-02 15:20:28
【问题描述】：

我有以下代码来打印我的应用程序持有的表格：

    var elementToPrint = this.mainTable.get(0);

    newWin = window.open("");
    newWin.document.write('<html><head><title>' + elementToPrint.caption + '</title>' +
                        '</head><body class=\'visible-print\'>');
    newWin.document.write(elementToPrint.outerHTML);
    newWin.print();
    newWin.close();

this.mainTable 是一个 jQuery 对象。

在我的公共页面 (_Layout.cshtml) 我有：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="UTF-8" />

    <title>MyApp</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" media="all">
    <link href="@Url.Content("~/Content/bootstrap-theme.min.css")" rel="stylesheet" media="all">
</head>

打印例程运行良好，只是它失去了所有样式，打印带有未格式化数据的纯文本（并排数据）。

我需要保留原始引导布局（颜色、边框、条带等）。请问有什么需要改的...

谢谢，

【问题讨论】：

标签： jquery asp.net css twitter-bootstrap

【解决方案1】：

当您创建一个新窗口时，它实际上会创建一个新的 html 页面，该页面不继承自您的母版页。因此，新的 html 页面将没有您的引导 css 引用。

您应该在记录时添加这些引导 css 引用。编写如下，

newWin.document.write('<html><head><title>' + elementToPrint.caption + '</title>');
newWin.document.write('<link href="Your-Path/bootstrap.min.css" rel="stylesheet" />');
newWin.document.write('<link href="Your-Path/bootstrap-theme.min.css" rel="stylesheet" />');
newWin.document.write('</head><body class=\'visible-print\'>');

更新标准 twitter-bootstrap 确实包含媒体类型 Print 的 css 规则，如下所示，它删除了任何屏幕 css 规则，

@media print {
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

您需要获得自定义引导程序，没有“打印媒体样式”（推荐）或手动删除这些@media print。

这是Plunker that shows Printing with Bootstrap CSS styles

【讨论】：

你确定css文件的路径正确吗？
嗯，你能在链接中添加“媒体”属性并检查吗？
是的.. 不工作。有什么方法可以检查路径是否正确？即使在浏览器调试 F12 中也没有设置错误。
好的，引导程序具有@Print 媒体属性。它开始如下， print { * { color: #000 !important;文字阴影：无！重要；背景：透明！重要；盒子阴影：无！重要；如果您想要打印中的颜色，您将需要摆脱这些。您可以从getbootstrap.com/customize/?id=9775022 获得没有这些“打印”的自定义引导程序
这是否解决了您的问题？