使用javascript打印时媒体打印不正确_Javascript_Html_Css_Printing

使用javascript打印时媒体打印不正确

javascript html css printing

使用javascript打印时媒体打印不正确,javascript,html,css,printing,Javascript,Html,Css,Printing,我正在尝试使用以下javascript代码打印div，如下所示： var divToPrint = document.getElementById(curid); var newWin = window.open('', 'Print-Window'); newWin.document.open(); newWin.document.write('<html><head><link rel="stylesheet" href="css/

我正在尝试使用以下

javascript

代码打印div，如下所示：

var divToPrint = document.getElementById(curid);

    var newWin = window.open('', 'Print-Window');

    newWin.document.open();

    newWin.document.write('<html><head><link rel="stylesheet" href="css/bootstrap.css"><link rel="stylesheet" href="css/font-awesome.min.css"><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" type="text/css" media="print" href="css/print.css"></head><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');



    newWin.document.close();

    setTimeout(function () {
        newWin.close();
    }, 10);

@media print {
        font-size:10px;
        font-family: Calibri;

    }

@media print {
    body{
        font-size:10px;
        font-family: Calibri;
    }
}

打印div样式如下所示：

字体大小：8pt；字体系列：Calibri

当我看到div时，它是正确的。但当我打印时，字体大小为12 font size，这是我在open office中查到的

我试图更改媒体打印属性，但无法正常工作。

您的css应如下所示：

var divToPrint = document.getElementById(curid);

    var newWin = window.open('', 'Print-Window');

    newWin.document.open();

    newWin.document.write('<html><head><link rel="stylesheet" href="css/bootstrap.css"><link rel="stylesheet" href="css/font-awesome.min.css"><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" type="text/css" media="print" href="css/print.css"></head><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');



    newWin.document.close();

    setTimeout(function () {
        newWin.close();
    }, 10);

@media print {
        font-size:10px;
        font-family: Calibri;

    }

@media print {
    body{
        font-size:10px;
        font-family: Calibri;
    }
}

只有当媒体查询匹配时，媒体查询{}之间的内容才会“运行”。因此，在此之前，这些{}之间没有有效的CSS。

您的CSS应如下所示：

var divToPrint = document.getElementById(curid);

    var newWin = window.open('', 'Print-Window');

    newWin.document.open();

    newWin.document.write('<html><head><link rel="stylesheet" href="css/bootstrap.css"><link rel="stylesheet" href="css/font-awesome.min.css"><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" type="text/css" media="print" href="css/print.css"></head><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');



    newWin.document.close();

    setTimeout(function () {
        newWin.close();
    }, 10);

@media print {
        font-size:10px;
        font-family: Calibri;

    }

@media print {
    body{
        font-size:10px;
        font-family: Calibri;
    }
}

只有当媒体查询匹配时，媒体查询{}之间的内容才会“运行”。所以之前你在这些{}之间没有有效的CSS。

不起作用。我甚至给了一个背景色。不工作。我是否正确地在js中调用print.css进行打印？@media print根本不起作用。我甚至还试过背景色，但没印出来。没用。我甚至给了一个背景色。不工作。我是否正确地在js中调用print.css进行打印？@media print根本不起作用。我甚至还试过背景色，但没有印出来。