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

时间:2024-02-25 16:33:27

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

BrowserConstructs asFilenamesMax Blob SizeDependencies
Firefox 20+ Blob Yes 800 MiB None
Firefox < 20 data: URI No n/a Blob.js
Chrome Blob Yes 500 MiB None
Chrome for Android Blob Yes 500 MiB None
Edge Blob Yes ? None
IE 10+ Blob Yes 600 MiB None
Opera 15+ Blob Yes 500 MiB None
Opera < 15 data: URI No n/a Blob.js
Safari 6.1+* Blob No ? None
Safari < 6 data: URI No n/a Blob.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