0

使用 Web UI 的新手。我们有一个复杂的设置，它需要代码并使用一堆 javascript 生成 HTML 5 和 CSS 3。在通过几个工作流程（启动一堆我不理解的 javascript DOM 更改）之后，我需要能够捕获生成的 HTML/CSS，以便我可以与我的设计师一起调整布局并回馈开发人员进行更改。

有没有办法做到这一点？我能够从 firebug 复制 HTML，但它仍然引用了服务器上的 CSS，并且没有一种简单的方法可以下载 CSS 并更新 HTML 以在本地指向它们。

谢谢！

4

1 回答 1

1

当您使用 firefox 或 chrome 将复制的 HTML 粘贴到框中时，以下页面将创建一个下载链接。

<html>

<b>Select All, Copy, and paste below to download the full copied HTML</b>

<div id=drop contentEditable 
  style="padding: 1em; height: 30em; background:#bbb;overflow:hidden; ">
</div>

<a id=out download=copied.html style=display:none> Download </a>

<script>

var out=document.getElementById("out"), 
   drop=document.getElementById("drop");


drop.onpaste=function doPaste(){
    setTimeout(function(){
        out.href="data:x-application/html,"+
          escape(drop.innerHTML);
        drop.style.display="none";
        out.style.display="block";
    }, 50);
};

</script>
</html>

与您的网站一起使用，

  1. 做一些事情来改变页面，然后单击页面背景的空白区域并按 [CTRL]+[A] (win) 或 [CMD]+[A] (mac)
  2. 使用右键单击或键盘复制
  3. 粘贴到上面显示的文件中的框中
  4. 单击“下载”以下载生成的 html 文件。

因为它是一个小文件，我继续在网上扔了一份副本，你可以试试；这个页面效果很好。

请注意，样式信息已转换为样式属性，因此您不需要 css 文件，但同时，您没有某些设计师可能想要的应用样式的文件名...

于 2013-04-30T00:25:58.610 回答