Question

我已经按照answer来打印视图的特定元素，但效果很好，但没有CSS样式。我想用一些字段打印一个bootstrap表，没什么太花哨的。这是我最终使用的代码：

function printDiv(divId) {
  window.frames["print_frame"].document.body.innerHTML= $("." + divId).html();
  window.frames["print_frame"].window.focus();
  window.frames["print_frame"].window.print();
}

答案中有一个额外的部分，它声明了这一点：

printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">')

后来在html中连接如下：

printDivCSS + $("." + divId).html()

我添加了一个scss文件，但它没有正确显示引导表，这似乎是合理的，因为它没有在那个sass文件中定义（虽然其他的已经定义并正确显示）。

所以真正的问题应该是：如何正确打印带有css格式的引导程序表？它正在打印正确的ATM信息，但它非常难看。

该应用程序是一个rails应用程序。我在其中拥有所有css文件：

添加/资产/样式表

我需要包含bootstrap资产。我有以下文件：

bootstrap_and_override.css.less

@import "twitter/bootstrap/bootstrap";
// Glyphicons
@import "twitter/bootstrap/glyphicons.less";

我尝试过：

printDivCSS = new String ('<link href="bootstrap_and_overrides.css.less" rel="app/assets/stylesheet">')

以与以前类似的方式，但它也不起作用。

Answer 1

评论中讨论的惰性解决方案是添加所有文件。你会这样做

printDivCSS = new String ('<link href="file1.css" rel="stylesheet" type="text/css"><link href="file2.css" rel="stylesheet" type="text/css"><link href="file3.css" rel="stylesheet" type="text/css">');

我不知道您使用的css文件在哪里或哪些，您只需将路径交换为您在项目中使用的实际路径。

编辑以示例：

让我们说例如你正在使用bootstrap cdn。那么你会有什么样的 -

printDivCSS = new String ('<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">

因此，您只需将href更改为指向您的引导程序，或任何您正在使用的CDN。如果您有多个css文件，只需添加另一个链接。 请注意 cdn正在使用css文件，而不是sass / less / scss / whatever，因为那些是需要在浏览器读取之前编译为css的CSS预处理器。

您在这里所做的就是将您的css文件提供给打印文档，就像将<link>标记放在index.html的标题中一样。

Javascript打印窗口部分

1 个答案: