将HTML内容转换为PDF、Word、文本或源码是网页开发与数据采集中的常见需求。1. 导出为PDF：可通过浏览器打印功能直接另存为PDF；前端使用jsPDF结合html2canvas将页面渲染为图像并生成PDF，适合简单页面；对样式要求高的复杂页面推荐使用Puppeteer（Node.js）或WeasyPrint（Python）等后端工具进行高质量渲染。2. 导出为Word文档（.docx）：前端可利用docx库创建支持富文本的Word文件，并通过Blob触发下载，适用于报告类内容导出；服务端可用PHPWord或python-docx解析HTML生成结构化文档，处理能力更强。3. 保存为纯文本（.txt）：提取元素innerText内容，生成text/plain类型的Blob文件并下载，可去除所有标签，仅保留可读文字，适合摘要提取或归档。4. 下载HTML源码：将document.documentElement.outerHTML封装为text/html类型的Blob文件，实现网页完整代码的本地保存，便于离线查看或二次编辑。选择方案时需权衡前端便捷性与后端渲染质量，注意样式兼容、字符编码等问题以确保导出效果准确。
在网页开发或数据采集过程中，有时需要将 HTML 内容下载并转换为其他格式，比如 PDF、Word 或纯文本。实现这一目标的方法多样，既可以通过前端技术直接导出，也可以借助后端服务完成格式转换。以下是几种常见且实用的 HTML 内容下载与格式转换方法。
1. 将 HTML 导出为 PDF
将网页内容保存为 PDF 是最常见的需求之一，适合打印或归档。
• 使用浏览器原生功能：用户可直接在浏览器中按 Ctrl+P（Cmd+P on Mac），选择“另存为 PDF”来导出当前页面。• 前端库实现（如 jsPDF + html2canvas）：
通过 JavaScript 库组合，可在页面中添加“导出为 PDF”按钮。
示例代码：
立即学习“前端免费学习笔记（深入）”；
const { jsPDF } = window.jspdf;
html2canvas(document.getElementById("content")).then(canvas => {
const imgData = canvas.toDataURL("image/png");
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 0, 0);
pdf.save("content.pdf");
});
• 后端生成（推荐用于复杂样式）：使用 Puppeteer（Node.js）或 WeasyPrint（Python）等工具，将 HTML 渲染为高质量 PDF。
2. 导出为 Word 文档（.docx）
适用于需要编辑的场景，如报告导出。
• 使用 docx 库（JavaScript）：该库可在浏览器或 Node.js 中创建 .docx 文件。
简单示例：
import { Document, Packer, Paragraph } from "docx";
const doc = new Document({
sections: [{
properties: {},
children: [new Paragraph("这是从HTML导出的内容")]
}]
});
Packer.toBlob(doc).then(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "content.docx";
a.click();
});
• 服务端转换：PHP 的 PHPWord 或 Python 的 python-docx 可解析 HTML 并生成 Word 文件，更适合处理富文本。
3. 保存为纯文本（.txt）
提取 HTML 中的文本内容并下载为 .txt 文件，操作简单高效。
实现方式：
function downloadAsText() {
const content = document.getElementById("content").innerText;
const blob = new Blob([content], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "content.txt";
a.click();
}
此方法去除了所有标签，仅保留可读文字，适合内容归档或摘要提取。
4. 直接下载 HTML 源码
若需保留原始结构，可将当前页面 HTML 导出为 .html 文件。
实现代码：
function downloadHTML() {
const html = document.documentElement.outerHTML;
const blob = new Blob([html], { type: "text/html" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "page.html";
a.click();
}
用户点击后即可保存完整网页代码，便于离线查看或二次编辑。
基本上就这些常用方式。根据实际需求选择合适的导出格式，前端轻量操作可用 JavaScript 库，对排版要求高时建议结合后端渲染。实现不复杂但容易忽略细节，比如样式兼容性或字符编码问题。
