目录
获取分P播放列表（不下载）获取分P播放列表（并将列表保存本地 excel 文件）获取分P播放列表（并将列表保存本地图片文件）参考网站需要处理的页面按F12，出现控制台/console，粘贴进入即可
获取分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 - 默默学习的梨 - 博客园
