媒體打印不適用於chrome，但在firefox中效果很好

Question

我有這個js函數：

function print(title, htmlPrint) {
   var w = window.open('', '', 'width=600,height=750');
   w.document.title = title;
   w.document.write('<link rel="stylesheet" type="text/css" href="print.css" />');
   w.document.write(htmlPrint);
   w.document.close(); // needed for chrome and safari
   w.print();
   w.close();
   return false;
}

在CSS中，我有這樣的事情：

@media print, screen{ 
.....
}

在firefox中按預期工作：顯示標題和內容，在chrome中僅顯示標題和空白頁（打印時相同）。

我也嘗試過使用@media print{}或@media all{} ，但仍然無法正常工作。

我還嘗試在<link... />添加media="print" ，這樣做會加載CSS，但不會對頁面應用任何CSS。

我也嘗試過更改功能並使用w.document.head.innerHtml和w.document.body.innerHtml仍然沒有，其行為與.write()相同。

Answer 1

對我有用的是：

首先，我必須獲取css文件的完整路徑，並在link標簽中設置媒體打印。

if (/chrome/i.test(navigator.userAgent)) {
     w.document.write('<link rel="stylesheet" type="text/css" href="' + location.protocol + '//' + location.host + (new String(location.pathname.substring(0, location.pathname.lastIndexOf("/")))) + '/print.css" media="print" />');
}else{
     w.document.write('<link rel="stylesheet" type="text/css" href="print.css" />');
}

然后它仍然無法正常工作，我只是發現w.close()對Chrome造成了問題。

if (/chrome/i.test(navigator.userAgent) === false) {
    w.close();
}