js实现网页保存
使用JavaScript保存网页内容的方法
保存为文件 通过Blob对象和URL.createObjectURL方法将网页内容保存为文件。以下代码可将当前页面HTML保存为.html文件：
const htmlContent = document.documentElement.outerHTML;
const blob = new Blob([htmlContent], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'page.html';
a.click();保存选中文本 使用Selection API获取用户选中的文本内容并保存：
const selection = window.getSelection().toString();
if (selection) {
const blob = new Blob([selection], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'selection.txt';
a.click();
}保存特定元素内容 针对特定DOM元素的内容保存，例如保存ID为"content"的div：
const element = document.getElementById('content');
if (element) {
const blob = new Blob([element.innerHTML], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'element_content.html';
a.click();
}使用FileSaver.js库 FileSaver.js简化了文件保存过程，首先引入库：
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>然后使用：
const content = document.documentElement.outerHTML;
const blob = new Blob([content], {type: "text/html;charset=utf-8"});
saveAs(blob, "webpage.html");注意事项
- 跨域限制：无法直接保存来自其他域的iframe内容
- 样式问题：保存的HTML可能丢失部分外部引用的CSS
- 浏览器兼容性：Blob API在现代浏览器中支持良好，但不支持IE9及以下版本
- 大文件处理：过大的HTML内容可能导致内存问题
保存Canvas为图片
若需保存Canvas元素为图片：
const canvas = document.getElementById('myCanvas');
canvas.toBlob(function(blob) {
saveAs(blob, 'canvas_image.png');
});
