Question

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

    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>

打印例程运行正常，但它丢失了所有样式，打印带有未格式化数据的纯文本（并排数据）。

我需要保留原始的bootstrap布局（颜色，边框，条带等）。需要改变的是什么......

谢谢，

Answer 1

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

你应该在document.write中添加这些引导程序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;
  }

您需要获得一个自定义引导程序，而不需要打印媒体样式＆＃34; （推荐）或手动删除这些@media打印。

这是Plunker that shows Printing with Bootstrap CSS styles

Bootstrap样式不适用于打印

1 个答案: