由於客戶的需求，將js寫出來的一個統計能夠保存到本地。作為碼奴的我只能慢慢搬磚咯！一開始使用的是html2canvas.js。功能是可以實現，但是有缺陷。話不多說開始搞！ 1、引入幾個JS庫 ①：jquery 版本還沒試過我用的是3.1.1 （不貼鏈接了，這個要找很容易） ②：dom-to-imag ...
由於客戶的需求，將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自帶的照片查看器看著會模糊 不知道是我個人電腦的問題還是都是這個問題
看著就這種。
用附件中的畫畫和其他工具打開又沒有什麼問題
下了班等下回去家裡的電腦看看！
