戴辉瑶,史俊鹏,龙田腾子
由于客户的需求,将js写出来的一个统计能够保存到本地。作为码奴的我只能慢慢搬砖咯!一开始使用的是功能是可以实现,但是有缺陷。话不多说开始搞!
①:jquery 版本还没试过我用的是3.1.1 (不贴链接了,这个要找很容易)
②:dom-to-image.js ( 下载下来解压开在src目录里面)
③:filesaver.js (点击下载 下载下来解压开在src目录里面)
<script>
var jd= document.getelementbyid('标签id');
domtoimage.topng(jd)
.then(function (url) {
var img = new image();
img.src = url;
document.body.appendchild(img);
})
.catch(function (e) {
console.log('生成图片出错', e);
});
</script>
//保存图片
$("#btntoimg").click(function () {
domtoimage.toblob(document.getelementbyid('chartdiv'))
.then(function (blob) {
window.saveas(blob, 'imgname.jpg');
});
});
我写的是一个按钮的安吉事件
domtoimage.tojpeg(document.getelementbyid('chartdiv'), { quality: 0.95 }) .then(function (dataurl) { var link = document.createelement('a'); link.download = 'imgname.jpeg'; link.href = dataurl; link.click(); });
使用的额时候只要调方法就可以了
下面贴上demo源码
<html> <head> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript" src="dom-to-image.js"></script> <script type="text/javascript" src="filesaver.js"></script> <script type="text/javascript"> $(function () { $("#btnsave").click(function () { // 下载png图片 domtoimage.toblob(document.getelementbyid('dvmain')) .then(function (blob) { window.saveas(blob, '123.png'); }); }); }); </script> </head> <body> <input type="button" id="btnsave" value="保存图片" /> <div id="dvmain"> <h1>123456789</h1> <h2>h2h2h2</h2> <p>段落里面的内容</p> <span>span里面的内容</span> <table id="table" border="1" style="width:200px;border-collapse: collapse;border:1px solid black; width:80%;"> <tr> <td rowspan="3">111</td> <td>222</td> <td>333300</td> </tr> <tr> <td rowspan="2">444</td> <td>555</td> </tr> <tr > <td>666</td> </tr> <tr> <td rowspan="3">77</td> <td>888</td> <td>999</td> </tr> <tr > <td>000</td> <td>qqq</td> </tr> <tr> <td>www</td> <td>eee</td> </tr> </table> </div> </body> </html>
中间表格中海油跨行跨列的都没有什么问题。
我现在是弄好了保存成png或者是jpg的时候用win10 系统自带的windows自带的照片查看器看着会模糊 不知道是我个人电脑的问题还是都是这个问题
看着就这种。
用附件中的画画和其他工具打开又没有什么问题
下了班等下回去家里的电脑看看!
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论