// 最近用到一个保存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)的更多相关文章

  1. 利用canvas将网页元素生成图片并保存在本地

    利用canvas将网页元素生成图片并保存在本地 首先引入三个文件: 1.<script type="text/javascript" src="js/html2ca ...

  2. vue使用html2canvas生成图片并保存到本地

    html2canvas官方文档 http://html2canvas.hertzen.com/ npm下载依赖 npm install html2canvas -S 在需要使用的地方引入 import ...

  3. 用html5的canvas生成图片并保存到本地

    原文:http://www.2cto.com/kf/201209/156169.html 前端的代码: [javascript]  function drawArrow(angle)  {      ...

  4. canvas生成图片并保存到本地文件夹主要代码

    js var url = canvas.toDataURL();//把canvas中的图片变成data:image C# string filepath = ""; string ...

  5. Canvas保存图片保存到本地

    使用Canvas绘图,将图片保存到本地方法 一.使用HTML5 a标签的download属性,将图片保存到本地,不需要链接服务器 关于download属性:HTML5 <a>标签downl ...

  6. 微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas)

    最近在学小程序,在把当前画布指定区域的内容导出并生成图片保存到本地这个知识点上踩坑了. 这里用到的方法是: wx.canvasToTempFilePath(),该方法作用是把当前画布指定区域的内容导出 ...

  7. 下载远程(第三方服务器)文件、图片,保存到本地(服务器)的方法、保存抓取远程文件、图片 将图片的二进制字节字符串在HTML页面以图片形式输出 asp.net 文件 操作方法

    下载远程(第三方服务器)文件.图片,保存到本地(服务器)的方法.保存抓取远程文件.图片   将一台服务器的文件.图片,保存(下载)到另外一台服务器进行保存的方法: 1 #region 图片下载 2 3 ...

  8. php 下载保存文件保存到本地的两种方法

    第一种: 1 <? ?> 或 <?php //下载文件保存到本地//www.jbxue.comfunction downfile($fileurl){ob_start(); $fil ...

  9. C#中将String类型保存到本地文件的方法

    今天刚刚遇到,要在WinForm中把一个xml保存到本地, 由于之前是学习java的,一时间还真不知道怎么写, 没想到C#居然那么方便,就3句代码就实现了我要的功能: StreamWriter sw ...

随机推荐

  1. python 学习随笔

    要求: 用户输入一个数,比如输入387. 需要把387打乱,然后将这三个数组合成最大数输出. 如果最大值和用户输入的等大,输出-1. 方法一: #!/user/bin/env python # _*_ ...

  2. mysql压缩包安装配置

    1.在环境变量中添加:MYSQL_HOME:C:\05_study\mysql-5.7.10-winx64,在path路径中加入:%MYSQL_HOME%\bin.配置环境变量不是必须的,只是为了能更 ...

  3. 贪吃蛇,JavaScript,效果,鼠标事件

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>鼠 ...

  4. 第二,C语言示例

    #include<stdio.h> int main (void)                 /*WTF*/ { int num; num=1; printf(" I am ...

  5. 微信小程序-视图事件

    事件 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 ...

  6. Fair Scheduler 队列设置经验总结

    Fair Scheduler 队列设置经验总结 由于公司的hadoop集群的计算资源不是很充足,需要开启yarn资源队列的资源抢占.在使用过程中,才明白资源抢占的一些特点.在这里总结一下. 只有一个队 ...

  7. linux文件权限查看及修改(实用)

    查看Linux文件的权限:ls -l 文件名称 查看linux文件夹的权限:ls -ld 文件夹名称(所在目录) 修改文件及文件夹权限: sudo chmod -(代表类型)×××(所有者)×××(组 ...

  8. CPU过高的排查方法

    一个应用占用CPU很高,除了确实是计算密集型应用之外,通常原因都是出现了死循环. (友情提示:本博文章欢迎转载,但请注明出处:hankchen,http://www.blogjava.net/hank ...

  9. Java知识积累1-StringAlign实现文字居中左右对齐

    import java.text.*;public class StringAlign extends Format{ public static final int JUST_LEFT='l'; / ...

  10. php curl_init函数用法

    使用PHP的cURL库可以简单和有效地去抓网页.你只需要运行一个脚本,然后分析一下你所抓取的网 页,然后就可以以程序的方式得到你想要的数据了.无论是你想从从一个链接上取部分数据,或是取一个XML文件并 ...