使用自定义样式打印引导网格布局答案

【问题标题】：Print Bootstrap Grid Layout using Custom Styling使用自定义样式打印引导网格布局
【发布时间】：2023-03-24 06:18:01
【问题描述】：

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

但它也没有帮助我。

我想要的布局：

【问题讨论】：

如果你想打印网页，你想做什么，然后复制内容并将其粘贴到打印功能中
这样做不会打印完全相同的布局。
现在你正在尝试什么，你想使用打印方法打印整个内容，你已经创建了 windowobject？
先生，有人告诉我必须为它编写内联样式但是我添加了引导程序的参考样式表链接而不是内联样式。先生，我只想打印与网页上显示的完全相同的布局。如果可以，请提供帮助。

标签： javascript css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

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

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

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

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

【讨论】：

这不是问题，先生。如果您尝试使用 Ctrl+P 打印它，那么它将不会以我想要的格式/布局打印。
所以你想在打印时打印成单页，对吗？ @JohnDoe
我昨天已经接受了，但我不知道为什么它又不接受了。我又接受了。