Hi,
My application is in asp.net MVC3 coded in C#.Net, I have a certain view with the requirement to print the complete Html of a particular div in that view.
Suppose
<div id="Printable_Div" >
<div>
<img id="First_Image" src="Source of my Image">
</div>
<table>My table data
</table>
</div>
Following are the things i tried
var w = window.open();
w.document.write($("#Printable_Div").html());
w.print();
w.close();
Also i have tried using the jquery printElement.js
$("#Printable_Div").printElement();
And Also
window.print();
I have also tried setting the Image as the background of the
<div style="background-image:My Image"></div>
There is not any issue in printing the Html page, but the issue is, image is not getting displayed in all the three methods tried above. I want to print the entire HTML that is available in the Div with the ID=Printable_Div
Is there any way to display the image in the print as well. The image tag is shown in the print preview but not the image.
Updated
Also i have tried printing the entire page by using the below code.
<div id="Printable_Div" onclick="Print_Function()">
</div>
Javascript function
<script type="text/javascript">
function Print_Function() {
window.print();
}
</script>
Try This way,
<button onclick="window.print();printDiv(document.getElementById('Printable_Div'));">Save as PNG Image</button>
Related
Hi i'm facing the problem with printing using vue component called vue-html2pdf
The problem as follows:
the pagination does not break the page when content added. on print page becomes 3
the first page is printing as blank on click of download
Here is the setting i'm using for printing:
<vue-html2pdf
:show-layout="false"
:float-layout="true"
:enable-download="true"
:preview-modal="true"
:paginate-elements-by-height="1400"
filename="nightprogrammerpdf"
:pdf-quality="2"
:manual-pagination="false"
pdf-format="a4"
:pdf-margin="10"
pdf-orientation="portrait"
pdf-content-width="800px"
#progress="onProgress($event)"
ref="html2Pdf"
>
Here is a demo: https://codesandbox.io/s/vue-html-to-pdf-example-forked-3lijbr?file=/src/App.vue:95-532
After playing around with your codesandbox, I found solution:
remove section, then the first blank page gone.
<!--
<section slot="pdf-content">
<ContentToPrint />
</section>
-->
<ContentToPrint slot="pdf-content" />
but pagination of the new pdf still looks strange, to fix that remove the in ContentToPrint, than the pdf looks perfect to me.
<template>
<div style="margin: 12px 12px">
<img src="https://picsum.photos/500/300" />
<!-- <div> -->
<p>
<strong
><a href="https://www.nightprogrammer.com/" target="_blank"
>Nightprogrammer.com</a
></strong
I guess the library can't accept too much div.
Here is my modified codesandbox. pdf looks better if you open standalone page (https://1puw7d.csb.app)
https://codesandbox.io/s/vue-html-to-pdf-example-forked-1puw7d?file=/src/App.vue
Just replace the section element by a div and should fix it for you.
I am writing an application that loads up with local html pages.
My html pages include some images as well , I want to show these images in a custom size in default (say 400px * 200px) , and displays in original size when user clicked in .
For example this is my image tag in html doc:
<img src="exclamation.png"
alt="alt"
style="width:20px;height:20px;vertical-
align:middle;padding-left:5px">
What changes I must make to achieve the approach ?
Check this solution
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img src="https://cdn.pixabay.com/photo/2017/01/06/23/13/snow-crystals-1959292_960_720.jpg" id="abc"
alt="alt"
style="width:20px;height:20px;vertical-
align:middle;padding-left:5px" >
<script>
$("#abc").click(function(){
$("#abc").attr("style","width:200px;height:200px;vertical-"+
"align:middle;padding-left:5px");
});
</script>
In this html There is div which contains a background image. and inside it there is a mark img. working good on browser but at the time of print background image not coming still mark is coming
<div id="picx" style="background:url(img/large_eyeball.png);">
<img id="picx" src="img/cross.png">
</div>
I have also checked option of background color and image option in print preview settings. Please explain me what is going wrong.
I am using Google chrome. following function to print page.
<script>
function myFunction() {
window.print();
}
</script>
Try background-image instead of background
<div id="picx" style="background-image:url(img/large_eyeball.png);">
<img id="picx" src="img/cross.png">
</div>
Is there any way to hide a div from source code at runtime
Using jquery, javascript or any other method.
Eg:
<div id="abc">
This will not be displayed on source as well as in page
</div>
By using jQuery remove() or hide() - the item is hidden from front end.
But i need to remove it from source...
I'm using drupal render method.
It is not possible to hide DOM elements in browser. You can only remove them using .remove() or hide with .hide() when rendered. But if DOM exist in code then you can not hide it in view source code component.
Here is one solution
In your body tag add onload event
<body onload='removeDiv()'>
<div id='abc'>
This will not displayed in source code as well as in web page.
</div>
<body>
Javascript
<script>
function removeDiv(){
var div = document.getElementById('abc');
div.remove();
}
</script>
<script>
$('.abc').hide();
</script>
If the .hide() and .remove() doesn't work for you. You can try this.
Make a parent div and set the html part empty
<div id="def">
<div id="abc">
This will not be displayed on source as well as in page
</div>
</div>
<script type="text/javascript">
$("#def").html('');
</script>
If you are using drupal the write a php if condition to hide the content of the div, example
<?php if(1){ ?>
<div id="abc">
This will not be displayed on source as well as in page
</div>
<?php }?>
What would be a good way to show hidden content with javascript, without having the image elements <img src="myimage.jpg"> of the hidden content load their images in google chrome or any other browsers until the content is actually shown?
hiding the content with the css rule display: none will not prevent the images from loading, and I would like to avoid using ajax calls.
EDIT 1 as discussed in the comments, a better alternative would be to use a template. As an example I picked John Resig’s Microtemplating engine:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = tmpl('content', {});">show div</button>
See fiddle
EDIT 2
As the original poster commented, it's perfectly possible to grab the contents of a <script type="text/html"> element. Templating engine's not necessary:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = document.getElementById('content').innerHTML;">show div</button>
First Answer
(see in edits)
To do what you want within your requirements you could have javascript write the content when you want it displayed. So you would store your HTML in a javascript string and just use script to then insert it into the page when you want it. Its not a very nice way of doing it but it would mean that it would only load images at that point.
Alternatively you could put the HTML in but have the images pointing at nothing (or a blank placeholder, etc.) and then use script to programatically populate the image sources to the correct values when you call the show function to show the page.
Which of these you choose is probably more about readability than anything else though I would favour the second approach (just tweaking the image sources).
First, define a CSS style:
.invisible {
display: none;
}
Add this class to the objects in the HTML. Then anywhere in the JavaScript, simply add or remove the class, or change the display to block or float etc. In jQuery:
http://api.jquery.com/addClass/
http://api.jquery.com/show/
EDIT:
If you don't want the image to load, then use an AJAX call instead.
http://api.jquery.com/jQuery.get/
jQuery.get('myImage.jpg', function(data) {
jQuery('.imageContainer').html(data);
});
EDIT 2:
Load the src into the img once it's needed. You could check the scroll position etc.
http://jsfiddle.net/LYMRV/
Seems like it is possible to hide content using a script tag with type="text/html", it even prevents any images and iframes from loading in the background,
for example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.addEventListener('click',function(e){
if(e.target.id=='content_show'){
e.preventDefault();
document.getElementById('content_visible').innerHTML = document.getElementById('content_hidden').innerHTML;//document.getElementById('content_hidden').text also works
}
});
</script>
</head>
</body>
<img src="image1.jpg"/>
<script type="text/html" id="content_hidden">
<img src="image2.jpg"/>
<img src="image3.jpg"/>
<img src="image4.jpg"/>
</script>
Show Content
<div id="content_visible"></div>
</body>
</html>
Only thing to keep in mind is to avoid placing script tags inside #content_hidden.
Now if anyone is friendly enough to point out every flaw in this method, so that we can all benefit.