使用html2canvas和jszip将网站转化成图片并打包成压缩文件下载

首先上两个插件的官方网址

html2canvas、jszip

使用流程：

1、首先在代码里引入这几个js

<script src="./html2canvas.js"></script>
<script src="./jszip.min.js"></script>
<script src="./FileSaver.js"></script>

2、html结构如下，点击保存按钮将content里的内容转成图片并打印

<div id="content">
    <p>hello world!</p>
</div>
<button onclick = "save()">保存</button>

3、save方法如下

function save(){
    html2canvas(document.querySelector("#content")).then(function(canvas){
        var imgUri = canvas.toDataURL().split(';base64,')[1];
        var zip = new JSZip();
        zip.file("截图.png", imgUri, {base64: true});
        zip.generateAsync({type:"blob"})
        .then(function(content) {
            saveAs(content, "截图.zip");
        });
    });
}

首先通过html2canvas将content里的内容转成canvas图片。

html2canvas(document.querySelector("#content"))

然后通过canvas.toDataURL()方法获取到地址，通过split方法获取到base64编码.

var imgUri = canvas.toDataURL().split(';base64,')[1];

然后创建一个JSZip实例

var zip = new JSZip();

然后在文件夹下新建一张“截图.png”的图片

zip.file("截图.png", imgUri, {base64: true});

最后生成“截图.zip”的压缩文件并下载

zip.generateAsync({type:"blob"})
.then(function(content) {
    saveAs(content, "截图.zip");
});

效果图以及下载下来的zip文件

 

html2canvas和jszip一般情况下均不支持ie浏览器，如需支持ie浏览器，可自行百度方法。