Question

我需要在不使用window.open和window.print函数的情况下打印页面。
我使用以下代码实现了相同的目标。如果网址没有以https开头（至少这是我想到的），这是有效的。如果网址以https开头，则Chrome会打印出空白页面。有时在多次点击打印链接时，会显示页面数据。此代码在IE和FireFox中正常工作。

我已在上面的网址上传了一个带有此代码的示例测试页。

http://mediateqindia.com/testPrint.html（正常工作）

https://mediateqindia.com/testPrint.html（点击打印链接上的空白页）

两个链接都指向同一页面。

如何解决这个问题，以便在https中使用Chrome？

页面testPrint.html上的代码如下。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bindddddddddd</title>
</head>
<body>
<div id="testPrintDiv" >
Hiiiiiiiiiiiiiii
<br /><br />
Hellooooooooooooo
<br /><br />
World !!!!!!!!!!!!!!!!!!!!!!!!!!!s
<a href="javascript:printTest();">Print</a>
</div>
</body>
</html>



<script>
function printTest(){
var scale=1;
var contents=document.getElementById("testPrintDiv").innerHTML;
if(!scale){ 
    scale=".9";
}
    var printframe = document.createElement('iframe');
    printframe.name = "printframe";
    printframe.style.position = "absolute";
    printframe.style.top = "-1000000px";
    document.body.appendChild(printframe);
    var frameDoc = printframe.contentWindow ? printframe.contentWindow : printframe.contentDocument.document ? printframe.contentDocument.document : printframe.contentDocument;
    frameDoc.document.open();
    frameDoc.document.write('<meta http-equiv="X-UA-Compatible" content="IE=edge" /><html><head><title></title>');
    frameDoc.document.write('<link rel="stylesheet" type="text/css" href="/user/data/css/styles-min.css">');
    frameDoc.document.write('<style type="text/css">@media print { body {transform: scale('+scale+');} @page{margin-left: 0cm;} body {margin-left:0;padding:0;}'
                +'</style></head><body>');
       frameDoc.document.write(contents);
        frameDoc.document.write('</body></html>');
       frameDoc.document.close();

       setTimeout(function () {
            window.frames["printframe"].focus(); 
            window.frames["printframe"].print();       
             setTimeout(function () {
                document.body.removeChild(printframe);
             },5000);
        }, 750);

    //return false;     
}

</script>

Answer 1

问题在于加载css文件的时间。

当下面的行被评论时，everthing开始正常工作。

frameDoc.document.write('<link rel="stylesheet" type="text/css"
href="/user/data/css/styles-min.css">');

在增加为setTimeout函数指定的间隔时，上面的代码是间歇性地工作的。由于获取css文件所需的时间因服务器位置而异，我重写了下面的代码，现在是按预期工作。

<script>
function printTest(){
var scale=1;
var contents=document.getElementById("testPrintDiv").innerHTML;
if(!scale){ 
    scale=".9";
}
    var printframe = document.createElement('iframe');
    printframe.name = "printframe";
    printframe.style.position = "absolute";
    printframe.style.top = "-1000000px";
    document.body.appendChild(printframe);
    var frameDoc = printframe.contentWindow ? printframe.contentWindow : printframe.contentDocument.document ? printframe.contentDocument.document : printframe.contentDocument;
    $.when( $.ajax({url:'/user/data/css/styles-min.css',cache:true}) )
            .done(function(response) {
    frameDoc.document.open();
    frameDoc.document.write('<meta http-equiv="X-UA-Compatible" content="IE=edge" /><html><head><title></title>');
    frameDoc.document.write('<link rel="stylesheet" type="text/css" href="/user/data/css/styles-min.css">');
    frameDoc.document.write('<style type="text/css">@media Print {body {transform:scale('+scale+')}} @page{margin-left: 0cm;} body {margin-left:0;padding:0;}'
                +'</style></head><body>');
       frameDoc.document.write(contents);
        frameDoc.document.write('</body></html>');
       frameDoc.document.close();

       setTimeout(function () {
            window.frames["printframe"].focus(); 
            window.frames["printframe"].print();       
             setTimeout(function () {
                document.body.removeChild(printframe);
             },1500);
        }, 1500);

    });     
}

</script>

当网址以https

1 个答案: