简体   繁体   English

如何在Rails上的Ruby中获取完整打印其css的页面?

[英]How to get a page printed with its css intact in ruby on rails?

在此处输入图片说明 I am using ruby-on-rails-3.2 app, trying to get print-out of a page but when it gets printed its doesnt have it css. 我正在使用ruby-on-rails-3.2应用程序,尝试获取页面的打印输出,但是当它被打印时,它没有CSS。 Here is my code 这是我的代码

   <%= link_to("Print this Page", "#", :onclick =>"PrintElem('.PrintElem','News Details')") %>


    function PrintElem(news_heading, reporters_details, full_news_text, title)
    {
    heading = jQuery('head').html();
    body_data = jQuery('body').html();
    Popup(heading, body_data);
    return true;
    }

    function Popup(news_heading, body_data)
    {//start
    // var mywindow = window.open('','printwindow');
    mywindow = window.open('#','printing','height=900,width=900,scrollbars=1');
    mywindow.document.write('<html><head>'+heading+'</head><body onload="window.print();">');
    mywindow.document.write(body_data);
    mywindow.document.write('</body></html>')
    mywindow.onload = function() { mywindow.print(); }
    mywindow.document.close();
    return true;
    //end
    }

Here problem is that page is printed before loading javascripts and css. 这里的问题是在加载javascript和CSS之前先打印页面。 This page should be print after all javascript and css is loaded. 加载所有JavaScript和CSS之后,应打印此页面。 Thanks in Advance. 提前致谢。

Try creating a document with the css and the javacstcipt basically the 尝试使用css和javacstcipt创建文档,基本上

<html>
<head>
//Your css
//Your scripts
</head>
<body>
</dody>
</html>

Then open 然后打开

window.open('/somefile.html', 'Yout Title maybe from the document', 'width=900');

Then use jQuery to populate the dummy print page(body area); 然后使用jQuery填充虚拟打印页面(正文区域);

$(body).prepend(body_data);

Maybe you are not loading the css and javascript correctly while writing all the html after the page is loaded with javascript. 页面加载javascript后,编写所有html时,也许您没有正确加载css和javascript。

Keep in mind you need some css rules for pages to print correctly (colors, styles) 请记住,您需要一些CSS规则才能正确打印页面(颜色,样式)

-webkit-print-color-adjust:exact; // For chrome browser

Tell me if it works for you! 告诉我它是否适合您!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM