码迷,mamicode.com
首页 > Windows程序 > 详细

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

时间:2016-12-02 03:12:44      阅读:373      评论:0      收藏:0      [点我收藏+]

标签:htm   filename   问题   https   com   nbsp   end   oda   div   

// 最近用到一个保存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

 

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

标签:htm   filename   问题   https   com   nbsp   end   oda   div   

原文地址:http://www.cnblogs.com/huxdiy/p/6124208.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!