方法一:
function downloadImpByChart(chartId,name) { var url = getFullCanvasDataURL(chartId); var link = document.createElement('a'); link.href = url; link.download = name+".png"; link.click(); };
//将图形转成base64的图片 function getFullCanvasDataURL(divId){ //将第一个画布作为基准。 var baseCanvas = $("#"+divId).find("canvas").first()[0]; if(!baseCanvas){ return false; }; var width = baseCanvas.width; var height = baseCanvas.height; var ctx = baseCanvas.getContext("2d"); //遍历,将后续的画布添加到在第一个上 $("#"+divId).find("canvas").each(function(i,canvasObj){ if(i>0){ var canvasTmp = $(canvasObj)[0]; ctx.drawImage(canvasTmp,0,0,width,height); } }); //获取base64位的url return baseCanvas.toDataURL(); }
方法二
前端JS
function downLoadImg () { var picInfo = PageData.Chart4.getDataURL(); var stmpArr = picInfo.split(',') var base64string = stmpArr[1]; var FileName = "克重分布.png";
var OpenUrl = "@Url.Action("DownLoadImg")" + "?ran=" + new Date().getTime(); //alert(filename); var newForm = document.createElement("form"); newForm.id = "FromDownFile" newForm.style.display = 'none'; //alert(OpenUrl); newForm.action = OpenUrl; newForm.method = "post";
var newInput = document.createElement("input"); newInput.type = "text"; newInput.name = "base64string"; newInput.id = "base64string"; newInput.value = base64string; newForm.appendChild(newInput);
newInput = document.createElement("input"); newInput.type = "text"; newInput.name = "FileName"; newInput.id = "FileName"; newInput.value = FileName; newForm.appendChild(newInput);
document.body.appendChild(newForm);
$("#FromDownFile").submit(); $("#FromDownFile").remove(); }
后端
[HttpPost] public void DownLoadImg(string base64string,string FileName) { byte[] b = Convert.FromBase64String(base64string); MemoryStream ms = new MemoryStream(b);
Response.ContentEncoding = System.Text.Encoding.GetEncoding("UTF-8"); string strTemp = System.Web.HttpUtility.UrlEncode(FileName, System.Text.Encoding.UTF8); Response.AddHeader("Content-Disposition", "attachment;filename=" + strTemp); Response.BinaryWrite(ms.ToArray()); Response.Flush(); Response.End(); }