初衷

由于老婆是一个追求极致高效(看她工作辛苦💦)工作的新媒体运营,于是请求我看能不能帮她简化流程。作为一名爱老婆的前端攻城狮,这怎么能难得到我。三下五除二(还是查了不少网上的代码,毕竟外号:代码搬运工嘛)就撸出了下面的代码。

代码解释

原本打算用后端node爬取的,但研究了一番后发现,不能满足夫人翻页的需求,于是采用前端爬取的方案,虽然多了一些体力活,但相比原先的纯手工打造还是进化了不知多少个世纪(嘿嘿😁)呢!
代码中运用到了jquery,ES6的写法。

Talk is cheap,show me the code!

这个是爬取目标页:http://v.qq.com/vplus/ea1b1b8626787db2d198c58fb86eb4dc/videos
Step 1

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
// Paste the main code
const script = document.createElement("script");
script.src = "https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js";
const s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(script, s);

let arr = [],
page = 2,
sequence = 1;

const currentCrawl = () => {
$('.figures_list li').each(function (index, item) {
let title = $(this).find('strong a').text().replace(/,/g, ",").replace(/:/g, ":"),
reading = $(this).find('.figure_info .info_inner').text(),
time = $(this).find('.figure_info .figure_info_time').text();
if (reading.includes('万')) {
reading = reading.replace('万', '') * 10000;
}
arr.push({'id': sequence, 'title': title, 'reading': reading, 'time': time});
sequence++;
});
console.log(`爬取第${page - 1}页成功,正在跳转第${page}页`);
$('.page_next')[0].click();
page++
};

const tableToExcel = () => {
console.log(`正在导出数据`);
//列标题,逗号隔开,每一个逗号就是隔开一个单元格
let str = `序号,标题,浏览量,时间\n`;
//增加\t为了不让表格显示科学计数法或者其他格式
for (let i = 0; i < arr.length; i++) {
for (let item in arr[i]) {
str += `${arr[i][item]},`;
}
str += '\n';
}
//encodeURIComponent解决中文乱码
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
//通过创建a标签实现
let link = document.createElement("a");
link.href = uri;
//对下载的文件命名
link.download = "数据表.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}

Step 2

1
2
3
// Crawl the current page,and repeat this step.
//爬取当前页
currentCrawl();

Step 3

1
2
3
// Download the crawled data into excel.
//导出数据
tableToExcel();

根据对该网站更进一步的了解,我又做了一套后端爬取的方法,操作更为简便
点击查看