How can I take snap shot and convert to PDF of section of HTML page in JavaScript without any Library?

Question

I do not know but This question might have straight forward answer that "Not Possible" ? But I think definately there should be a way to do this, May be using some OS level work. My Question can be better understand by watching this code.

<html>
<head>

</head>
<body>
  <div> .......... </div>
  <div> .......... </div>
  <div> .......... </div>
  <div> .......... </div>
  <div id="my-required-section"> .......... </div>
  <div> .......... </div>
  <div> .......... </div>
  <div> .......... </div>
  <div> .......... </div>
  <div> .......... </div>
</body>

This complete html is the rendered DOM after all server side and client side code has been executed. Now I have Browser view of this complete page DOM, I just want to get SnapShot of a specific part for example the Browser view of a particular div with id = my-required-section.

In Other Word -

Lets suppose take complete snapshot of this DOM from <html> to </html> than crop only a part (represented by that DIV with id my-required-section)

I will be thank full Even if you suggest me a good article related to this kind of problem.

I will add more context to the problem for better understanding the problem.

I have complete HTML code inside a that particular DIV. But How can I get the CSS property of it parent elements, because What I want is exact designed snapshot of that div when we see that by Inspect element through chrome developer tool

`element.innerHTML`? What do you mean by "snapshot"? Like an actual image? Or its current state? — takendarkk, Apr 19 '17 at 19:30
What information would you like in the `SnapShot`? Knowing that would help us answer =) — Hodrobond, Apr 19 '17 at 19:30
@takendarkk I have added a line. I hope you can understand the problem — Shailendra2014, Apr 19 '17 at 19:35
@Hodrobond ^ The complete Information inside that DIV and same design as we see in browser — Shailendra2014, Apr 19 '17 at 19:36
Possible duplicate of [Using HTML5/Canvas/JavaScript to take screenshots](http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots) — Heretic Monkey, Apr 19 '17 at 19:37
@MikeMcCaughan Actually requirement is different, So I edited the question title. I need Snapshot at some place and PDF at some place. — Shailendra2014, Apr 19 '17 at 19:41

score 0 · Answer 1 · answered Apr 19 '17 at 19:53

Are you trying to retrieve information contained within the Document Object?

If so, I would advise looking into css selectors, as they may be used to retrieve particular elements of a web page. In your example, you may retrieve the selected element using document.getElementById("my-required-section");

jsfiddle (be sure to have console open)

How can I take snap shot and convert to PDF of section of HTML page in JavaScript without any Library?

1 Answers1