javascript - 使用自定义样式打印引导网格布局

问题描述

我正在使用 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>

但这也没有帮助我。

我想要的布局：

标签： javascriptcsstwitter-bootstraptwitter-bootstrap-3

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

如果您使用 chrome 浏览器检查您的控制台：

Uncaught TypeError: Cannot read property 'document' of null 你可以看到这个错误。

这是因为浏览器的默认设置默认阻止弹出窗口。如果您愿意，您可以更改选项以允许。

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

javascript - 使用自定义样式打印引导网格布局

问题描述

解决方案

推荐阅读