Mor-Li · May 12, 2024 21:06
diff --git a/download_csdn_article.js b/download_csdn_article.js
 // 打开一个新窗口以便于存放和显示提取的内容
 var newWin = window.open('', '_blank');

 // 提取带有'blog-content-box'类的元素的HTML内容
 var contentBox = document.querySelector('.blog-content-box').outerHTML;

 // 获取标题用于文件名
 var articleTitle = document.querySelector('#articleContentId').innerText.trim();
 var fileName = articleTitle.replace(/[\/\\:*?"<>|]/g, '_') + '.html'; // 清理文件名中的非法字符

 // 创建一个完整的HTML结构，并添加CSS样式
 var htmlContent = `
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Extracted Content</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            margin: 0;
            padding: 20px; /* 设置边缘空白间隔 */
            box-sizing: border-box;
            height: 100vh;
        }
        .blog-content-box {
            width: 50%; /* 限制宽度为页面的50% */
            margin: auto; /* 居中显示 */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加轻微的阴影效果 */
            padding: 20px; /* 内部间隔 */
            box-sizing: border-box;
        }
    </style>
 </head>
 <body>
    ${contentBox}
 </body>
 </html>`;

 // 修改资源链接（图片、CSS等）的相对路径为绝对路径
 htmlContent = htmlContent.replace(/src="(.*?)"/g, (match, p1) => {
    return 'src="' + new URL(p1, document.baseURI).href + '"';
 });
 htmlContent = htmlContent.replace(/href="(.*?)"/g, (match, p1) => {
    return 'href="' + new URL(p1, document.baseURI).href + '"';
 });

 // 在新窗口中显示新的HTML内容
 newWin.document.write(htmlContent);
 newWin.document.close();

 // 创建下载链接并设置下载文件名
 var blob = new Blob([htmlContent], { type: 'text/html' });
 var link = document.createElement('a');
 link.href = window.URL.createObjectURL(blob);
 link.download = fileName; // 使用标题作为文件名
 link.textContent = 'Download HTML';

 // 将下载链接添加到新窗口中以便用户可以点击下载
 newWin.document.body.appendChild(link);
	// 打开一个新窗口以便于存放和显示提取的内容
	var newWin = window.open('', '_blank');

	// 提取带有'blog-content-box'类的元素的HTML内容
	var contentBox = document.querySelector('.blog-content-box').outerHTML;

	// 获取标题用于文件名
	var articleTitle = document.querySelector('#articleContentId').innerText.trim();
	var fileName = articleTitle.replace(/[\/\\:*?"<>\|]/g, '_') + '.html'; // 清理文件名中的非法字符

	// 创建一个完整的HTML结构，并添加CSS样式
	var htmlContent = `
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Extracted Content</title>
	<style>
	body {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 20px; /* 设置边缘空白间隔 */
	box-sizing: border-box;
	height: 100vh;
	}
	.blog-content-box {
	width: 50%; /* 限制宽度为页面的50% */
	margin: auto; /* 居中显示 */
	box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加轻微的阴影效果 */
	padding: 20px; /* 内部间隔 */
	box-sizing: border-box;
	}
	</style>
	</head>
	<body>
	${contentBox}
	</body>
	</html>`;

	// 修改资源链接（图片、CSS等）的相对路径为绝对路径
	htmlContent = htmlContent.replace(/src="(.*?)"/g, (match, p1) => {
	return 'src="' + new URL(p1, document.baseURI).href + '"';
	});
	htmlContent = htmlContent.replace(/href="(.*?)"/g, (match, p1) => {
	return 'href="' + new URL(p1, document.baseURI).href + '"';
	});

	// 在新窗口中显示新的HTML内容
	newWin.document.write(htmlContent);
	newWin.document.close();

	// 创建下载链接并设置下载文件名
	var blob = new Blob([htmlContent], { type: 'text/html' });
	var link = document.createElement('a');
	link.href = window.URL.createObjectURL(blob);
	link.download = fileName; // 使用标题作为文件名
	link.textContent = 'Download HTML';

	// 将下载链接添加到新窗口中以便用户可以点击下载
	newWin.document.body.appendChild(link);