需要处理的页面按F12,出现控制台/console,粘贴进入即可
获取分P播放列表(不下载)
由用户上传的分P视频应该都是能够获取的
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);
}
);
参考网站
canvas的toDataURL()方法_first_shun的博客-CSDN博客
使用html2canvas下载海报,里面的图片却下载不了兼容谷歌浏览器做下载_love-小七的博客-CSDN博客
js实现图片资源、blob、base64的各种场景转换 - 简书
上传图片文件转换成blob - july_lin - 博客园
base64转Blob方法_only_的博客-CSDN博客_base64 blob
浏览器 canvas下载图片 网络错误 - 奔跑吧人生 - 博客园