您的位置:首页 > Web前端 > HTML

html生成图片并保存到本地方法(Windows)

2016-12-02 00:13 423 查看
// 最近用到一个保存html为图片到本地的功能(保存到下载目录),记之,该功能IE使用Blob 存储数据,关于兼容性问题参见如下表格,其他浏览器使用a标签download属性新功能下载

BrowserConstructs asFilenamesMax Blob SizeDependencies
Firefox 20+BlobYes800 MiBNone
Firefox < 20data: URINon/aBlob.js
ChromeBlobYes500 MiBNone
Chrome for AndroidBlobYes500 MiBNone
EdgeBlobYes?None
IE 10+BlobYes600 MiBNone
Opera 15+BlobYes500 MiBNone
Opera < 15data: URINon/aBlob.js
Safari 6.1+*BlobNo?None
Safari < 6data: URINon/aBlob.js
// 步骤一:引入html2canvas.js

//步骤二:完成以下方法即可

function downloadForJS(){

  //使用html2canvas 转换html为canvas
  html2canvas($("#ID")).then(function(canvas) {
    if(IE){ //判断IE下保存方法
      var blob = canvas.msToBlob();
      window.navigator.msSaveBlob(blob, fileName);
    }else{//其他浏览器保存方法
     var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url  
     var saveLink = document.createElement( 'a');
      saveLink.href =imgUri;
     saveLink.download = fileName; saveLink.click();
    }
});
}

更多兼容性问题参考:https://github.com/eligrey/FileSaver.js
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: