本文介绍如何在浏览器端安全、正确地生成包含 JavaScript 变量（如对象、数组）的 HTML 文件并触发下载，重点解决 JSON.stringify 缺失和 MIME 类型错误导致的语法异常问题。
本文介绍如何在浏览器端安全、正确地生成包含 javascript 变量（如对象、数组）的 html 文件并触发下载，重点解决 `json.stringify` 缺失和 mime 类型错误导致的语法异常问题。
在前端开发中，实现“纯客户端导出 HTML 文件”是一项常见需求，例如生成可离线查看的报告页或配置快照。但直接将 JavaScript 对象拼接到 HTML 字符串中（如 <script>console.log(${test_array})</script>）会引发 Uncaught SyntaxError: Unexpected identifier 'Object' —— 因为原始对象字面量 { "test": 10 } 被直接插入字符串后，未经过序列化，导致生成的 JS 代码语法非法（{ 被解释为块语句而非对象字面量，且无引号包裹）。
✅ 正确做法：双重适配
MIME 类型必须匹配文件内容
使用data:text/html;charset=utf-8,...替代text/plain，否则浏览器会以纯文本方式打开.html文件，无法渲染或执行脚本。JavaScript 值需 JSON 序列化
所有非字符串/数字的 JS 值（如对象、数组、布尔值、null）在插入<script></script>或内联 JS 时，必须通过JSON.stringify()转为合法 JSON 字符串，并确保引号与上下文兼容。
以下是优化后的完整实现：
<a href="#" id="export-button" onclick="exports()">export</a>
<script>
function download(filename, text, fileType = 'TXT') {
const element = document.createElement('a');
const mimeType = fileType === 'HTML'
? 'text/html;charset=utf-8'
: 'text/plain;charset=utf-8';
element.setAttribute('href', `data:${mimeType},${encodeURIComponent(text)}`);
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
function exports() {
const test_int = 10;
const test_str = 'hello world';
const test_array = { "test": 10, "nested": [1, 2, "three"] };
// ✅ 关键：用 JSON.stringify 安全嵌入对象
const content = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exported Report
<body>
<h1>Client-Side Export
<p>Integer: ${test_int}
<p>String: ${test_str}
<p>Object (as JSON): <pre class="brush:php;toolbar:false;">${JSON.stringify(test_array, null, 2)}</script>
<script>
console.log("Loaded object:", ${JSON.stringify(test_array)});
document.addEventListener('DOMContentLoaded', () => {
alert("HTML exported successfully!");
});
</script>Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
