JavaScriptを介して開いたウィンドウに出力を印刷する際に問題があります。私はwindow.open
経由で新しい文書を作成し、ブートストラップファイルへのCDNリンクを添付しています。開いているウィンドウでは、すべてが正常に見えますが、プリント(XPSドキュメントライター)を使用すると、ここでいくつかのスタイル(.btn-group
)がありますが、レイアウトやインラインスタイルはありません。js window.openの後にhtml/cssレイアウトを印刷
Q:新しいウィンドウに表示されるものをどのように印刷できますか?
CDNのリンクでは、media='all'
(ただし、media='print'
も試しています)。
の作業例: jsfiddle
$('#openNewWindow').click(function(e){
var printWindow = window.open('', '_blank', 'width=1100, height=500');
printWindow.document.open();
printWindow.document.write("<!doctype html><head><title>title</title>");
var cdn = `
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" media="all" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" media="all" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
`;
printWindow.document.write(cdn);
printWindow.document.write("</head><body>");
content = `
<div class="container-fluid">
<div class="row">
<div class="col-md-8" style="background-color: red">.col-md-8</div>
<div class="col-md-4" style="background-color: blue">.col-md-4</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
`;
printWindow.document.write(content);
printWindow.document.write('</body></html>');
printWindow.document.close(); // necessary for IE >= 10
printWindow.focus(); // necessary for IE >= 10*/
setTimeout(function() {
printWindow.print();
},1000)
});