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

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 浏览器检查您的控制台：

未捕获的类型错误：无法读取 null 的属性“文档”，您可以看到此错误。

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

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-01-23 11:03:26

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-01-23 11:03:26

解决方案1
0 已采纳 2020-01-23 11:03:26