.net js html标签,Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地...

由于客户的需求，将js写出来的一个统计能够保存到本地。作为码奴的我只能慢慢搬砖咯！一开始使用的是功能是可以实现，但是有缺陷。话不多说开始搞！

1、引入几个js库

①：jquery 版本还没试过我用的是3.1.1 (不贴链接了，这个要找很容易)

②：dom-to-image.js (下载下来解压开在src目录里面)

③：filesaver.js (

2、新建html引入第一步中的几个库

3、生成图片

3.1、生成png图片

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);

});

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源码

$(function () {

$("#btnsave").click(function () {

// 下载png图片

domtoimage.toblob(document.getelementbyid('dvmain'))

.then(function (blob) {

window.saveas(blob, '123.png');

});

});

});

123456789

h2h2h2

段落里面的内容

span里面的内容

111	222	333300
	444	555
		666
77	888	999
	000	qqq
	www	eee

中间表格中海油跨行跨列的都没有什么问题。

4、问题:

我现在是弄好了保存成png或者是jpg的时候用win10 系统自带的windows自带的照片查看器看着会模糊 不知道是我个人电脑的问题还是都是这个问题

看着就这种。

用附件中的画画和其他工具打开又没有什么问题

下了班等下回去家里的电脑看看！