JSjavascript获取B站bilibili哔哩哔哩分P播放列表并以excel文件保存本地

JavaScript 专栏收录该内容
9 篇文章 0 订阅

需要处理的页面按F12,出现控制台/console,粘贴进入即可

获取分P播放列表(不下载)

由用户上传的分P视频应该都是能够获取的

测试网站链接1

测试网站链接2

var listBox = document.getElementsByClassName('list-box')[0], // 获取li列表的ul
    liList = listBox.getElementsByTagName('li'), // 获取li列表(类数组)
str = ''; // 存储获取到的列表名
[].forEach.call(liList, (item, index) => { // 类数组转数组方法,使用forEach()方法遍历
	str += item.getElementsByTagName('a')[0].title.replace(/.*零距离/, ()=> ++index < 10 ? ('0'+index) : index)+'</br>'; // 找到每一个li的a标签并获取title属性值(这里存储的就是分P列表名),再使用replace替换了测试网站中的部分名称,改为序列号
});
document.write(str);

结果为

  • 01 - 未来式情歌
  • 02 - 半空
  • 03 - 潮汐
  • 04 - 春娇与志明
  • 05 - 等一场大雨
  • 06 - 气象站台

获取分P播放列表(并将列表保存本地 excel 文件)

var listBox = document.getElementsByClassName("list-box")[0],
	liList = listBox.getElementsByTagName("li"),
	title = document.getElementsByTagName("h1")[0].title,
	musicList = [];
[].forEach.call(liList, (item, index) => {
	musicList.push(item.getElementsByTagName("a")[0].title.replace(/^.*?零距离\s?\-\s?/, "")
	);
});
var maxWidth = musicList[0].length;

// 设置网页显示的宽度(对保存文件的意义不大)
for (const item of musicList) {
	item.length > maxWidth ? (maxWidth = item.length) : null;
}
var fontSize = 20;

var tempDom = `<table id="music" border="1" cellspacing="0" cellpadding="20" width='${maxWidth * fontSize}px'>
					<caption style="font-size: ${fontSize}px; font-weight: bold;">${title}</caption>
					<thead style="background-color: darkorange;">
						<tr align="center">
							<th>序号</th>
							<th>歌曲名</th>
						</tr>
					</thead>
					<thbody>`;
musicList.forEach((item, index) => {
	tempDom += `<tr align="center">
						<td>${++index}</td>
						<td>${musicList[index - 1]}</td>
					</tr>`;
});
tempDom += `</thbody>
		</table>`;
document.body.innerHTML = tempDom;

var html = `<!DOCTYPE html>
		<html lang="en">
			<head>
				<meta charset="UTF-8">
			</head>
			<body>
				${document.getElementById("music").outerHTML}
			</body>
		</html>`;

var downloadText = function downloadText(content) {
	var content = new Blob([content], { type: "application/vnd.ms-excel" });
	console.log(content);
	var url = window.URL.createObjectURL(content);
	var a = document.createElement("a");
	a.download = title || "bilibili分P目录";
	a.href = url;
	a.click();
	window.URL.revokeObjectURL(url);
};
downloadText(html);

获取分P播放列表(并将列表保存本地图片文件)

谷歌浏览器保存不了内容,测试360极速浏览器可以,问题待解决(暂时没时间研究,哈哈,大概率是不研究了)

需要引用html2canvas插件,官方网站

var listBox = document.getElementsByClassName("list-box")[0],
	liList = listBox.getElementsByTagName("li"),
	title = document.getElementsByTagName("h1")[0].title,
	musicList = [];
[].forEach.call(liList, (item, index) => {
	musicList.push(item.getElementsByTagName("a")[0].title.replace(/^.*?零距离\s?\-\s?/, "")
	);
});
var maxWidth = musicList[0].length;

// 设置网页显示的宽度(对保存文件的意义不大)
for (const item of musicList) {
	item.length > maxWidth ? (maxWidth = item.length) : null;
}
var fontSize = 20;

var tempDom = `<table id="music" border="1" cellspacing="0" cellpadding="20" width='${maxWidth * fontSize}px'>
					<caption style="font-size: ${fontSize}px; font-weight: bold;">${title}</caption>
					<thead style="background-color: darkorange;">
						<tr align="center">
							<th>序号</th>
							<th>歌曲名</th>
						</tr>
					</thead>
					<thbody>`;
musicList.forEach((item, index) => {
	tempDom += `<tr align="center">
						<td>${++index}</td>
						<td>${musicList[index - 1]}</td>
					</tr>`;
});
tempDom += `</thbody>
		</table>`;
document.body.innerHTML = tempDom;

function convertBase64UrlToBlob(base64){
	var type =base64.split(",")[0].match(/:(.*?);/)[1];//提取base64头的type如 'image/png'     
	var bytes=window.atob(base64.split(',')[1]);//去掉url的头,并转换为byte (atob:编码 btoa:解码)

	//处理异常,将ascii码小于0的转换为大于0 
	var ab = new ArrayBuffer(bytes.length);//通用的、固定长度(bytes.length)的原始二进制数据缓冲区对象
	var ia = new Uint8Array(ab);
	for (var i = 0; i < bytes.length; i++) {
		ia[i] = bytes.charCodeAt(i);
	}
	return new Blob( [ab] , {type :type});
}

// 获取想要转换的 DOM 节点
const dom = document.querySelector('#music');
const box = window.getComputedStyle(dom);

html2canvas(document.getElementsByTagName('table')[0], {
useCORS: true,
	allowTaint: false
}).then(function (canvas) {
		var url = canvas.toDataURL('image/jpeg', 1);
		url = window.URL.createObjectURL(convertBase64UrlToBlob(url));
		let a = document.createElement("a"); // 生成一个a元素
		let event = new MouseEvent("click"); // 创建一个单击事件
		console.log(title);
		a.download = title || "bilibili_Photo"; // 设置图片名称
		a.href = url; // 将生成的URL设置为a.href属性
		a.dispatchEvent(event); // 触发a的单击事件
		window.URL.revokeObjectURL(url);
	}
);

参考网站

js 根据url 下载图片 - MrJaden - 博客园

canvas的toDataURL()方法_first_shun的博客-CSDN博客

使用html2canvas下载海报,里面的图片却下载不了兼容谷歌浏览器做下载_love-小七的博客-CSDN博客

js实现图片资源、blob、base64的各种场景转换 - 简书

上传图片文件转换成blob - july_lin - 博客园

base64转Blob方法_only_的博客-CSDN博客_base64 blob

浏览器 canvas下载图片 网络错误 - 奔跑吧人生 - 博客园

js 前端不调接口直接下载图片_weixin_30421809的博客-CSDN博客

canvas设置width, height - 默默学习的梨 - 博客园

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值