In my app when the user clicks on a certain button, i will call an API and the API returns an HTML as a response, this HTML is a page (with and image and a few text) and i want to show this HTML in a new tab to my user and i also want to offer the user to print this page, how can i achieve this?
I tried windows.open but i'm not sure how i can use the response's HTML as the source for this page.
Is it even possible to do something like this in ReactJS ?
The best solution I can think about is creating an hidden container under your body element and placing your HTML into it. Then use the #media print magic to hide the page's content and display the printing element only.
For example:
<html>
<head>
<title>This is my amazing title</title>
<style>
#print-section {
display: none;
}
#media print {
body > * {
display: none;
}
#print-section {
display: block;
}
}
</style>
</head>
<body>
<h1>A lot of content</h1>
<p>A lot of text will be displayed here</p>
<div id="print-section">
<!-- HTML code will be rendered into this section -->
</div>
</body>
</html>
Related
I am using the ASP Net Sprites package to create CSS Sprites on my website.
It is working, but the images it generates do not appear when printed.
The code generated at HTML level is:
<img class="getmecooking-logo-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
How can I get the logo image to appear when a user prints the page?
I have tried adding this in my print.css stylesheet, but it didn't work:
#siteLogo
{
visibility: visible;
}
The print.css is working fine and it is formatting the page as I want it to for other elements on the page. My only issue is that I can't get the site logo image to display when it is printed.
For Chrome and Safari you can add the following in your CSS:
#media print
{
* {-webkit-print-color-adjust:exact;}
}
For other web browsers unfortunately it's up to the user to manually select the option to print background images (e.g. for users with IE 9, 10 and 11 they have to click on the cog icon -> Print -> Page Setup, and activate the option)
You could have an own media-query for print and use :before selector with the attribute "content".
Put this in the media query and it will insert the image when you try to print:
p:before { content: url(images/quote.gif); }
http://www.htmldog.com/reference/cssproperties/content/
It's up to the user and their browser settings to print or not print background images. To keep yourself from relying on that, put the images directly in the HTML with an actual <img /> tag.
It is working in Google Chrome when you add the !important attribute to the background image. Make sure you add the attribute first and then try again, you can do it like this:
.class-name {
background: url('your-image.png') !important;
}
Also you can use these useful printing rules and put them at the end of css file:
#media print {
* {
-webkit-print-color-adjust: exact !important; /*Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
}
Your main document, will import 2 stylesheets, 1 for the screen and another for the printer. You can fine tune the media settings as you need.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen, print" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>
<body>
<div class="bg print"></div>
</body>
</html>
Here is the background image called in your main css file used in browsers.
.bg {
background: url("http://fpoimg.com/250x250") top left no-repeat;
width:250px;
height: 250px;
}
And your print hack used by browsers when users initiate the print dialog. So you can add the print class to your div and have it print out, or remove it if needed.
.bg.print {
display: list-item;
list-style-image: url("http://fpoimg.com/250x250");
list-style-position: inside;
}
Note: You can also use the #media rule instead of importing files if you want to avoid making an extra http request.
reference from: http://www.seifi.org/css/how-to-force-css-background-images-to-print-in-web-browsers.html
Try this:
#media print {
body:before {
content:url(http://192.168.0.11:8088/automation/img/mahyaA5.jpg);
position: absolute;
z-index: -1;
}
}
If you use Internet Explorer, this is how you do it:
Go to the 'Tools' menu.
Click on 'Internet Options'.
Click on the 'Advanced' tab.
Put a check on print background color and images.
<div style="position: relative;">
<img src="/images/blue.png" style="width: 100px; height: 100px;">
<div style="position: absolute; top: 0px; left: 0px;">
Hello, world.
</div>
</div>
This make sense of the CSS you posted, also see this website: https://defuse.ca/force-print-background.htm
set media="print"
<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">
Reference
When you are trying custom printing through creating print format directly with java script and if there is tag is there then it won’t be print because browser intensely send request to printer without waiting to load image in cache.
So good practice add image which you want to print on html page and make it visibility false.
I have a web page which prints its content on a pre-printed receipt template. The problem I am facing is that the template has three sections on each page.
Header section with bill no, customer name etc..
Content section which is populated in tabular row format. This section is dynamic and cannot predict the number of rows and height.
Footer section contains sum of amount etc..
I would like to keep the header only in first page, footer only in the bottom part of last page. The dynamic middle part should break and distribute in multiple pages depends on the content. Header and footer part of intermediate pages should remain empty on its respective space.
Could anyone please help me to make this structure with html5 and css3.
Hello there this is my solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
// does not show the div other than print
#media all {
.page-break { display: none; }
}
//make it break the page
#media print {
.page-break { display: block; page-break-before: always; }
#content{
color:blue;
}
}
</style>
<header>
<h1>HEADER</h1>
</header>
<div class="page-break"></div>
<section id="content">
<h1>CONTENT</h1>
</section>
<div class="page-break"></div>
<footer>
<h1>FOTTER</h1>
</footer>
</body>
</html>
Hope it helps, for more info here is a link
I have a webpage that displays a web form whose source is javascript.
By default it places this form in the upper left corner of the screen. How to center it horizontally and vertically on the screen?
I'm confused because the block is in the <script> section rather than <body>.
The form is generated by my email marketing service provider, and I don't have access to its code.
The complete html file is:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://app...."></script>
</head>
<body>
</body>
</html>
Is it your javascript file or are you loading in an external file which creates the form? You can add classes/id's to javascript generated markup which is one way you could target it but you should be able to target and centre it just using:
form {display: block; margin: 0 auto; width: 100%}
Without actually seeing what your JavaScript is doing this is difficult to answer, however the generalized answer to your problem is to use CSS. You can do so within the head section of your html document using the <style> tag (see code below) or using <link> to add an external stylesheet.
Check out W3 to get you started learning more about CSS: http://www.w3schools.com/css/
Actual CSS attributes you will need may vary, but this article shows use of transform: translate to center an element vertically and horizontally.
<!DOCTYPE html>
<html>
<head>
<style>
/* this is a class you would add to the parent HTML tag of your form */
form {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
<script type="text/javascript" src="https://app...."></script>
</head>
<body>
</body>
</html>
I'm debugging a site on an Android HTC Sense. The site uses a lot of inserted content, which comes along with it's own CSS and JS like:
// wrapper id = snippet_id
<html>
<head>
<style type="text/css">
#snippet_id div {border: 1px solid red !important;}
div {border: 1px solid blue !important;}
</style>
</head>
<body>
<div>Hello World</div>
</body>
<html>
This is inserted into an existing page, so it sort these snippets are sort of like iFrames I guess.
Question:
Problem is, that while Javascript works fine, all CSS I'm specifying using <style> tags is being ignored. Any idea why?
EDIT:
Works on:
- Android 4.0.1
Does not work on:
- Android 2.3.1
- IOS 4.1
If I add the CSS to the main.css file being requested when the page loads, all is ok. If it's inside my gadget, it's not working.
EDIT:
So from what I can see, <style> does not seem to work on classes and id. If I use regular HTML elements as selectors it works.
EDIT:
My dev-site is here. I'm using a plugin called renderJs, which encapsultes HTML snippets (along with their CSS and JS) into resuable gadgets. Gadgets content will be appended to the page body, so although a gadget can act as a standalone HTML page, it can also be part of a page.
Example code from my page (I stripped out all gadgets but one below):
index.html - include index_wrapper gadget
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Organization" lang="en" class="render">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/overrides.css">
<script data-main="../js/main.js" type="text/javascript" src="../js/libs/require/require.js"></script>
<title></title>
</head>
<body class="splash">
<div data-role="page" id="index">
<div id="index_wrapper" data-gadget="../gadgets/index_wrapper.html"></div>
</div>
</body>
</html>
The page has a gadget called index_wrapper link - code below:
<!DOCTYPE html>
<head></head>
<body>
<div id="index_social" data-gadget="../gadgets/social.html"></div>
<p class="mini t" data-i18n="gen.disclaimer"></p>
</body>
</html>
Which has another gadget called social here. This gadget includes some CSS, but on the devices in question, it is ignored (just saw, I'm missing a </div> in the index_wrapper, so trying to see if that fixed the problem, too).
The code below includes my fix:
<!DOCTYPE html>
<head>
<style type="text/css" scoped>
// will be ignroed
.el {width: 1px;}
.menu_social {text-align: center; margin: 1em 0;}
.action_menu {display: inline-block;}
.follow_us {display: inline-block; margin: 0; padding: 0 .5em 0 0;}
...
</head>
<body>
<div class="menu_social">
<div>
<span class="el ui-hidden-accessible"></span><!-- fallback for CSS not working -->
<div data-role="controlgroup" data-type="horizontal" data-theme="c" class="action_menu">
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
(function () {
$(document).ready(function() {
var gadget = RenderJs.getSelfGadget();
// fallback for old devices which cannot load <style> css
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/social.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
// trigger enhancement
$(this).trigger("render_enhance", {gadget: gadget.dom});
});
})();
//]]>
</script>
</body>
</html>
So aside from probably missing a closing </div> I'm still wondering why my embedded CSS is not working.
Looking at the generated HTML code (i.e., code as modified by JavaScript) of the demo page suggests that style elements are generated inside body. Although such elements are allowed by HTML5 drafts when the scoped attribute is present, support to that attribute seems to be nonexistent, and the style sheet is applied globally. It is possible however that some browsers do not apply it at all, at least when the style element is dynamically generated.
A better approach is to make all style sheets global to the document, preferably as external style sheets, and use contextual selectors to limit the rules to some elements only. And possibly using JavaScript to change classes of elements, rather than manipulating style sheets directly.
Ok. Ugly workaround:
In the inline section, set this:
<style>
.el {width: 1px;}
</style>
In the page, set hide an element el like this:
// ui-hidden-accessible is a JQM class, moving the item out of view
// since it uses pos:absolute, is needed to not break
// selects on the page (compare to JQM ui-icon)
<span class="el ui-hidden-accessible"> </span>
Then check for the width when running inline Javascript (which works) and require the inline CSS as a separate file, when the width is not at 1px
// fallback for old devices which cannot load <style> css
// gadget is my iframe-look-a-like
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/translate.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
Ugly and an extra HTTP request, but at least the CSS is working then.
Currently I have a web application that contains a lot of div , menu and many others layout staff. However, What I would like to have when the user click print is only two image or one image in some case. Assume I have already get the two image url, how to remove the css of entire page and perform the print as i expected ? Here is some code I tried , it seems it will change the whole page from the web app layout to only 2 image? Can I prevent that? thanks:
print.css
<style type="text/css" media="print">
.img{
padding:5%;
height:100%;
width:40%;
}
#img1{
left:0px;
}
</style>
js
$("#printBtn").click(function() {
$("link[media='screen']").attr("href", "print.css");
window.print();
});
Updated:
To be more precise, what i will do is to get the image number(s) of the current page , and only this two image will be printed. How to perform such function?
Assuming I get the id of the two img already. First of all, I need to add the class = 'img' dynamically in this two item ? What is the next step untill the print finish ? thanks
<img id="img_34" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">
<img id="img_35" src="demo/medium/Web081112_P034_medium.jpg" alt="flip book">
Why do you change you <link media='screen' /> to a print.css stylesheet?
It's better practice if you would just use a screen and a print stylesheet side by side. No Javascript / jQuery needed for that:
<!-- Default styling -->
<link rel="stylesheet" type="text/css" href="/css/default.css" media="screen" />
<!-- This styling is only used for printing -->
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
To answer your question, you can just add a div to the bottom of your page like <div id='print-wrap'></div> and put all your printy stuff in there.
Then, in your CSS you do something similar to this:
default.css
#print-wrap { display: none; }
print.css
img { display: none; }
#print-wrap { display: block; }
#img_34 { display: block !important; }
#img_35 { display: block !important; }
Update
Updated the answer corresponding to the updated question. If you want just two images visible on your printed page, just hide all other images with display: none; and show the images you want to print using display: block !important;
You could make the whole page (i.e) body hidden.
With CSS:
body {
visiblilty:hidden;
}
Then make your div visible (where your image is rendered)
#yourdiv{
visibility:visible;
}
Then use window.print(); which would print #yourdiv
Your print css and screen css will not be used together while you are on screen (webpage), the print css will be referred ONLY when your media is print (print).
Whenever a print command is issued, the print css is referred along with the screen css, with print specific css properties having a higher priority.
Whenever, you are done and return to the same page, the page WILL return as is before the print command was issued.
From W3,
print
Intended for paged material and for documents viewed on screen
in print preview mode.
In your specific case, you want to print only 2 images, rather than all of them. So,
print.css :
img {
display: none;
}
#img_34, #img_35 { /*Image id's*/
display: block;
}
To test pages using a print css, simply do a print preview in the browser to get an idea of how it looks, and press Esc to return to the page.
If you are interested in reading up more about print css, and guidelines, this is a good article by SmashingMagazine