我的网站上有一个 div，我想放置一个按钮/链接（或其他类似的东西），单击该按钮/链接会将 div 及其所有内容保存到用户计算机，就像打印代码一样用于打印 div。我是一名编码新手，因此我们将不胜感激。
【问题讨论】：
标签： javascript html screenshot webcam
这样做存在浏览器支持限制。 HTML2Canvas 可以将您的 HTML 内容呈现为 canvas 元素。然后您可以使用canvas.toDataURL("image/png"); (docs in MDN) 方法将canvas 元素导出到jpeg 或png 图像。
它没有得到广泛支持，但它仍然是可能的。
【讨论】：
canvas。
简单的方法
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
}
}
【讨论】：
假设您想要一个文本或 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：上面的服务器端代码可能不安全，因为它允许任何网页控制从您的域进入用户网络浏览器的内容。您需要添加一些措施来保护它不被滥用。
【讨论】：