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


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

  • 相关阅读:
    SpringMVC 工作流程
    zookeeper
    Zookeeper
    HashMap
    Shiro learning
    Shiro learning
    Shiro learning
    Easy Poi入门
    Enum枚举学习- java5之前和之后的写法
    linux命令行todo列表管理工具Taskwarrior介绍
  • 原文地址:https://www.cnblogs.com/huxdiy/p/6124208.html
Copyright © 2020-2023  润新知