Question

我的网站上有一个Div，我想放置一个按钮/链接（或其他类似的东西），当点击它时会将div及其所有内容保存到用户计算机，就像打印代码一样用于打印div。我是一个编码新手所以所有的帮助都会被贬低。

Answer 1

这样做有一个浏览器支持限制。 HTML2Canvas可以将您的HTML内容呈现为canvas元素。然后，您可以使用canvas.toDataURL("image/png");（docs in MDN）方法将canvas元素导出为jpeg或png图片。

它没有得到广泛的支持，但仍有可能。

Answer 2

简单方法

 var MyDiv1 = document.getElementById('DIV1');
 var MyDiv3 = document.getElementById('DIV2');
 MyDiv3.innerHTML = MyDiv1.innerHTML;


 html2canvas(MyDiv3, {
                    useCORS: true,
                    onrendered: function (canvas) {
                    var dataUrl = canvas.toDataURL("image/png");
                    document.getElementById("HiddenField1").value = dataUrl;

                    }
                });

使用按钮调用你的隐藏字段值

ButtonClick1()
{
    string imgval = HiddenField1.Value;
    imgval = imgval.Replace("data:image/png;base64,", "");
    byte[] imgData = Convert.FromBase64String(imgval);

    using (System.Drawing.Image image = System.Drawing.Image.FromStream(new MemoryStream(imgData)))
    {
        String path = Server.MapPath("~/imgFolder");
         image.Save(path + "\\output.jpg", ImageFormat.Jpeg);  // Or Png

    }
}

Answer 3

假设您需要文本或HTML文件，而不是像屏幕截图那样的图像文件，JavaScript本身无法在Web浏览器上启动“保存”对话框，只有来自Web服务器请求的响应才能执行如此。

首先，您需要一个包含按钮和隐藏字段的表单：

<div id="saveme">stuff to save</div>
<form action="saveme.aspx" method="POST">
  <input type="submit" onclick="prepsave()">
  <input type="hidden" id="savemepost">
</form>

在提交之前，您需要一些Javascript将DIV内容保存到隐藏字段：

<script>
   function prepsave() {
      document.getElementById("savemepost").value = 
        document.getElementById("saveme").innerHTML;
        return true;
   }
</script>

在服务器上，您需要一些代码来接受文本并以文件附件的形式将其吐出：

<script runat="server">
   Response.Clear()
   Response.AddHeader("content-disposition","attachment; filename=saved.html")
   Response.Write(Request.Form("savemepost"))
</script>

警告＃1：可能存在一些小错误，还有很大的改进空间，这只是一个概念证明。

警告＃2：上面的服务器端代码可能不安全，因为它允许任何网页控制从您的域进入用户Web浏览器的内容。你需要添加一些措施来防止它被滥用。

Answer 4

一种简单的方法是使用GrabzIt的JavaScript API capture a div。您只需要执行以下操作即可。其中#features是您要捕获的div的id。

<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
GrabzIt("Your Application Key").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "bheight": -1, "height": -1, "width": -1}).Create();
</script>

免责声明我构建了这个API！

用户将div捕获为图像并保存到计算机

4 个答案: