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

Question

I was working with Bootstrap Grid and made a Layout.我正在使用 Bootstrap Grid 并制作了一个布局。 I want to print exactly the same that is displaying on the Web Page, same layout No change.我想打印与网页上显示的完全相同，相同的布局没有变化。 I try to use some sort of print method using javascript for adding custom CSS codes but all in vain.我尝试使用某种使用 javascript 的打印方法来添加自定义 CSS 代码，但都是徒劳的。

Here is my sample layout ( Fiddle ) that I want to print exactly the same.这是我想要打印的完全相同的示例布局 ( Fiddle )。

The last print JavaScript code that I tried was:我尝试的最后一个打印 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>

But it also did not help me.但它也没有帮助我。

My desired layout:我想要的布局：

Answer 1

In your code, you are creating a new window If the window couldn't be opened, it returns a null value.在您的代码中，您正在创建一个新窗口如果无法打开该窗口，它将返回一个空值。

if ur using chrome browser check ur console:如果您使用 chrome 浏览器检查您的控制台：

Uncaught TypeError: Cannot read property 'document' of null u can see this error.未捕获的类型错误：无法读取 null 的属性“文档”，您可以看到此错误。

This is because of browser's default settings the pop-ups are blocked by default.这是因为浏览器的默认设置默认情况下会阻止弹出窗口。 if you want u can change the option to allow.如果您愿意，您可以更改选项以允许。

Then if you want to print the page as it is you have to adjust the scale factor while printing .然后，如果您想按原样打印页面，则必须在打印时调整比例因子。

使用自定义样式打印 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