因为想开发一个会员订阅与下载的功能，所以把过程做成一个【会员订阅系列】进行分享。内容先由简入门吧，今天先实现前端点击下载。
前言
提示：这里可以添加本文要记录的大概内容：
知识付费现在已经完全在互联网上流行开了，从文章到小说、从创意到程序、从音乐到影视等等，都需要前后端的订阅控制，所以我们必须了如指掌，并且一学就会。
提示：以下是本篇文章正文内容，下面案例可供参考
一、会员订阅功能是什么？
简而且概之就是，通过前端或后端让用户，根据会员等级看到相应的内容。这个权限可能是长期或一次性或多次性的。
二、使用步骤
1.引入库
jquery.min.js
//本节内容全部在前端完成，所以是在html内加入jquery库。
2.JS代码
(function($) {
//点击id为‘down’的元素时：
$(‘#down’).click(function(){
//获取id为‘downtable’的表格
var table = document.getElementById(‘table_down’);
//如果表格存在：
if (table) {
//获取所有的行，并将这些行存储在 rows 变量中
var rows = table.rows;
var newTable = document.createElement(‘table’);
//设定可以下载的行数
var dii = 30;
//复制行到另一个新的表格（newTable）中，但仅复制前dii行
for (var i = 0; i < Math.min(rows.length, dii); i++) {
var newRow = newTable.insertRow(-1);
var oldRow = rows[i];
for (var j = 0, cell; cell = oldRow.cells[j]; j++) {
var newCell = newRow.insertCell(-1);
newCell.innerHTML = cell.innerHTML;
}
}
//结束语。可以在这里加出处、版权、说明等
var html = newTable.outerHTML + ‘数据来自网络，如需更多请联系客服!’;
//以下为下载代码详细解释，在后面
var blob = new Blob([html], { type: ‘application/vnd.ms-excel’ });
var a = document.createElement(‘a’);
a.href = window.URL.createObjectURL(blob);
a.download = ‘下载的表格名称XXX数据.xls’;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
} else {
console.error(“找不到表格元素。”);
}
});
})
详细解释：
var blob = new Blob([html], { type: ‘application/vnd.ms-excel’ });
这行代码创建了一个新的Blob对象，Blob对象用于存储大量的二进制数据。这里，[html]是一个包含HTML内容的数组，这将被用作Blob的数据源。{ type: ‘application/vnd.ms-excel’ }是Blob的选项对象，指定了Blob的类型为Microsoft Excel，这样当文件被下载时，浏览器会尝试用Excel打开它。
var a = document.createElement(‘a’);
这行代码创建了一个新的标签元素，用于作为下载链接。
a.href = window.URL.createObjectURL(blob);
这里，window.URL.createObjectURL(blob)创建了一个指向Blob的URL，这个URL是一个临时的、指向内存中Blob数据的链接。这个URL被设置为标签的href属性，这样当用户点击这个链接时，就会下载Blob数据。
a.download = ‘下载的表格名称XXX数据.xls’;
这行代码设置了标签的download属性，该属性用于指定下载文件的默认文件名。在这里，下载的文件名被设置为“下载的表格名称XXX数据.xls”。
document.body.appendChild(a);
这行代码将标签添加到文档的body中。这通常是为了确保标签在DOM中是存在的，这样它才能被正确地点击。
a.click();
这行代码模拟了用户点击标签的行为，从而触发下载操作。
document.body.removeChild(a);
最后，这行代码从文档的body中移除了标签。这是为了清理DOM，避免留下不必要的元素。
需要注意的是，虽然这段代码可以创建一个看似Excel的文件，但实际上它只是一个HTML文件，只是被标记为Excel格式。Excel可能能够打开并显示一些简单的HTML内容，但复杂的HTML布局或样式可能不会被正确解析。如果你需要生成真正的Excel文件（如.xlsx格式），你可能需要使用专门的库（如SheetJS的js-xlsx或类似的库）来生成复杂的Excel格式。
具体案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Excel下载示例</title>
<script src="https://g.csdnimg.cn/lib/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('#down').click(function(){
var table = document.getElementById('table_down');
if (table) {
var rows = table.rows;
var newTable = document.createElement('table');
var dii = 15;
for (var i = 0; i < Math.min(rows.length, dii); i++) {
var newRow = newTable.insertRow(-1);
var oldRow = rows[i];
for (var j = 0, cell; cell = oldRow.cells[j]; j++) {
var newCell = newRow.insertCell(-1);
newCell.innerHTML = cell.innerHTML;
}
}
var html = newTable.outerHTML + '<p>结束语，可以在这里加出处、版权、说明、扩展等</p>';
var blob = new Blob([html], { type: 'application/vnd.ms-excel' });
var a = document.createElement('a');
a.href = window.URL.createObjectURL(blob);
a.download = '成都疫情Excel数据.xls';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
} else {
console.error("找不到表格元素。");
}
});
});
</script>
</head>
<body>
<h1>下载成都疫情Excel数据</h1>
<button id="down">【点击下载表格】</button>
<table class="sj" id="table_down">
<tbody>
<tr><td><div class="t2">日期</div></td><td><div class="t2">现有确诊</div></td><td><div class="t2">累计确诊</div></td><td><div class="t2">治愈病例</div></td><td><div class="t2">死亡病例</div></td></tr>
<tr><td>'2022-10-21'</td><td>82</td><td>2025</td><td>1940</td><td>3</td></tr><tr><td>'2022-10-22'</td><td>82</td><td>2025</td><td>1940</td><td>3</td></tr><tr><td>'2022-10-23'</td><td>82</td><td>2025</td><td>1940</td><td>3</td></tr><tr><td>'2022-10-24'</td><td>84</td><td>2027</td><td>1940</td><td>3</td></tr><tr><td>'2022-10-25'</td><td>84</td><td>2027</td><td>1940</td><td>3</td></tr><tr><td>'2022-10-26'</td><td>84</td><td>2027</td><td>1940</td><td>3</td></tr><tr><td>'2022-10-27'</td><td>85</td><td>2028</td><td>1940</td><td>3</td></tr><tr><td>'2022-10-28'</td><td>85</td><td>2028</td><td>1940</td><td>3</td></tr><tr><td>'2022-10-29'</td><td>86</td><td>2029</td><td>1940</td><td>3</td></tr><tr><td>'2022-10-30'</td><td>87</td><td>2030</td><td>1940</td><td>3</td></tr><tr><td>'2022-10-31'</td><td>90</td><td>2033</td><td>1940</td><td>3</td></tr><tr><td>'2022-11-1'</td><td>90</td><td>2033</td><td>1940</td><td>3</td></tr><tr><td>'2022-11-2'</td><td>95</td><td>2038</td><td>1940</td><td>3</td></tr><tr><td>'2022-11-3'</td><td>99</td><td>2042</td><td>1940</td><td>3</td></tr><tr><td>'2022-11-4'</td><td>105</td><td>2048</td><td>1940</td><td>3</td></tr><tr><td>'2022-11-5'</td><td>105</td><td>2048</td><td>1940</td><td>3</td></tr><tr><td>'2022-11-6'</td><td>106</td><td>2049</td><td>1940</td><td>3</td></tr><tr><td>'2022-11-7'</td><td>108</td><td>2051</td><td>1940</td><td>3</td></tr><tr><td>'2022-11-8'</td><td>115</td><td>2058</td><td>1940</td><td>3</td></tr><tr><td>'2022-11-9'</td><td>126</td><td>2069</td><td>1940</td><td>3</td></tr><tr><td>'2022-11-10'</td><td>149</td><td>2092</td><td>1940</td><td>3</td></tr><tr><td>'2022-11-11'</td><td>165</td><td>2108</td><td>1940</td><td>3</td></tr><tr><td>'2022-11-12'</td><td>187</td><td>2130</td><td>1940</td><td>3</td></tr><tr><td>'2022-11-13'</td><td>217</td><td>2160</td><td>1940</td><td>3</td></tr><tr><td>'2022-11-14'</td><td>265</td><td>2208</td><td>1940</td><td>3</td></tr><tr><td>'2022-11-15'</td><td>305</td><td>2248</td><td>1940</td><td>3</td></tr><tr><td>'2022-11-16'</td><td>351</td><td>2294</td><td>1940</td><td>3</td></tr><tr><td>'2022-11-17'</td><td>426</td><td>2369</td><td>1940</td><td>3</td></tr><tr><td>'2022-11-18'</td><td>525</td><td>2468</td><td>1940</td><td>3</td></tr><tr><td>'2022-11-19'</td><td>617</td><td>2560</td><td>1940</td><td>3</td></tr><tr><td>'2022-11-20'</td><td>753</td><td>2696</td><td>1940</td><td>3</td></tr><tr><td>'2022-11-21'</td><td>925</td><td>2869</td><td>1940</td><td>4</td></tr><tr><td>'2022-11-22'</td><td>1101</td><td>3045</td><td>1940</td><td>4</td></tr><tr><td>'2022-11-23'</td><td>1245</td><td>3189</td><td>1940</td><td>4</td></tr><tr><td>'2022-11-24'</td><td>1322</td><td>3266</td><td>1940</td><td>4</td></tr><tr><td>'2022-11-25'</td><td>1423</td><td>3367</td><td>1940</td><td>4</td></tr><tr><td>'2022-11-26'</td><td>1515</td><td>3459</td><td>1940</td><td>4</td></tr><tr><td>'2022-11-27'</td><td>1619</td><td>3563</td><td>1940</td><td>4</td></tr><tr><td>'2022-11-28'</td><td>1741</td><td>3685</td><td>1940</td><td>4</td></tr><tr><td>'2022-11-29'</td><td>1849</td><td>3793</td><td>1940</td><td>4</td></tr><tr><td>'2022-11-30'</td><td>1971</td><td>3915</td><td>1940</td><td>4</td></tr><tr><td>'2022-12-1'</td><td>2099</td><td>4043</td><td>1940</td><td>4</td></tr><tr><td>'2022-12-2'</td><td>2235</td><td>4179</td><td>1940</td><td>4</td></tr><tr><td>'2022-12-3'</td><td>2384</td><td>4328</td><td>1940</td><td>4</td></tr><tr><td>'2022-12-4'</td><td>2530</td><td>4474</td><td>1940</td><td>4</td></tr><tr><td>'2022-12-5'</td><td>2740</td><td>4684</td><td>1940</td><td>4</td></tr><tr><td>'2022-12-6'</td><td>2456</td><td>4863</td><td>2403</td><td>4</td></tr><tr><td>'2022-12-8'</td><td>2625</td><td>5032</td><td>2403</td><td>4</td></tr><tr><td>'2022-12-7'</td><td>2568</td><td>4975</td><td>2403</td><td>4</td></tr><tr><td>'2022-12-9'</td><td>2715</td><td>5122</td><td>2403</td><td>4</td></tr><tr><td>'2022-12-10'</td><td>2715</td><td>5122</td><td>2403</td><td>4</td></tr><tr><td>'2022-12-11'</td><td>2785</td><td>5192</td><td>2403</td><td>4</td></tr><tr><td>'2022-12-12'</td><td>2785</td><td>5192</td><td>2403</td><td>4</td></tr><tr><td>'2022-12-13'</td><td>2785</td><td>5192</td><td>2403</td><td>4</td></tr><tr><td>'2022-12-14'</td><td>2785</td><td>5192</td><td>2403</td><td>4</td></tr>
</tbody>
</table>
</body>
</html>
总结
这里我们就完成了前端控制用户下载行数的功能了。下一篇，我们控制显示行数…
2890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
