业务需求：按照客户要求把排课表转化为图片下载到本地。一个月到排课有很多。所以图片会很大

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>html2canvas_download</title>

    <style>

    </style>

</head>

<body>

<div id="image" style="width: 300px; height: 300px; margin: 10px; background: red; border: 5px solid gray;">

    <h1>hello world!</h1>

    <h3>内容超级多，高度可能是一万多像素</h3>

</div>

<div id="imageExport">down</div>

</body>

<!--<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>-->

<script src="/canvastohtml/canvasToHtml.js"></script>

<script type="text/javascript">

    $("#imageExport").click(function () {

        initExportImage();

    });

    function initExportImage() {

        //要导出的html的内容

        var oDiv = document.getElementById('image');

        html2canvas(oDiv).then(function (canvas) {

          /* 1. 创建要导出的html的容器

            let htmlElement = document.createElement('div');

            htmlElement.id = 'imageExportDiv';

            htmlElement.style.display = 'none';

            document.body.appendChild(htmlElement);

            //把要导出的html转化为canvas,然后渲染到容器中，实际导出的图片就是我的容器中的canvas

            document.getElementById("imageExportDiv").appendChild(canvas);

            */

           /* var strDataURI = canvas.toDataURL('image/jpeg',0.1);//调小就可以了.图片太大总是发生网络错误的问题

            downLoadFn(strDataURI);*/

           /*2。下载图片，图片的大小比较小 推荐使用*/

            downloadFile(canvas.toDataURL('image/png',1),"aa.png")

        });

    }

    /*解码后转化为blob使用，可以把base64的大文件变为小文件，下载就不会出现错误了*/

    function downloadFile(content, fileName) { //下载base64图片

        var base64ToBlob = function(code) {

            let parts = code.split(';base64,');

            let contentType = parts[0].split(':')[1];

            let raw = window.atob(parts[1]);

            let rawLength = raw.length;

            let uInt8Array = new Uint8Array(rawLength);

            for(let i = 0; i < rawLength; ++i) {

                uInt8Array[i] = raw.charCodeAt(i);

            }

            return new Blob([uInt8Array], {

                type: contentType

            });

        };

        let aLink = document.createElement('a');

        let blob = base64ToBlob(content); //new Blob([content]);

        let evt = document.createEvent("HTMLEvents");

        evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为

        aLink.download = fileName;

        aLink.href = URL.createObjectURL(blob);

        //aLink.click();
        aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
}; 

function downLoadFn(url) { if (myBrowser() === "IE" || myBrowser() === "Edge") { SaveAs5(url); } else { download(url); } } //判断浏览器类型 function myBrowser() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; if (isOpera) { return "Opera" } ; //判断是否Opera浏览器 if (userAgent.indexOf("Firefox") > -1) { return "FF"; } //判断是否Firefox浏览器 if (userAgent.indexOf("Chrome") > -1) { return "Chrome"; } if (userAgent.indexOf("Safari") > -1) { return "Safari"; } //判断是否Safari浏览器 if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) { return "IE"; } ; //判断是否IE浏览器 if (userAgent.indexOf("Trident") > -1) { return "Edge"; } //判断是否Edge浏览器  } //IE浏览器图片保存本地 function SaveAs5(imgURL) { var oPop = window.open(imgURL, "", "width=1, height=1, top=5000, left=5000"); for (; oPop.document.readyState != "complete";) { if (oPop.document.readyState == "complete") break; } oPop.document.execCommand("SaveAs"); oPop.close(); } // chrome14+,firefox20+,pera15+,Edge 13+,Safari未实现 function download(strDataURI) { //创建一个下载的a标签 var link = document.createElement('a'); //设置a标签的文字<a>下载</a>  link.innerHTML = '导出'; //下载的图片的名称  link.download = 'coursePlan.png'; link.id = 'aa'; //a标签的点击事件  link.addEventListener('click', function (ev) { link.href = strDataURI; }, false); //$("#imageExport").html(link);//可以把创建的a标签放到指定的标签中 //直接下载，文件图片太大会出现问题,出现网络问题，下载出错  link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐 //link.click();//直接点击也可  }; </script> </html>

ps:使用时候出现的问题

粉色部分代码使用暂时没有遇到问题

绿色部分使用会出现问题，如果转换下载的图片 71M  使用了base64的图片下载，下载的图片就很大，具体原因未知。每次都会出现问题，下不下来。

下载失败 网络问题

图片有时候下载出来，底部的一部分数据会消失

这个问题是因为图片太大还没有渲染完，如果想要下载完成的图片，需要拉动滑动条，看到完成的图片，然后等等不要页面加载完，就下载，需要等一会10秒或者等等，才可以下载完整图片

