关于canvas与div的转换

最近在做报表，使用的是echarts.js,相关内容可以从官网查到，很方便。

但是当自己制作的表格也需要下载功能时会遇到一些问题，如：

将div转换为canvas ，需要用到HTML2canvas.js，一定要下载最新版本，否则IE9难以通过。

将canvas转换成图片并下载需要用到canvas2image.js，此JS在IE下难以使用，其他的浏览器包括火狐、opera、谷歌等都可以。主要问题是IE的URL面对base64太长的情况会不起作用，所以需要使用post的方式将请求提交到服务器端，由服务端进行下载。若不考虑IE，是需要一下代码就可以实现下载带有扩展名的文件。

参考http://www.baidufe.com/item/65c055482d26ec59e27e.html。

最终兼容IE以及其他浏览器需要修改canvas2image的savefile方法以及服务器端方法：

canvas2image的savefile

function saveFile(strData)

{

var navigatorName="Microsoft Internet Explorer";

var isIE=false;

if(navigator.appName==navigatorName)

{

isIE=true;

var temp=document.createElement("form");

temp.action="/Index/Default";

temp.method="post";

temp.style.display="none";

var opt=document.createElement("textarea");

opt.name="url";

opt.value=strData;

temp.appendChild(opt);

document.body.appendChild(temp);

temp.submit();

return temp;

}else{

var save_link=document.createElementNS('http://www.w3.org/1999/xhtml','a');

save_link.href=strData;

save_link.download='nn.png';

var event=document.createEvent('MouseEvents');

event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);

save_link.dispatchEvent(event);

}

}

服务器端代码：

if(url!=null)

{

string fileName="nn";

//生成文件进行下载（兼容迅雷）

byte[] byteArray=Convert.FromBase64String(url.Replace("data:image/octet-stream;base64,",""));

System.IO.MemoryStream stream=new System.IO.MemoryStream(byteArray);

Bitmap bitmap=new Bitmap(stream);

bitmap.Save(Server.MapPath("/")+fileName,System.Drawing.Imaging.ImageFormat.Png);

Response.AddHeader("Content-Disposition","attachment;filename="+HttpUtility.UrlEncode(HttpUtility.UrlDecode(fileName+".png",System.Text.Encoding.UTF8)));

Response.WriteFile("/nn.png");

Response.Flush();

Response.End();

//采用流形式下载，但不兼容迅雷

using(System.IO.MemoryStream ms=new MemoryStream(byteArray))

{

Response.ClearContent();

Response.ContentType="application/octet-stream";

Response.AddHeader("Content-Disposition","attachment;filename="+HttpUtility.UrlEncode(HttpUtility.UrlDecode(fileName+".png",System.Text.Encoding.UTF8)));

Response.BinaryWrite(ms.ToArray());

Response.Flush();

Response.End();

}

}