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

最新推荐文章于 2024-05-08 09:41:08 发布

HConan

最新推荐文章于 2024-05-08 09:41:08 发布

阅读量1.6k

点赞数 2

分类专栏： JavaScript 文章标签： javascript html html5

本文链接：https://blog.csdn.net/chengzhijun93/article/details/119966473

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

获取分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 - 默默学习的梨 - 博客园

HConan

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JSjavascript获取B站bilibili哔哩哔哩分P播放列表并以excel文件保存本地

目录获取分P播放列表（不下载）获取分P播放列表（并将列表保存本地 excel 文件）需要处理的页面按F12，出现控制台/console，粘贴进入即可获取分P播放列表（不下载）由用户上传的分P视频应该都是能够获取的测试网站链接1测试网站链接2var listBox = document.getElementsByClassName('list-box')[0], // 获取li列表的ul liList = listBox.getElementsByTagName('li'), // 获取l
复制链接

扫一扫