You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.5 KiB
64 lines
1.5 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Title</title>
|
||
|
|
<script src="../js/jquery-1.12.4.min.js"></script>
|
||
|
|
<script src="../js/html2canvas.min.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<table width="100%" id="exportGrid" border="2">
|
||
|
|
<tr style="background: red">
|
||
|
|
<td>1</td>
|
||
|
|
<td>2</td>
|
||
|
|
<td>3</td>
|
||
|
|
<td>4</td>
|
||
|
|
<td>5</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>1</td>
|
||
|
|
<td>2</td>
|
||
|
|
<td>3</td>
|
||
|
|
<td>4</td>
|
||
|
|
<td>5</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>1</td>
|
||
|
|
<td>2</td>
|
||
|
|
<td>3</td>
|
||
|
|
<td>4</td>
|
||
|
|
<td>5</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>1</td>
|
||
|
|
<td>2</td>
|
||
|
|
<td>3</td>
|
||
|
|
<td>4</td>
|
||
|
|
<td>5</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>1</td>
|
||
|
|
<td>2</td>
|
||
|
|
<td>3</td>
|
||
|
|
<td>4</td>
|
||
|
|
<td>5</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<button onclick="exportGrid()">导出图表</button>
|
||
|
|
<script>
|
||
|
|
//导出图表
|
||
|
|
function exportGrid() {
|
||
|
|
html2canvas(document.querySelector("#exportGrid")).then(canvas => {
|
||
|
|
//生成base64图片数据
|
||
|
|
var url = canvas.toDataURL();
|
||
|
|
console.log(url);
|
||
|
|
|
||
|
|
//以下代码为下载此图片功能，测试时使用，正常放到项目中无用
|
||
|
|
var triggerDownload = $("<a>").attr("href", url).attr("download", (new Date()).getTime() + "girds.png").appendTo("body");
|
||
|
|
triggerDownload[0].click();
|
||
|
|
triggerDownload.remove();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|