如何根据网页目前使用到的css导出样式

function exportCSS() {
// 获取所有的style标签
const styles = document.querySelectorAll(‘style’);
let css = ”;

// 将style标签的内容添加到css变量中
styles.forEach(style => {
css += style.textContent;
});

// 创建一个新的link标签,用于获取所有的外部CSS文件
const links = document.querySelectorAll(‘link[rel=”stylesheet”]’);

// 使用Promise.all来并行获取所有CSS资源
Promise.all(Array.from(links).map(link => {
return fetch(link.href)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.text();
})
.then(text => (css += text + ‘\n’)); // 添加获取的CSS到css变量中
})).then(() => {
// 创建一个Blob对象,并使用它创建一个URL
const blob = new Blob([css], { type: ‘text/css’ });
const url = URL.createObjectURL(blob);

// 创建一个a标签用于下载生成的CSS文件
const downloadLink = document.createElement(‘a’);
downloadLink.href = url;
downloadLink.download = ‘styles.css’;
document.body.appendChild(downloadLink);

// 模拟a标签的点击以触发下载
downloadLink.click();

// 清理并释放资源
document.body.removeChild(downloadLink);
URL.revokeObjectURL(url);
}).catch(error => {
console.error(error);
});
}

// 调用exportCSS函数
exportCSS();

评论已经被关闭。

插入图片
返回顶部