Question

此Meteor客户端代码尝试打开新选项卡并将原始html放入其中它会打开一个空白页面。如何修复以便显示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

我这样做的原因是我需要对DOM doc的引用，以便我可以用原始html无法实现的方式修改它，比如附加一个画布并加载它使用之前通过canvas.toDataURL()

创建的图像

Answer 1

您可以在<script>添加html元素，在新data URI

呈现window

var imgDataURL = /* data URI */;
var html = `<!DOCTYPE html><html><body><canvas></canvas><script>
             var canvas = document.querySelector("canvas");
             var ctx = canvas.getContext("2d");
             var img = new Image;
             img.onload = function() {
               ctx.drawImage(this, 0, 0);
             }
             img.src = '${imgDataURL}';
           <\/script></body></html>`;
var w = window.open(URL.createObjectURL(new Blob([html], {type:"text/html"})));

plnkr http://plnkr.co/edit/snExZYUSnnGQQgMbSuh7?p=preview

Answer 2

或者，你可以在不使用DOMParser的情况下操纵打开窗口的DOM。例如。在带有id“sig”（表格单元格）的元素末尾插入签名图像（“X”）：

window.onload = function() {
    for(i = 1; i < 21; i++) {
        var button = document.createElement("button");
        var text = document.createTextNode(i);
        button.appendChild(text);
        button.addEventListener("click", function() {
           alert(button.innerText); 
        });
        var body = document.getElementsByTagName("body")[0];
        body.appendChild(button);
    }    
}

从原始html创建DOM并将其放在新窗口中

2 个答案: