2017-12-24 4 views
0
  1. window.openとwindow.print機能を使用せずにページを印刷する必要があります。URLがhttpsで始まる場合、iframeの印刷がchromeで機能しない

  2. 以下のコードを使用してこれを実現しました。これは、URLがhttpsで始まっていない場合に動作します(atleastは私が考えたものです)。 URLがhttpsで始まる場合、chromeは空白のページを印刷します。リンクを印刷するために複数回クリックすると、ページデータが表示されることがあります。このコードは、IEとFireFoxで正しく動作します。

このコードを含むサンプルテストページを下のURLにアップロードしました。

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> 

答えて

0

問題はCSSファイルの読み込み時に発生しました。

以下の行がコメントされたときは、すべてうまく動作し始めました。 setTimeoutに指定された間隔の増加に

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

上記のコードは、CSSファイルをフェッチするために必要なintermittently.Since時間を働いていた機能は、サーバの位置で変化するであろう期待どおりに動作今 であり、以下のように、私は、コードを書き直し。

<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> 
関連する問題