-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
147 lines (139 loc) · 6.99 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HtmlToPdf</title>
<link rel="stylesheet" href="./css/index.css" />
<script type="text/javascript" src="./js/canvg2.js"></script>
<script type="text/javascript" src="./js/html2canvas.js"></script>
<script type="text/javascript" src="./js/jspdf.min.js"></script>
<script type="text/javascript" src="./js/dom-to-img.js"></script>
<script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./js/dom-to-img.js"></script>
</head>
<body>
<div class="container">
<input id="downloadPdf" type="button" value="Download PDF" />
<button id="testPdf">html2canvas</button>
<button id="dom-to-img">dom-to-img</button>
</div>
<div id="pdfContainer" class="container">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">
<defs>
<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>
</svg>
</div>
<script type="text/javascript">
$(function () {
$("#downloadPdf").click(function () {
var targetDom = $("#pdfContainer");
//把需要导出的pdf内容clone一份,这样对它进行转换、微调等操作时才不会影响原来界面
var copyDom = targetDom.clone();
//新的div宽高跟原来一样,高度设置成自适应,这样才能完整显示节点中的所有内容(比如说表格滚动条中的内容)
copyDom.width(targetDom.width() + "px");
copyDom.height(targetDom.height() + "px");
$('body').append(copyDom); //ps:这里一定要先把copyDom append到body下,然后再进行后续的glyphicons2canvas处理,不然会导致图标为空
svg2canvas(copyDom);
html2canvas(copyDom, {
onrendered: function (canvas) {
var imgData = canvas.toDataURL('image/jpeg');
var img = new Image();
img.src = imgData;
//根据图片的尺寸设置pdf的规格,要在图片加载成功时执行,之所以要*0.225是因为比例问题
img.onload = function () {
//此处需要注意,pdf横置和竖置两个属性,需要根据宽高的比例来调整,不然会出现显示不完全的问题
if (this.width > this.height) {
var doc = new jsPDF('l', 'mm', [this.width * 0.225,
this.height * 0.225
]);
} else {
var doc = new jsPDF('p', 'mm', [this.width * 0.225,
this.height * 0.225
]);
}
doc.addImage(imgData, 'jpeg', 0, 0, this.width * 0.225,
this.height * 0.225);
//根据下载保存成不同的文件名
doc.save('pdf_' + new Date().getTime() + '.pdf');
};
//删除复制出来的div
copyDom.remove();
},
background: "#fff",
//这里给生成的图片默认背景,不然的话,如果你的html根节点没设置背景的话,会用黑色填充。
allowTaint: true //避免一些不识别的图片干扰,默认为false,遇到不识别的图片干扰则会停止处理html2canvas
});
});
});
function svg2canvas(targetElem) {
var svgElem = targetElem.find('svg');
svgElem.each(function (index, node) {
var parentNode = node.parentNode;
//由于现在的IE不支持直接对svg标签node取内容,所以需要在当前标签外面套一层div,通过外层div的innerHTML属性来获取
var tempNode = document.createElement('div');
tempNode.appendChild(node);
var svg = tempNode.innerHTML;
var canvas = document.createElement('canvas');
//转换
canvg(canvas, svg);
parentNode.appendChild(canvas);
});
}
function glyphicons2canvas(targetElem, fontClassName, fontFamilyName) {
var iconElems = targetElem.find('.' + fontClassName);
iconElems.each(function (index, inconNode) {
var fontSize = $(inconNode).css("font-size");
var iconColor = $(inconNode).css("color");
var styleContent = $(inconNode).attr('style');
//去掉"px"
fontSize = fontSize.replace("px", "");
var charCode = getCharCodeByGlyphiconsName(iconName);
var myCanvas = document.createElement('canvas');
//把canva宽高各增加2是为了显示图标完整
myCanvas.width = parseInt(fontSize) + 2;
myCanvas.height = parseInt(fontSize) + 2;
myCanvas.style = styleContent;
var ctx = myCanvas.getContext('2d');
//设置绘图内容的颜色
ctx.fillStyle = iconColor;
//设置绘图的字体大小以及font-family的名字
ctx.font = fontSize + 'px ' + fontFamilyName;
ctx.fillText(String.fromCharCode(charCode), 1, parseInt(fontSize) + 1);
$(inconNode).replaceWith(myCanvas);
});
}
//根据glyphicons/glyphicon图标的类名获取到对应的char code
function getCharCodeByGlyphiconsName(iconName) {
switch (iconName) {
case ("glyphicons-resize-full"):
return "0xE216";
case ("glyphicons-chevron-left"):
return "0xE225";
default:
return "";
}
}
$("#testPdf").click(function () {
console.log(12123121);
html2canvas(document.body).then(function (canvas) {
document.body.appendChild(canvas);
})
});
$("#dom-to-img").click(function () {
console.log('#dom-to-img');
let tempNode = document.body;
domtoimage.toPng(tempNode)
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
})
</script>
</body>
</html>