Fred J. Fred J. - 3 months ago 21
HTML Question

Create a DOM from raw html and place it in a new window

This Meteor client code tries to open new tab and place raw html in it.

It opens a blank page. How can it be fixed so that it displays the html?

let imgDataURL = $('canvas.signature').get(0).toDataURL(); //earlier in the code

let w = window.open();
let parser = new DOMParser();
let doc = parser.parseFromString(html, "text/html");
console.log(doc);
w.document = doc;

//need to append.child a canvas with imgDataURL to a ('td.sign') element in doc


The reason I am doing it this way is that I need a reference to the DOM
doc
so that I can modify it in a way that is not possible with the raw html, like appending a canvas and load it with an image which was previously created via
canvas.toDataURL()

Answer

Alternatively you could manipulate the DOM of the opened window without using DOMParser at all. E.G. to insert a signature image (an "X") at the end of an element with an id "sig" (a table cell):

let html="<table><tbody><tr><td id='sig'>signed: </td></tr></tbody></table>";
let sigURL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAVUlEQVQ4jbXSSQ4AIAgDwP7/03hVbFlcuLaZgBF2OXgKADCgZ1IgQ+ZcAgrx2daKAJaFwFIUMN3TI+FW9FCB0N4X4PgEVs6Q0kdqA5WzwjdQcw2wLQdGmRkSdmO7XQAAAABJRU5ErkJggg=="

  let w = window.open();
  let doc = w.document;
  doc.write(html);
  doc.close();
  let sigImg = new Image();
  sigImg.src = sigURL;
  doc.getElementById('sig').appendChild(sigImg);
Comments