Print a Web Page Using JavaScript

Thường thì hàm này không lấy được css trên fifefox window.print not working in firefox

Recently I was implementing a functionality where we upload a file to server, retrieve its data then show summary based on it. I was showing this summary in a panel with a print button. This print button uses JavaScript function window.print () to print the summary report from the contents of the panel. Here is the function that I was using –

1
2
3
4
5
6
7
8
9
function CallPrint() {
    var prtContent = document.getElementById('<%= pnlSummary.ClientID %>');
    var winPrint = window.open('', '', 'left=0,top=0,width=800,height=600,toolbar=0,scrollbars=0,status=0');
    winPrint.document.write("<h3>Summary</h3>" + prtContent.innerHTML);
    winPrint.document.close();
    winPrint.focus();
    winPrint.print();
    winPrint.close();
}

Everything was working fine until it came to Firefox. In Firefox the print dialog was not getting opened in the new window. To resolve this I changed the calling mechanism of the print function, I added a new page to project solution Print.aspx. Instead of opening a new window without any URL, I opened this page in the window and accessed the contents of the pnlSummary from the opened window via window.opener object –

1
2
3
function CallPrint() {
    var winPrint = window.open('Print.aspx', '', 'left=0,top=0,width=800,height=600,toolbar=0,scrollbars=0,status=0');
}

On Print.aspx page I used this function –

1
2
3
4
5
6
7
function Print() {
    var prtContent = "<h3>Summary</h3>" + window.opener.document.getElementById('ctl00_cphContent_pnlSummary').innerHTML;
    document.getElementById("printDiv").innerHTML = prtContent;
    window.print();
    window.opener.focus();
    window.close();
}

and called it on body onload.

1
2
3
4
5
6
<body onload="Print();">
    <form id="form1" runat="server">
    <div id="printDiv">
    </div>
    </form>
</body>

nguồn :http://utkarshpuranik.com/

Các trình duyệt khác đều sử dụng được trừ fifefox

<A HREF=”javascript:window.print()”>Click to Print This Page</A>

<A HREF=”javascript:window.print()”>
<IMG SRC=”print_image.gif” BORDER=”0″</A>

<SCRIPT LANGUAGE="JavaScript"> 
if (window.print) {
document.write('<form><input type=button name=print value="Print" onClick="window.print()"></form>');
}
</script>
Advertisements

Hàm Input type Radio click vào Change

<input type=”radio” name=”group” id=”group” value=””>

$( “input[name=’group’]” ).on(
{
‘change’ : function( )
{
$.each( $( “input[name=’group’]” ),
function( )
{
var ObjectId, ObjectValue;

if( $(this).is(‘:checked’) )
{

console.log(this);
ObjectId = $(this).attr( ‘id’ );
ObjectValue = $(this).val( );

}

});
}
});

html5reset.css là gì? hay còn gọi htmlreset.css là gì?

Đa số nhiều người thắc mắc và không biết htmlreset.css là gì hoặc html5reset.css là gì ? Thật ra hai tên gọi này chỉ là một nhưng một số trình duyệt mới bây giờ một số thẻ html5 được sử dụng còn một số trình duyệt củ thì thẻ html5 không được sử dụng. Tạm thời gọi theo trào lưu mới bây giờ là html5reset.css

Thường thì lúc mới đầu đi làm tớ không quan tâm vấn đề html5reset.css này cho lắm(nói chung là tớ không biết 😀 ) vì đa số coder html5, html cơ bản thường tự viết và không bao giờ dùng framework nhưng một người Front End Developer thì khác , họ biết phải sử dụng cái nào phù hợp nhất cho việc làm website mà vì thế htmlreset.css đã ra đời đối với tớ như vậy.

Firefox, Safari,  Opera, Cờ rôm (cốc cốc), chrome , IE tạm thời tớ biết được nhiêu đây thôi á nha. Tất cả trình duyệt này đều có cấu trúc và thẻ html khác nhau , và để đồng nhất tất cả chúng lại thì ta có htm5reset.css cơ bản chức năng nó là như vậy.

 

/* html5reset.css – 07/07/2014*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

body {
line-height: 1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display: block;
}

nav ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}

a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}

/* change colours to suit your needs */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}

input, select {
vertical-align: middle;
}