html转化为图片下载的更多相关文章

  1. (8)分布式下的爬虫Scrapy应该如何做-图片下载(源码放送)

      转载主注明出处:http://www.cnblogs.com/codefish/p/4968260.html 在爬虫中,我们遇到比较多需求就是文件下载以及图片下载,在其它的语言或者框架中,我们可能 ...

  2. android开源项目：图片下载缓存库picasso

    picasso是Square公司开源的一个Android图形缓存库,地址http://square.github.io/picasso/,可以实现图片下载和缓存功能. picasso有如下特性: 在a ...

  3. 利用aspose-words直接将Word转化为图片

    之前遇到一个需求,需要在word文档中加入一些文字,并转化为图片.之前也试过几种方案,但是发现效果还不是很理想,且中间需要经过一次转化为pdf的过程,最近找到了最理想的方式,即利用aspose-wor ...

  4. html dom 转化成图片踩坑记（canvas toDataURL）

    需求 在开发过程中遇到这么一个需求,h5页面需要将一个html dom转化成图片,便于用户保存. 面向百度搜索第三方得 html2canvas 和 dom-to-image 两者在写这篇笔记之前在gi ...

  5. iOS多图片下载

    iOS多图片下载.在cell里面下载图片.做了缓存优化. (app.icon是图片地址) // 先从内存缓存中取出图片 UIImage *image = self.images[app.icon]; ...

  6. python简易爬虫来实现自动图片下载

    菜鸟新人刚刚入住博客园,先发个之前写的简易爬虫的实现吧,水平有限请轻喷. 估计利用python实现爬虫的程序网上已经有太多了,不过新人用来练手学习python确实是个不错的选择.本人借鉴网上的部分实现 ...

  7. 根据网址把图片下载到服务器C#代码

    根据网址把图片下载到服务器C#代码 ASPX页面代码: <%@ Page Language="C#" AutoEventWireup="true" Cod ...

  8. .NET破解之图片下载器

    自去年五月加入吾爱后,学习了三个月,对逆向破解产生了深厚的兴趣,尤其是对.NET方面的分析:但由于这一年,项目比较忙,事情比较多,破解这方面又停滞了许久,不知道还要好久. 前些天,帮忙批量下载QQ相册 ...

  9. iOS开发——多线程篇——快速生成沙盒目录的路径，多图片下载的原理、SDWebImage框架的简单介绍

    一.快速生成沙盒目录的路径 沙盒目录的各个文件夹功能 - Documents - 需要保存由"应用程序本身"产生的文件或者数据,例如:游戏进度.涂鸦软件的绘图 - 目录中的文件会被 ...

随机推荐

  1. Go语言 并发编程

    Go语言 并发编程 作者:Eric 微信:loveoracle11g 1.创建goroutine // 并行 是两个队列同时使用两台咖啡机 // 并发 是两个队列交替使用一台咖啡机 package m ...

  2. Egret飞行模拟-开发记录01

    1.项目结构简介 1.1 index.html:应用入口文件,我们可以在这里面配置项目的旋转缩放模式背景颜色等. 1.2 egretProperties.json:这个文件里面进行项目配置,包括模块和 ...

  3. Eclipse插件安装springBoot

    首先说的是Eclipse的springBoot开发 首先查看你自己的eclipse的版本,点击help-->about Eclipse查看你自己的eclipse的版本 找到 Eclipse的版本 ...

  4. 著名java博客

    http://blog.csdn.net/net19880504/article/details/20807403

  5. Allegro16.6 PCB 导入DXF 外框后曲线不闭合

    Allegro16.6 PCB 导入DXF  外框后曲线不闭合,边框不封闭导致的z-copy无法用的问题.解决办法: 菜单栏依次选择 shape--compose shape,options选择好ou ...

  6. json_encode($b, JSON_FORCE_OBJECT) 可以强制转换成对象

    最近在为移动端的项目提供接口,数据格式都为json,不过在过程中遇到一个小问题,代码如下: 情况一: $tmp = array('a','b','c'); echo json_encode($tmp) ...

  7. python正则表达式写[强口令检测]

    关于正则表达式,如果想跟深入学习,建议您看一下<python 核心编程>(第三版)这本书,第一章的内容就是正则表达式. 关于我的学习,我在看<python编程快速上手>这本书第 ...

  8. [python爬虫] Selenium常见元素定位方法和操作的学习介绍

    这篇文章主要Selenium+Python自动测试或爬虫中的常见定位方法.鼠标操作.键盘操作介绍,希望该篇基础性文章对你有所帮助,如果有错误或不足之处,请海涵~同时CSDN总是屏蔽这篇文章,再加上最近 ...

  9. 微信小程序中把页面生成图片

    这个问题我上网搜了一下,答案有多种,但是真正能用的没有几何.很多答案都是雷同,有的网友也不负责任,直接拿来照抄,自己也不跑一遍看看.哎,不说了,说多了全是泪.希望我们的技术达人在分享的时候,能够真实的 ...

  10. visual studio 2013 几个测试工具（Nunit 3、xUnit）

    一.Nunit 3 1.在解决方案里添加一个类库——引用——右键(如下图)) 3.搜索nunit 并安装(如图) 3.注意引入命名空间并给测试类和测试方法添加特性(如图) 4.如果测试通过则为绿色(如 ...