Can anyone tell how to print custom documents with HTML5?
This is what i want with this print function.
I have document management system that already have print function build using silverlight. I want a solution to replace silverlight plugin from HTML5. please give me any idea or a solution.
Assuming you are already displaying the document in the webpage using Iframe,
If the assumption is correct, you can print the content of the iframe as following code
<input type="button" onclick="printIframe()" value="print" />
<iframe id="printf" name="printf" src="./sample.pdf"></iframe>
<script>
function printIframe() {
var target = document.getElementById('printf');
try {
target.contentWindow.document.execCommand('print', false, null);
} catch (e) {
target.contentWindow.print();
}
}
</script>
Or else if you are not using Iframe, just write a custom print css file to display only the content of the document you want to print.
Note: You don't have direct access to the printer using javascript
You can customize the style of what HTML5 looks like when it is printed with css #media print rules. For instance if you wanted to make the font-size larger when printed you would do,
p{
font-size: 15px
}
#media print {
p{
font-size: 20px;
}
}
http://www.w3schools.com/css/css_mediatypes.asp
Related
(First ask here so thanks in advance for the help!)
Is there a way to import html from another file to act as templates? Similar to calling a function.
The main reason is to simplify any changes made to the website as a whole; for example changing the header navigation menu would affect the entire website's design.
HTML has no features built-in to do that. The closest it gets are <iframe> elements which load a separate document into an embedded viewport.
This problem is generally best solved by combining your reused components before the HTML gets to the browser.
This could be done using some form of server-side programming (such as SSI, a PHP include, or a template language) or at build-time (typically using a static site generator).
You can start using Custom Elements, but there is lack of support in Opera and Safari. It looks overwhelming at first, and you need javascript experience, but it's pretty smooth once you get hang of it.
You can also use frameworks like Vue, React, Angular and Polymer that takes Custom Elements a step further.
I think the closest thing would be having html code surrounded with <template> tags and later executing Javascript code which generates final HTML document according to that template. Something like :
<!DOCTYPE html>
<html>
<body>
<style>
.myClass {
color: white;
background-color: DodgerBlue;
padding: 5px;
text-align: center;
margin: 10px;
}
</style>
<h2>The template demo</h2>
<button onclick="showContent()">Generate document</button>
<template>
<div class="myClass">I like: </div>
</template>
<script>
var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
function showContent() {
var temp, item, a, i;
temp = document.getElementsByTagName("template")[0];
item = temp.content.querySelector("div");
for (i = 0; i < myArr.length; i++) {
a = document.importNode(item, true);
a.textContent += myArr[i];
document.body.appendChild(a);
}
}
</script>
</body>
</html>
(First ask here so thanks in advance for the help!)
Is there a way to import html from another file to act as templates? Similar to calling a function.
The main reason is to simplify any changes made to the website as a whole; for example changing the header navigation menu would affect the entire website's design.
HTML has no features built-in to do that. The closest it gets are <iframe> elements which load a separate document into an embedded viewport.
This problem is generally best solved by combining your reused components before the HTML gets to the browser.
This could be done using some form of server-side programming (such as SSI, a PHP include, or a template language) or at build-time (typically using a static site generator).
You can start using Custom Elements, but there is lack of support in Opera and Safari. It looks overwhelming at first, and you need javascript experience, but it's pretty smooth once you get hang of it.
You can also use frameworks like Vue, React, Angular and Polymer that takes Custom Elements a step further.
I think the closest thing would be having html code surrounded with <template> tags and later executing Javascript code which generates final HTML document according to that template. Something like :
<!DOCTYPE html>
<html>
<body>
<style>
.myClass {
color: white;
background-color: DodgerBlue;
padding: 5px;
text-align: center;
margin: 10px;
}
</style>
<h2>The template demo</h2>
<button onclick="showContent()">Generate document</button>
<template>
<div class="myClass">I like: </div>
</template>
<script>
var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
function showContent() {
var temp, item, a, i;
temp = document.getElementsByTagName("template")[0];
item = temp.content.querySelector("div");
for (i = 0; i < myArr.length; i++) {
a = document.importNode(item, true);
a.textContent += myArr[i];
document.body.appendChild(a);
}
}
</script>
</body>
</html>
I have built a page that is print-enabled using window.print(). Because of some really unusual requirements from management, I need to be able to capture the click event for the print menu that appears when window.print() is called. Specifically, in Chrome, I need to capture the click event for the Print (blue) and Cancel (gray) buttons.
I have to admit I don't even know where to start here. I inspected each element and can see that these are standard html elements. These buttons have classes (print default for the print button and cancel for the cancel button) but no IDs.
I also noticed that no DOM is visible beyond the print menu, and the print menu html tag has an ID of 'print-preview'.
How do I capture click events for the print menu buttons (in Chrome at least)?
You can not access Chrome's internal windows (printing dialog in this case) directtly from a regular web page.
To determine that printing dialog was opened or closed you can catch matchMedia events (webkit only):
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
console.log('before print dialog open');
} else {
console.log('after print dialog closed');
}
});
But you can not check if 'Print' or 'Cancel' button was clicked. This information is not accessible from regular web page.
To get information about Chrome's printer jobs you can only create extension for Chrome and listen onPrintRequested event in content script. Of course extension must be installed into browser of each page user.
Are you trying to block printing in a web page, if so please follow the below link.
http://webdesign.about.com/od/advancedcss/qt/block_print.htm
It's easy to use CSS to prevent people from printing your Web pages. You simply need to create a 1 line stylesheet named print.css that says:body { display: none; }Then load that stylesheet as a print stylesheet:<link rel="stylesheet" type="text/css" href="print.css" media="print" />The important part is indicated in bold - this is a print stylesheet. It tells the browser that if this Web page is set to print, switch the body to display nothing.
Then, all that will print will be the standard header and/or footer that the browser appends to printed pages.Block One Page at a TimeIf you don't need to block a lot of pages on your site, you can block printing on a page-by-page basis with the following styles pasted into the head of your HTML:<style type="text/css"> #media print { body { display:none } } </style>
Get Fancier with Your Blocked PagesBut what if you want to block printing, but don't want your customers too frustrated? You can get a little fancier and put in a message that will only display when your readers print the page - replacing the other content. To do this, build your standard Web page, and at the top of the page, right after the body tag, put:<div id="noprint">And close that tag after all your content is written, at the very bottom of the page:</div>Then, after you've closed the "noprint" div, open another div with the message you want to display when the document is printed:
<div id="print">
<p>This page is intended to be viewed online and may not be printed. Please view this page at http://webdesign.about.com/od/advancedcss/qt/block_print.htm</p>
</div>
Include a link to your print CSS document named print.css:<link rel="stylesheet" type="text/css" href="print.css" media="print" />And in that document include the following styles:#noprint { display: none; }
#print { display: block; }Finally, in your standard stylesheet (or in an internal style in your document head), write:
#print { display: none; }
#noprint { display: block; }This will insure that the print message only appears on the printed page, while the Web page only appears on the online page.
I have used css and media queries till now to prevent images from loading. Now i have to requirement to prevent parts of html, scripts from loading in mobile browsers.
Here is how i used to prevent images from loading
#media (min-width:601px) {
.image {
background-image: url(http://www.example.com/wp-content/uploads/2013/05/img.jpg);
width:700px;
height:350px;
}
}
Any suggestions for HTML and JavaScript ?
You just can prevent HTML parsing in browser by CDATA or HTML comments. But you must change your server side/template generated code to prevent loading any HTML code.
Also you can't prevent loading script from script tag src attribute. You can use window.matchMedia and lazy-load/async for loading script:
if (window.matchMedia('min-width:601px')) {
(function (callback) {
var script = document.createElement('script');
script.src ='url';
script.onload = callback;
document.documentElement.firstChild.append(script);
})(callback/*if needed*/)
}
Or using requirejs:
if (window.matchMedia('min-width:601px')) {
var someModule = require('moduleName_or_path');
}
Also you can use enquirejs.
Take a look at this:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
If you want to use javascript of jQuery:
What is the best way to detect a mobile device in jQuery?
Of course add a display: none on the element you want to hide after detecting if on mobile device.
Here's some JavaScript code that you can run to include desktop-only JS and remove unwanted HTML elements from mobile browsers.
if (window.innerWidth > 601) {
//Run JS code that is to be loaded only on desktop browsers
console.log("This will run only in desktop browsers");
}
if (window.innerWidth < 601) {
//Remove HTML elements not to be shown in mobile devices
document.getElementById("extra-info").remove();
}
I built a printable version of my data using multiple iframes to display line item details. However, if any of my iframe content is larger than a page they get cut off when printing (they display fine on the screen). All of my iframes point back to the same domain and I'm using the browser's File->Print function to do my printing. I don't think it's a browser specific bug as I get the same results in IE & FF.
What do I need to do to print an HTML document containing multiple iframes?
I don't believe there's an easy way of doing this. If they're all on the same domain, why are you using IFRAMEs? Why not put the data directly in the page? If you're looking for scrolling, a div with height: ###px; overflow: auto; would allow it without having to use IFRAMEs, and a CSS print stylesheet would allow you to take the overflow/height CSS off when the user hits print.
I found an answer here. While less than ideal, it'll allow me to print the master record first and then optionally print each line item as a seperate print job by printing each iframe individually.
There are different answers to this problem depending on the browser engine. To solve these issues in a simple cross-browser way I created https://github.com/noderaider/print.
I offer two npm packages:
print-utils - Generic JavaScript library
react-focus - React iframe component
Usage without React
Install via npm:
npm i -S print-utils
HTML:
<iframe id="print-content" src="/frame.html"></iframe>
JavaScript (ES2015)
import { usePrintFrame } from 'print-utils'
/** Start cross browser print frame */
const disposePrintFrame = usePrintFrame(document.getElementById('print-frame'))
/** Stop using print frame */
disposePrintFrame()
Usage with React
npm i -S react-focus
Usage:
import React, { Component } from 'react'
import reactFocus from 'react-focus'
/** Create Focus Component */
const Focus = reactFocus(React)
/**
* Use the component within your application just like an iframe
* it will automatically be printable across all major browsers (IE10+)
*/
export default class App extends Component {
render() {
return (
<div>
<div>
<h2>Welcome to react-focus</h2>
</div>
<div>
<Focus src={`?d=${Date.now()}`} />
</div>
</div>
)
}
}
Try the following (just a guess) at the bottom of your CSS:
#media print {
iframe {
overflow: visible;
}
}