Databases
StackOverflow2013
Postsdbo
POHow to print Html page with image using Javascript
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to print Html page with image using Javascript
    primarykey
    data
    text
    <p><strong>Hi,</strong></p> <p>My application is in asp.net <strong>MVC3</strong> coded in <strong>C#.Net</strong>, I have a certain view with the requirement to print the complete Html of a particular div in that view.</p> <p>Suppose </p> <pre><code>&lt;div id="Printable_Div" &gt; &lt;div&gt; &lt;img id="First_Image" src="Source of my Image"&gt; &lt;/div&gt; &lt;table&gt;My table data &lt;/table&gt; &lt;/div&gt; </code></pre> <p><strong>Following are the things i tried</strong> </p> <pre><code> var w = window.open(); w.document.write($("#Printable_Div").html()); w.print(); w.close(); </code></pre> <p>Also i have tried using the jquery printElement.js</p> <pre><code>$("#Printable_Div").printElement(); </code></pre> <p>And Also window.print(); I have also tried setting the Image as the background of the</p> <pre><code>&lt;div style="background-image:My Image"&gt;&lt;/div&gt; </code></pre> <p>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 <strong>image</strong> in the print as well. The image tag is shown in the <strong>print preview</strong> but not the image.</p> <p><strong>Updated</strong></p> <p>Also i have tried printing the entire page by using the below code.</p> <pre><code>&lt;div id="Printable_Div" onclick="Print_Function()"&gt; &lt;/div&gt; </code></pre> <p><strong>Javascript function</strong></p> <pre><code> &lt;script type="text/javascript"&gt; function Print_Function() { window.print(); } &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USSam M
    1. USSam M
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to print Html page with image using Javascript
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to print Html page with image using Javascript
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWould these SO answers help? http://stackoverflow.com/questions/2255291/print-the-contents-of-a-div http://stackoverflow.com/questions/7791158/print-div-contents-in-javascript http://stackoverflow.com/questions/468881/print-div-id-printarea-div-only
      singulars
      1. POHow to print Html page with image using Javascript
      1. USphilip
    2. CO@trythisinstead i have gone thru all the links given in the comment, unfortunately none helped me solving my issue with the image. Im able to play around well with printing the Html in different ways, but in any way i tried none helping me in showing and printing the images available in my Div
      singulars
      1. POHow to print Html page with image using Javascript
      1. USSam M
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload