-
Notifications
You must be signed in to change notification settings - Fork 0
/
test1.html
84 lines (72 loc) · 2.08 KB
/
test1.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Blog</title>
<script>
const tableToCSV = table => {
const headers = Array.from(table.querySelectorAll('th'))
.map(item => item.innerText).join(',')
const rows = Array.from(table.querySelectorAll('tr'))
.reduce((arr, domRow) => {
if (domRow.querySelector('th')) return arr
const cells = Array.from(domRow.querySelectorAll('td'))
.map(item => item.innerText)
.join(',')
return arr.concat([cells])
}, [])
return headers + '\n' + rows.join('\n')
}
const downloadCSV = csv => {
const csvFile = new Blob([csv], { type: 'text/csv' })
const downloadLink = document.createElement('a')
downloadLink.download = `CSV-${new Date().toDateString()}.csv`
downloadLink.href = window.URL.createObjectURL(csvFile)
downloadLink.style.display = 'none'
document.body.appendChild(downloadLink)
downloadLink.click()
}
document.querySelector('button').addEventListener('click', () => {
const table = document.querySelector('table')
const csv = tableToCSV(table)
return downloadCSV(csv)
})
</script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
</style>
</head>
<body>
<h1>My Blog</h1>
<p>Welcome to my blog! Here you will find my thoughts, musings, and experiences.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<button on-click="download()">Download CSV</button>
</body>
</html>