Polymer2.0-尝试下载自定义元素

我想下载使用的div的document.getElementById自定义元素的DIV内容，并试图实现从JS小提琴下载选项的DIV内容 - http://jsfiddle.net/evx9stLb/Polymer2.0-尝试下载自定义元素

从控制台，我得到以下错误
pen.js：6遗漏的类型错误：在下载无法读取空的特性 '的innerHTML'（pen.js：6）在HTMLButtonElement.onclick（index.html的：15）

HTML：

<head> 
    <base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/"> 
    <link rel="import" href="polymer/polymer.html"> 
    <link rel="import" href="iron-collapse/iron-collapse.html"> 
</head> 
<body> 

    <x-foo></x-foo> 

<button onClick="download()">Download</button> 
    <dom-module id="x-foo"> 
    <template> 

     <button on-click="toggle">toggle collapse</button> 
     <div id="content"> 
<iron-collapse id="collapse"> 
    <div>Content goes here...</div> 
</iron-collapse> 
     </div> 
    </template> 
    </dom-module> 
</body>

JS：对此我下面

function download(){ 
    var a = document.body.appendChild(
     document.createElement("a") 
    ); 
    a.download = "export.html"; 
    a.href = "data:text/html," + document.getElementById("content").innerHTML; 
    a.click(); 
} 


    class XFoo extends Polymer.Element { 
     static get is() { return 'x-foo'; } 

     static get properties() { 
     return {}; 

     } 
     toggle() { 
    this.$.collapse.toggle(); 
    } 

    } 
    customElements.define(XFoo.is, XFoo);

码 - https://codepen.io/nagasai/pen/ZyRKxj

来源

2017-07-07 Naga Sai A

做一些更新，并帮助这会有所帮助，

HTML

<head> 
    <base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/"> 
    <link rel="import" href="polymer/polymer.html"> 
    <link rel="import" href="iron-collapse/iron-collapse.html"> 
</head> 
<body> 

    <x-foo></x-foo> 

    <dom-module id="x-foo"> 
    <template> 
<button on-click="download">Download</button> 

     <button on-click="toggle">toggle collapse</button> 
     <div id="content"> 
<iron-collapse id="collapse"> 
    <div>Content goes here...</div> 
</iron-collapse> 
     </div> 
    </template> 
    </dom-module> 
</body>

class XFoo extends Polymer.Element { 
     static get is() { return 'x-foo'; } 

     static get properties() { 
     return {}; 

     } 
     toggle() { 
    this.$.collapse.toggle(); 
    } 
download(){ 
    var a = document.body.appendChild(
     document.createElement("a") 
    ); 
    a.download = "export.html"; 
    a.href = "data:text/html," + this.$.content.innerHTML; 
    a.click(); 
    console.log(this.$.content.innerHTML); 
} 

    } 
    customElements.define(XFoo.is, XFoo);

https://codepen.io/renfeng/pen/BZOQro

来源

2017-07-07 06:21:19

一个文件查询（光DOM）将不会刺穿shadowDom。要做到这一点，你必须专门选择元素并查询它的shadowRoot。

它会是这个样子

a.href = "data:text/html," + document.getElementsByTagName('x-foo')[0].shadowRoot.querySelector('#content').innerHTML;

，但只有这样做，如果你不能修改元素本身。在别人的影子根部搅动并不好。

如Frank R.所示，它更好地修改元素本身并提供下载功能。

您可以很容易地从外部元素的东西，如阴影根目录下

document.getElementsByTagName('x-foo')[0].download();

来源

2017-07-07 06:33:12 daKmoR

DOM，或影子DOM触发此，无法通过innerHTML访问。它不应该是。就是这样。

所以，不，你根本无法通过innerHTML获得影子DOM内容。

曾经有访问现在通过香草的javascript earlier 并讨论here 但反对到shadowDOM，阴影DOM V1 beig常态现在，你可能要等一等，看你是否能刺破shadowDOM

另一种方法是，将自定义元素中的整个DOM移出它，使用Slots。

插槽分发内容，因此，使用元素的页面可以通过innerHTML访问它。

你可能会尝试像上面提到的那种hacky方式here

来源

2017-08-01 10:44:25

Polymer2.0-尝试下载自定义元素

回答

相关问题