カスタムスタイリングを使用してブートストラップグリッドレイアウトを印刷する
ジョン・ドウ
Bootstrap Gridを使用して、レイアウトを作成しました。Webページに表示されているものとまったく同じ、同じレイアウトで印刷したい変更なし。カスタムCSSコードを追加するためにjavascriptを使用したある種の印刷方法を使用しようとしましたが、すべて無駄でした。
これが、まったく同じように印刷したいサンプルレイアウト（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>
しかし、それも私を助けませんでした。
私の希望するレイアウト：
アマレシュSM
コードでは、新しいウィンドウを作成しています。ウィンドウを開くことができなかった場合は、null値が返されます。
Chromeブラウザを使用している場合は、コンソールを確認してください。
Uncaught TypeError：nulluのプロパティ 'document'を読み取ることができません。このエラーが表示されます。
これは、ブラウザのデフォルト設定が原因で、ポップアップがデフォルトでブロックされているためです。必要に応じて、許可するオプションを変更できます。
次に、ページをそのまま印刷する場合は、印刷中に倍率を調整する必要があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
- 前の投稿：Nativedatetimepickerの質問に反応します。このコードでは、なぜPlatform.OS === 'ios'？true：false？
- 次の投稿：CSS：オーバーフロー時にフレックスコンテナアイテムを次の行にプッシュします
関連記事
Related 関連記事
- 1
カスタムドロップダウンリスト（datatablesプラグイン）を正しいレイアウトで追加します
- 2
ボタンアイテムを使用してドロップダウンをブートストラップし、ボタンをクリックするとプログラムで閉じます
- 3
ポッドの依存関係からIB_DESIGNABLEを使用してカスタムコンポーネントをライブレンダリングする
- 4
カスタムCSSを使用してブーストラップでコンテナーをスタイリングする方法は？
- 5
Google ストレージ バケットを指すカスタム サブドメインを使用して SSL アプリ エンジンを追加する
- 6
タイムアウトを与えるワードプレスプラグインをデバッグする方法
- 7
ノックアウト-ブートストラップスタイリングを動的に生成する
- 8
カスタムドローアブルを使用してプログラムでスクリーンショットを作成する方法
- 9
OSMとリーフレットを使用してカスタムフロアタイルにアイコンをレンダリングする
- 10
ブートストラップ4グリッドレイアウトのカスタマイズ
- 11
アプリがバックグラウンドにあるときにタイムスタンプを保存します。リアクトネイティブ
- 12
テキストボックスとドロップダウンリストを使用してテーブルを検索し、データベースをフィルタリングします (リアルタイム検索)
- 13
ネストされたグリッドレイアウトをブートストラップします
- 14
jqueryを使用してリストアイテム内のブートストラップグリフィコンをスライドさせる方法は？
- 15
ブートストラップでグリッドレイアウトのスタイルを設定するにはどうすればよいですか?
- 16
cssを使用したレスポンシブライトルームスタイルのグリッド？
- 17
columnFilterプラグインを使用してドロップダウンリストにデータのリストを自動入力する方法
- 18
カスタムブートストラップスタイルのDjangoテンプレートを使用して<select>フィールドを配置する
- 19
WiX カスタム ブートストラップ アプリケーション インストーラーのアップグレード
- 20
カスケードドロップダウンリストのアイテムをasp.netmvcを使用してデータベースに保存する方法
- 21
マルチレベルインデックスを使用してPandasデータフレームでグループ化とローリングウィンドウを実行すると、インデックスエントリが重複します
- 22
ブートストラップ3-各グリッド列の後にレイアウトとブレークを印刷します
- 23
アップグレード時にWiXカスタムブートストラップが不足しているパッケージをアンインストールしないようにする方法
- 24
Android StudioのFlutterアプリでカスタムコードスニペット（ライブテンプレート）を使用する
- 25
クエリメソッドを使用してJPAでクエリをカスタマイズする使用方法（スプリングブート）
- 26
レイアウトでカスタム属性を使用するとアプリがクラッシュします
- 27
石積みとブートストラップを使用したグリッド レイアウト
- 28
フラッターでグリッドレイアウトを使用してこのタイプのレイアウトを作成する方法
- 29
ユーザーがアプリを非表示にするかデバイスの電源を切ると、swiftuiのカスタムタイマーがバックグラウンドフェッチでカウントを停止します
コメントを追加