Question

我正在使用Bootstrap Grid并进行布局。我要打印与网页上显示的完全相同的布局，并且布局不变。我尝试使用一种使用javascript的打印方法来添加自定义CSS代码，但这些都是徒劳的。

这是我想要完全一样打印的样本布局（Fiddle）。

我最后一次尝试的印刷JavaScript代码是：

<script>
var all_source_content = document.documentElement.innerHTML;
var DocumentContainer = document.getElementById('main_container');
var WindowObject = window.open('', 'PrintWindow', '');
WindowObject.document.writeln('<!DOCTYPE html>');
WindowObject.document.writeln('<html><head><title></title>');
WindowObject.document.writeln('<link rel="stylesheet" href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css">');
WindowObject.document.writeln('<style></style>');
WindowObject.document.writeln('</head><body>');
console.log(DocumentContainer.innerHTML);
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.writeln('</body></html>');
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
</script>

但这也没有帮助我。

我想要的布局：

Answer 1

在代码中，您正在创建一个新窗口。如果无法打开该窗口，它将返回一个空值。

如果您使用Chrome浏览器，请检查控制台：

未捕获的TypeError：无法读取null的属性'document' 您可以看到此错误。

这是由于浏览器的默认设置，所以默认情况下会阻止弹出窗口。如果您愿意，可以将选项更改为允许。

然后，如果要按原样打印页面，则必须在打印时调整比例因子。

使用自定义样式打印Bootstrap网格布局

1 个答案: