的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改变

回答

相关问题