的Javascript打印不使用CSS改變

我試圖打印使用下面的代碼的HTML內容的jQuery的Javascript打印不使用CSS改變

function printTable() { 
    var divToPrint = document.getElementById("tblTranscript"); 
    newWin = window.open(""); 
    newWin.document.write('<html><head><title>Page</title>'); 
    newWin.document.write('<link rel="stylesheet" href="bootstrap.css"/>'); 
    newWin.document.write('</head><body>'); 
    newWin.document.write(divToPrint.outerHTML); 
    newWin.document.write('</body></html>'); 
    newWin.print(); 
    newWin.close(); 
} 

$('#print').on('click', function() { 
    printTable(); 
})

它顯示在打印預覽上表中，但CSS的更改不會應用於表。我嘗試了不同的組合爲CSS href路徑。我能夠通過瀏覽器直接訪問css文件，但不知何故，它在打印時不顯示。

來源

2016-10-04 Sushil

如果使用CSS印刷媒體，沒有任何理由需要使用彈出窗口。 – epascarello

您需要可打印的CSS ... bootstrap不可打印 https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/ – Felix

window.printItn = function(myID) { 
    'use strict'; 
    var printContent = document.getElementById(myID), 
     windowUrl = 'about:blank', 
     uniqueName = new Date(), 
     windowName = 'Print' + uniqueName.getTime(), 
     stylesheet = $('body').data('theme'), 
     WinPrint; 

    WinPrint = window.open(windowUrl, windowName, 'left=300,top=300,right=500,bottom=500,width=1000,height=500'); 
    WinPrint.document.write('<' + 'html' + '><head><style type="text/css">@import "' + stylesheet + '";</style></head><' + 'body style="background:none !important"' + '>'); 
    WinPrint.document.write(printContent.innerHTML); 
    WinPrint.document.write('<' + '/body' + '><' + '/html' + '>'); 
    WinPrint.document.close(); 
    WinPrint.focus(); 
    WinPrint.print(); 
    WinPrint.close(); 
}; 

$(".print").on('click', function() { 
    printItn('YOUR-ID'); 
    return false; 
});

這對我的作品

來源

2016-10-04 13:36:31

不適用於我 – Sushil

樣式表來到undefined – Sushil

你需要改變樣式表文件url 'stylesheet = $（'body'）。data（'theme'）'，像'stylesheet ='http://example.com/assets/print .css'' –

的Javascript打印不使用CSS改變

回答

相關問題