0

I use html2canvas to take a screen shot of my page.however html2canvas need an element as a param, but I have a react app and I use a template to get the virtual DOMs.the template need to be reused many times

（so I don't want to render them then get the Element by ref or getDocumentbyId(), that will be aweful）.

for instance: I got 1000 order data.and the templates will be 1000.then the virtual DOM object will be 1000.

Is there any way I can directly convert the virtual DOM Obj to an Element obj?

John
  • 645
  • 1
  • 8
  • 23
  • I don't get it, your terms are really confusing. What do you call a DOM string? What do you want at the end? H2C works from computed styles, so it needs Nodes that are children of an active Document. – Kaiido Nov 27 '18 at 10:29
  • yeah, I made it wrong, it's not a string, html2canvas need a Element Object as param. so I found if I just use a function to convert html string to a Element,it's stil not working. the nodes need to be actually children of the whole document. – John Nov 28 '18 at 03:00
  • BTW,the function which I mentioned coverting html string to an Element like this---- var str2DOMElement = function(html) { var frame = document.createElement('iframe'); frame.style.display = 'none'; document.body.appendChild(frame); frame.contentDocument.open(); frame.contentDocument.write(html); frame.contentDocument.close(); var el = frame.contentDocument.body.firstChild; document.body.removeChild(frame); return el; } var markup = '

    text here

    '; var el = str2DOMElement(markup);     – John Nov 28 '18 at 03:02
  • what I want is to download pdfs of order detials.I've got that, I have to render the templates if I want to use H2C take screen shots. changing to this [phantom-html-to-pdf](https://www.npmjs.com/package/phantom-html-to-pdf),which take a html string as param – John Nov 28 '18 at 03:12

1 Answers1

1
import { renderToString } from 'react-dom/server'

renderToString(<YouComponent>)
freedom
  • 110
  • 2
  • 11
  • 4
    How does this help? What does this function do? By its name I'd say it returns a String right? How can this help OP which is trying to take a screeshot using html2canvas library? – Kaiido Nov 27 '18 at 10:30