由于客户的需求,将js写出来的一个统计能够保存到本地。作为码奴的我只能慢慢搬砖咯!一开始使用的是html2canvas.js。功能是可以实现,但是有缺陷。话不多说开始搞!
1、引入几个JS库
①:jquery
版本还没试过我用的是3.1.1 (不贴链接了,这个要找很容易)
②:dom-to-image.js
(点击下载 下载下来解压开在src目录里面)
③:FileSaver.js
(点击下载 下载下来解压开在src目录里面)
2、新建HTML引入第一步中的几个库
3、生成图片
3.1、生成png图片
<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>
3.2、生成下载图片
//保存图片
$("#btnToImg").click(function () {
domtoimage.toBlob(document.getElementById('chartdiv'))
.then(function (blob) {
window.saveAs(blob, 'ImgName.jpg');
});
});
我写的是一个按钮的点击事件
3.3、生成jpeg图片
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>
中间表格中海油跨行跨列的都没有什么问题。
4、问题:
我现在是弄好了保存成png
或者是jpg
的时候用win10
系统自带的windows
自带的照片查看器看着会模糊 不知道是我个人电脑的问题还是都是这个问题
看着就这种。
用附件中的画画和其他工具打开又没有什么问题
domtoimage----将指定页面生成图片
在项目中有个需求,点击按钮将指定页面部分生成图片保存到本地,最后选择了dom-to-image
这个js方法
1.下载jquery.min.js、dom-to-image.js、FileSaver.js
FileSaver.js文件百度网盘地址:
链接:https://pan.baidu.com/s/1W_g2azndSt7yNqQbJGpnbQ
提取码:iklw
dom-to-image.js文件百度网盘地址:
链接:https://pan.baidu.com/s/1sCwDb065585DfF9GmF6zEA
提取码:2up2
2.创建一个简单的测试demo
<!DOCTYPE html>
<html>
<head>
<title>山有木兮</title>
<meta charset="utf-8">
<style>
body {
width: 35em;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-family:simsun;
background-color: #DCDCDC;
}
</style>
</head>
<body>
<div id="allinfo" style="border:1px solid #696969">
<div style="width:100%;height:300px;margin-top:100px">
<center>
<h1>This Is Why We Play</h1>
<h2>MAKE MORE TIME</h2>
<h2 style="color:#D3D3D3">至于唇齿,掩于岁月</h2>
<h2>traveling light</h2>
<h2>PHP</h2>
<img src="https://www.liurulan.cn/light.jpg" style="width:200px;height:200px;border-radius:50%;">
</center>
</div>
<div style="margin-top:250px"><center>
<a href="http://www.beian.miit.gov.cn" target="_blank" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">工信部备案号:黑ICP备2000XXXX号</p></a>
<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=23028102000014" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">黑公网安备 230XXXX200XXXX号</p></a>
</center></div>
</div>
<button id="btn" style="margin-top:50px;margin-left:45%;">生成图片</button>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="./js/dom-to-image.js"></script>
<script type="text/javascript" src="./js/FileSaver.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
// 下载png图片
domtoimage.toBlob(document.getElementById('allinfo'))
.then(function (blob) {
window.saveAs(blob, 'my-node.png');
});
})
})
</script>
</body>
</html>
3.页面预览
4.打印结果预览
5.打印会直接将页面保存成图片保存到浏览器桌面,速度也很快
6.跨域问题
如果页面中有图片引入,那么就需要考虑跨域问题,我使用的是nginx
,只需要添加响应头:
- 编辑
nginx.conf
文件 - 修改如下代码:
location / {
root html;
index index.html index.htm index.php;
add_header 'Access-Control-Allow-Origin' *;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
}
- 重启
nginx
:
nginx -s reload