printing-web-page | 易学教程

Using CSS and/or jQuery for Printed Pages with Page Breaks

阅读更多关于 Using CSS and/or jQuery for Printed Pages with Page Breaks

I have a dynamically generated html page which is designed to be printed. I would like to create page breaks based upon div sections - where any given div - if it DOES NOT fully fit on the page, insert a page break before it. In theory, anywhere from a single div, up to perhaps 10, may fit on a single printed page, so I am thinking I will need to use jQuery to to the insertions after the page is loaded. If this were a desktop application, I would approach it something like this: Measure the page width and height (using printer object of some sort). Measure each div height - and subtract that

Print Stylesheets for pages with long horizontal tables

阅读更多关于 Print Stylesheets for pages with long horizontal tables

问题 I have a page that spits out db data in long horizontal tables. I need to print it nicely so it does not cut off. Any tips ? 回答1: If it doesn't fit on the paper in a readable font, it just doesn't.. In my opinion, huge horizontal tables (be it a HTML table or an Excel sheet with many columns) don't lend well to printing. For that matter, they don't lend well to viewing on a screen either. Remember vertical scrolling is much easier for your users than horizontal scrolling - all thanks to that

Bootstrap 3 Pages Printing Mobile Version

阅读更多关于 Bootstrap 3 Pages Printing Mobile Version

问题 When we print pages from our web site, which is based on Bootstrap 3, they are printing on some browsers showing the mobile version. I have Googled to try and find a good solution, but not really found anything that works. Using the same CSS for the screen and adding the "print-hidden" class to specific DIV's our pages look fine using Safari on a Mac, but using Chrome on the Mac or Firexof and Chrome on the PC the print preview shows the mobile version. Is there an easy way to tell the

Determine If Print/Cancel Button in Google Chrome's Print Preview is Clicked

阅读更多关于 Determine If Print/Cancel Button in Google Chrome's Print Preview is Clicked

问题 I've been printing my page using the code below: window.print(); An image below is what the print preview in Google chrome browser looks like. It has two main buttons: print and cancel . I want to know if the user has clicked the print or cancel buttons. What I did uses jquery: HTML Code of the Print Preview: <button class="print default" i18n-content="printButton">Print</button> <button class="cancel" i18n-content="cancel">Cancel</button> Jquery Code: $('button > .cancel').click(function (e)

Enforce Print Page Breaks with CSS

阅读更多关于 Enforce Print Page Breaks with CSS

I have a page that basically displays all work orders for a given day. I have tried to create the HTML so that I can use page-break-after: always to create a logical print page break and continue on. However when the user prints the page, there are often overlaps, multiple work orders on the same page, etc. I simply want to enforce a hard page break that Firefox, Safari, and Chrome will listen to. My HTML looks like this <div class="WOPrint"> <div class="WOHeader"> <h1>Header stuff</h1> </div>  </div> <div class="WOPageBreak"></div> <div class="WOPrint"> <div class="WOHeader">

Enforce Print Page Breaks with CSS

阅读更多关于 Enforce Print Page Breaks with CSS

问题 I have a page that basically displays all work orders for a given day. I have tried to create the HTML so that I can use page-break-after: always to create a logical print page break and continue on. However when the user prints the page, there are often overlaps, multiple work orders on the same page, etc. I simply want to enforce a hard page break that Firefox, Safari, and Chrome will listen to. My HTML looks like this <div class="WOPrint"> <div class="WOHeader"> <h1>Header stuff</h1> </div

Cross-browser support of `page-break-inside: avoid;`

阅读更多关于 Cross-browser support of `page-break-inside: avoid;`

问题 I have a lot of div s on a page with variable amounts of content in them. I am trying to use page-break-inside: avoid; so that each div section is not broken over 2 pages. It is working in Firefox but not IE8. I have this in my CSS print file .page-break-inside-avoid { page-break-inside: avoid; } and my divs carry the class like in <div class="page-break-inside-avoid"> IE8 is supposed to support this now. Isn't it? Am I doing something wrong? Anyone solved this issue? Or had any experience

execute javascript when printing page

阅读更多关于 execute javascript when printing page

问题 when printing a page, the javascript code seems to be executed. how can I determine, if the page is currently being printed? I do some js-resizing, and have to handle printing a little bit different. 回答1: You can't, except for IE browsers. No other browser has a before print event. You can, however, target a specific stylesheet to only apply while printing:  <link rel="stylesheet" type="text/css" media="print" href="print.css" /> This stylesheet will be applied before printing

Remove the default browser header and footer when printing HTML

阅读更多关于 Remove the default browser header and footer when printing HTML

I got an HTML with the <body onload="window.print()"> . The question I'm trying to ask is: Is there any way to remove the strings that the web browsers add to the printed page? Such as: Web site from where the page was printed Page count Title of the web page Date of printing Google Docs is now skirting around this issue by generating a PDF version of your document. If you are using Chrome, it will automatically open the PDF in a new tab and pop up the print dialog. Other browsers will prompt you to download the resultant file (which is not necessarily obvious behavior). While I don't find

Print page numbers on pages when printing html

阅读更多关于 Print page numbers on pages when printing html

I've read a lot of web-sites about printing page numbers, but still I couldn't make it display for my html page when I try to print it. So the CSS code is next: @page { margin: 10%; @top-center { font-family: sans-serif; font-weight: bold; font-size: 2em; content: counter(page); } } I've tried to put this page rule inside @media all { *CSS code* } And outside of it, tried to put it in @media print , but nothing helped me to display the page numbers on my page. I've tried to use FireFox and Chrome(based on WebKit as you know). I think the problem is in my html or css code. Could somebody show