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

获取分P播放列表（不下载）

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

测试网站链接1

测试网站链接2

var listBox = document.getElementsByClassName('list-box')[0], // 获取li列表的ulliList = 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 - 默默学习的梨 - 博客园

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

JavaScript获取B站分集视频标题及各集时长、累计时长
之前在学习B站分集视频时,为做笔记曾需要频繁复制标题文字,同时也需要知道视频时长,于是用js把标题及时长在控制台输出然后复制存为文本文件. var box=document.getElementsBy ...
哔哩哔哩html制作搜索,b站如何搜索用户？哔哩哔哩bilibili搜索用户全教程
哔哩哔哩动画,bilibili现为国内最大的年轻人潮流文化娱乐社区,又称b站.既然那么流行,当然很多小伙伴都会在里面啦,那么怎么样搜索到那些小伙伴或者你想要关注的用户呢? 哔哩哔哩bilibili搜索 ...
python 突破b站验证码_Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能...
写在前面今天带给大家一个突破点选验证码的案例,利用爬虫模拟登陆哔哩哔哩,并且把一些采坑的地方给大家强调一下! 一.需求分析模拟登陆哔哩哔哩网站链接: https://passport.bilib ...
bilibili mac客户端哔哩哔哩 b站mac客户端
bilibili mac客户端是哔哩哔哩弹幕网在Mac平台上的Mac迷你播放客户端!小编亲测!bilibili mac客户端支持在macos 11 big sur和M1芯片电脑使用!很好的解决了Bil ...
bilibili注册页面编码HTML码,哔哩哔哩bilibili新人邀请码在哪填写 B站怎么绑定输入邀请码方法...
哔哩哔哩bilibili新用户怎么填写邀请码?哔哩哔哩app中邀请好友赚红包的活动,用户每邀请一个好友,观看视频就可以获得奖励,那么B站新注册的用户在哪里可以填写邀请码呢?下面就一起来看看吧! 202 ...
获取哔哩哔哩(bilibili)评论总结
故事背景作为一个菜鸟测试工程师,经常通过看视频的方式学习新的知识,但很多视频都有或多或少的错误,而评论区一般会有对应的答案! 如果评论比较多,一页一页翻看就比较麻烦了,这里就需要通过接口方式获取对应 ...
b站电脑测试用什么软件,使用BiliBili访问诊断工具检测哔哩哔哩网络的方法
BiliBili是一个人气超高的网站,在这个网站中我们可以搜索到很多的动漫信息,对于二次元爱好者来说一定不陌生吧?不过在使用BiliBili的时候经常会因为电脑或是网速的原因导致无法打开网站,有的网站 ...
菜鸟弟弟从零开始的爬取Bilibili弹幕的Python爬虫教程-哔哩哔哩 - ( ゜- ゜)つロ干杯~
从零开始的爬取Bilibili弹幕的Python爬虫教程或许可以作为一个爬虫小白的练手的demo? 还是先看看什么是爬虫吧!(还有Bilibili! ) 网络爬虫: 网络爬虫(又称为网页蜘蛛,网络机 ...
Python：哔哩哔哩B站视频下载，我终于对小破站下手了
前言众所周知,B站的视频是以Blob的方式分断传输视频的,网上也有很多使用拼接视频来达到下载的目的的,但是这样的效率很低,这篇文章提供了三种其它的思路去下载小破站的视频. 开发环境 python 3 ...