客户端生成带变量的HTML下载文件时遇语法错误求助

问题重现 #

实现了客户端导出文件的按钮，但生成HTML文件时，插入对象类型变量会触发语法错误Uncaught SyntaxError: Unexpected identifier 'Object'，整数变量则正常工作。

原代码 #

HTML

<a href="#" id="export-button" onclick="exports()">export</a>
<script src="example.js"></script>

JavaScript

function download(filename, text) {
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', filename);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
}

function exports() {
    let test_int = 10
    let test_str = 'hello world'
    let test_array = { "test": 10 }
    content = `<script>console.log(${test_array})</script>`
    download('export.html', content)
}

问题根源 #

模板字符串里直接插入对象${test_array}时，JS会默认调用对象的toString()方法，把对象转为[object Object]。最终导出的HTML里的脚本代码会变成：

console.log([object Object])

这是无效的JavaScript语法，浏览器解析时自然会报错。而整数类型变量直接转为字符串，不会产生语法问题。

修复方案 #

需要将对象序列化为JSON字符串，同时处理引号避免破坏HTML结构：

修正后的JavaScript代码 #

function download(filename, text) {
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', filename);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
}

function exports() {
    let test_int = 10
    let test_str = 'hello world'
    let test_array = { "test": 10 }
    // 序列化对象为JSON字符串，转义双引号防止与HTML标签的引号冲突
    const objStr = JSON.stringify(test_array).replace(/"/g, '"');
    content = `<script>console.log(${objStr})</script>`
    download('export.html', content)
}

另一种更简洁的处理方式是用单引号包裹JSON字符串：

function exports() {
    let test_int = 10
    let test_str = 'hello world'
    let test_array = { "test": 10 }
    const objStr = JSON.stringify(test_array);
    content = `<script>console.log('${objStr}')</script>`
    download('export.html', content)
}

关键说明 #

• JSON.stringify()可以将对象转换为合法的JSON格式字符串，保证生成的脚本语法正确。
• 转义引号或使用单引号包裹，是为了避免JSON中的双引号与HTML脚本标签的双引号冲突，导致HTML结构被破坏。

内容的提问来源于stack exchange，提问作者isaac