如何下载图像(显示保存对话框在浏览器中),这是在html2canvas从控制器在MVC创建的字节的形式
本文关键字:html2canvas 控制器 MVC 字节 创建 图像 下载 何下载 显示 保存 浏览器 | 更新日期: 2023-09-27 18:15:44
我正在尝试使用ajax将image2canvas创建的图像发送到控制器,然后使用控制器下载它。
下面是我的代码:$("#btnExportAsImageByPost").click(function () {
var base64;
html2canvas($("#Table")[0]).then(function (canvas) {
base64 = canvas.toDataURL();
document.body.appendChild(canvas);
alert(base64);
$("[id*=hfImageData]").val(base64);
});
alert(base64);
var url = "/HtmlToImage/Index/";
$.ajax({
type: 'POST',
url: url,
data: base64,
dataType: "string",
success: function (evt) {
$("#Table").hide('slow');
},
});
});
<div id="Table" style="width:340px;background-color:White;padding:5px">
<table cellspacing="0" rules="all" border="1" style="border-collapse: collapse;">
<tr>
<th scope="col" style="width: 90px;">Customer id</th>
<th scope="col" style="width: 120px;">Name</th>
<th scope="col" style="width: 120px;">Country</th>
</tr>
<tr>
<td>1</td>
<td>John Hammond</td>
<td>United States</td>
</tr>
<tr>
<td>2</td>
<td>Mudassar Khan</td>
<td>India</td>
</tr>
</table>
这是我的控制器动作:
[HttpPost]
[ActionName("Index")]
public ActionResult Index_Post(string base64)
{
byte[] bytes = Convert.FromBase64String(base64);
return File(bytes, "image/png", "HtmlToImage.png");
}
但是问题是,当控制器返回文件时,浏览器中什么也没有发生。
我认为你的问题是,然后函数将是异步的承诺。所以你需要调用ajax
所以你在控制器上接收null的原因是因为then函数在那个时候还没有完成。base64 string为空。如果你想了解更多,请尝试阅读更多关于异步javascript如何工作或承诺如何工作的内容;)。
看看这个帖子:Html2canvas javascript截图和上传