关于纯js提供txt和网页截图的下载

最新推荐文章于 2024-05-20 14:56:04 发布

IT-snake

最新推荐文章于 2024-05-20 14:56:04 发布

阅读量723

点赞数

分类专栏：前端空程师文章标签： html5 js canvas

本文链接：https://blog.csdn.net/snake0c/article/details/20388931

版权

前端空程师专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在研究屏页面截图的方案，用了一个叫做html2canvas的js库，用法很简单，就一句话

html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});

问题就是我用了滚动条控件：nanoScrollbar，这一滚不要紧，滚到下面的话，一截图，上面的部分就变空白了。解决办法只有在调用html2canvas函数之前把滚动条滚到顶，然后在onrendered函数里面再调一次绘图函数

html2canvas(document.body, {
onrendered: function(canvas) {
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
}
});

html2canvas这个库不得不说做的很不错，但是还有部分样式不能得到很好的支持。像这个需要画2次的确实让我很费解。canvas图出来了，剩下的就好办了。调用这个

var imgData = canvas.toDataURL(type,1.0);
imgData = imgData.replace('image/png','image/octet-stream');
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;

var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);

其中这个

imgData.replace('image/png','image/octet-stream');

是必须的，浏览器就会自动帮我们另存为，然后这样就会触发下载事件了。
下载文本的话也是类似的方法，不过文本的数据得经过base64编码，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>下载txt</title>
</head>
<body>
<button id="anniu">下载</button>
<script>

    var button = document.getElementById('anniu')
    data='data:application/octet-stream;charset=utf-8,' +
            encodeURIComponent( // Escape for URL formatting
                    '我是测试文字'
            );
    filename="text.txt";
    button.οnclick=function(){
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = data;
        save_link.download = filename;
        console.log(filename+' download');
        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
    }

    console.log('hello')
</script>
</body>
</html>

点一下那个按钮，就能下txt文档了哦，完全不用服务端。
当然这些代码在chrome和ff上测试没问题，不知为何ie下不能跑。ie下看来只能用activex控件了。

IT-snake

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于纯js提供txt和网页截图的下载

最近在研究屏页面截图的方案，用了一个叫做html2canvas的js库，用法很简单，就一句话html2canvas(document.body, { onrendered: function(canvas) { document.body.appendChild(canvas); }});问题就是我用了滚动条控件：nanoScrollbar，这一滚不要紧，滚到下面
复制链接

扫一扫