在应用CSS的情况下打印div内容 | 在应用CSS的情况下打印div内容

本文介绍了在应用CSS的情况下打印div内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在一个项目上，我想打印div内容.我正在使用的代码可以满足我的要求，但是我得到的输出很简单，没有应用Css，也没有得到图像.请帮助我.我要附加代码并输出我想要的输出.

I am working on a project and I want to print div content.The code which I am using is fulfilling my requirements,but I am getting simple output without Css applied to it and also not getting the image.Please help me.I am attaching the code and output I am getting and output I want.

代码:

function PrintElem(elem) {
    Popup($(elem).html());
}

function Popup(data) {
    var mywindow = window.open('', 'new div', 'height=400,width=600');
    mywindow.document.write('<html><head><title></title>');
    mywindow.document.write('<link rel="stylesheet" href="css/midday_receipt.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');

    mywindow.print();
    mywindow.close();

    return true;
}

我在单击打印按钮之前得到的输出:

Output I am getting before clicking print button:

我通过单击打印按钮得到的输出:

Output I am getting by clicking print button:

推荐答案

如果要渲染CSS，则必须在打印之前添加超时，因为将CSS应用于HTML需要花费一些时间，然后您就可以进行打印.

If you wanna render the CSS you must add a timeout before printing it because it takes some time for CSS to be applied to the HTML and then you will be able to print it.

尝试一下:

function Popup(data) {
      var mywindow = window.open('', 'new div', 'height=400,width=600');
      mywindow.document.write('<html><head><title></title>');
      mywindow.document.write('<link rel="stylesheet" href="css/midday_receipt.css" type="text/css" />');
      mywindow.document.write('</head><body >');
      mywindow.document.write(data);
      mywindow.document.write('</body></html>');
      mywindow.document.close();
      mywindow.focus();
      setTimeout(function(){mywindow.print();},1000);
      mywindow.close();

      return true;
}

这篇关于在应用CSS的情况下打印div内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！