HTML怎么实现IP白名单导出备份_HTML一键下载txt列表【方法】-html教程-PHP中文网

HTML无法直接读取服务器IP白名单，必须通过前端调用后端API（如/api/v1/whitelist/export）获取数据，再用fetch+Blob生成下载链接；需注意CORS、认证、响应头、编码及IE11兼容性。

html怎么实现ip白名单导出备份_html一键下载txt列表【方法】

HTML里根本不能直接读取服务器IP白名单

浏览器环境的 HTML 本身不具备访问后端配置文件或数据库的能力，所谓“一键导出白名单”，实际是前端发起请求、后端返回数据，再由浏览器触发下载。如果你试图用纯 fetch 或 XMLHttpRequest 直接读取 /config/whitelist.txt，大概率会遇到 CORS 错误或 403 —— 因为该路径通常不对外开放，或未配置跨域头。

常见错误现象：net::ERR_ABORTED 403、Blocked by CORS policy、控制台报 TypeError: Failed to fetch。

必须由后端提供一个受权限控制的 API 接口（如 /api/v1/whitelist/export），且返回 text/plain 内容
前端调用时需携带认证凭据（如 credentials: 'include' 或手动传 Authorization header）
接口响应头必须包含 Content-Disposition: attachment; filename="ip_whitelist.txt"，否则浏览器不会触发下载，而是渲染文本

用 `fetch` + `Blob` 实现真实可下载的“一键导出”

这是目前最轻量、兼容性好（Chrome 42+、Firefox 39+、Edge 14+）、无需第三方库的方案。核心逻辑：请求拿到 IP 列表字符串 → 转成 Blob → 创建临时 URL → 触发 a.download。

关键点在于：不能直接用 window.location.href 跳转到接口地址，那样无法控制文件名，且可能被拦截；也不能用 response.text() 后拼接 data:text/plain,，长列表会超 URL 长度限制（尤其 IE/Edge）。

后端返回纯文本，每行一个 IP，例如：192.168.1.100\n10.0.0.5\n2001:db8::1
前端代码中必须设置 responseType: 'blob'（fetch 默认是 default，对文本也适用，但显式声明更稳妥）
创建 a 标签后，记得在 click 完成后调用 URL.revokeObjectURL()，避免内存泄漏

document.getElementById('export-btn').addEventListener('click', async () => {
  try {
    const res = await fetch('/api/v1/whitelist/export', {
      method: 'GET',
      credentials: 'include'
    });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const blob = await res.blob();
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'ip_whitelist_' + new Date().toISOString().slice(0, 10) + '.txt';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  } catch (err) {
    console.error('导出失败:', err);
    alert('导出失败，请检查网络或权限');
  }
});

IE11 下 `fetch` 不可用？改用 `XMLHttpRequest` 兜底

IE11 不支持 fetch，且不支持 Blob 的某些构造方式（比如传入字符串）。如果项目仍需兼容 IE11，必须降级处理：用 XMLHttpRequest 获取文本，再通过 msSaveBlob 触发下载。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

注意：IE11 的 XMLHttpRequest 对跨域请求要求更严格，必须设置 xhr.withCredentials = true，且后端响应头需明确允许凭证（Access-Control-Allow-Credentials: true）。

不能依赖 responseType: 'blob'，IE11 只支持 'text' 或空字符串
生成 Blob 时，必须用 new Uint8Array(str.split('').map(c => c.charCodeAt(0))) 手动转码，否则中文或换行符会乱码
下载调用必须用 window.navigator.msSaveBlob(blob, filename)，而非 a.download

后端返回格式不对会导致下载内容错乱

看似只是“导出 txt”，但后端响应头和内容格式稍有偏差，前端拿到的就是乱码、空文件或 HTML 错误页。最容易被忽略的是字符编码与换行符。

典型问题：下载的 txt 文件用记事本打开全是乱码，或者 所有 IP 挤在一行，或者 文件开头多了 HTML 的 <doctype> 标签</doctype>。

后端必须返回 Content-Type: text/plain; charset=utf-8，不能是 text/html 或缺失 charset
确保换行符统一为 \n（Unix 风格），不要混用 \r\n；否则部分编辑器可能显示异常
绝对禁止在响应体开头插入任何日志、调试信息、BOM 头或 HTML 模板片段——哪怕只多一个空格，都会污染下载内容
若白名单来自数据库，注意过滤掉空值、重复项、非法 IP 格式（如 192.168.0.256），避免导出后无法直接用于 iptables 或 nginx 配置

导出功能看着简单，但真正跑通要前后端协同确认三件事：接口是否真返回纯文本、响应头有没有设对、前端有没有正确构造 Blob 并清理 URL。少一个环节，用户点十次按钮都下不出有效文件。