使用自定義樣式打印 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