使用JavaScript下载HTML指定div元素内容时样式丢失如何解决

你遇到的问题由两个原因导致：

1. MIME类型设置错误：你当前使用的data:text/plain为纯文本类型，浏览器会按普通文本解析内容，不会渲染HTML标签，因此表格结构无法正常显示。
2. 缺失样式依赖：你导出的只有#invoice元素的内部HTML，没有包含原页面的CSS样式规则，你代码中用到的col-md-12、row、table-bordered等类名对应的样式没有被引入，布局和设计效果自然无法还原。

以下是修正后的代码：

function downloadMyElement() {
    // 获取目标元素内部内容
    const invoiceContent = document.getElementById('invoice').innerHTML;
    // 构造完整HTML文档，内嵌所需样式
    const fullHtml = `
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Invoice</title>
    <style>
        * {
            box-sizing: border-box;
        }
        .row {
            display: flex;
            width: 100%;
        }
        .col-md-12 {
            width: 100%;
            padding: 0 15px;
        }
        .col {
            flex: 1;
            padding: 0 15px;
        }
        .table-bordered {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }
        .table-bordered th, .table-bordered td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        h6 {
            margin: 0 0 5px 0;
            font-size: 16px;
        }
        p {
            margin: 0 0 10px 0;
        }
    </style>
</head>
<body>
    <div class="col-md-12" id="invoice">
        ${invoiceContent}
    </div>
</body>
</html>
    `;
    const filename = "MyElement.html";
    const element = document.createElement('a');
    // 将MIME类型修改为text/html，正常渲染HTML内容
    element.setAttribute('href', 'data:text/html;charset=utf-8,' + encodeURIComponent(fullHtml));
    element.setAttribute('download', filename);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
}

修改说明：

• 调整数据MIME类型，让浏览器按照HTML格式解析文件内容，正常渲染表格等标签
• 补充完整的HTML文档结构，新增head、body标签
• 在head标签内内嵌了对应布局、表格所需的CSS样式，你可以根据原页面的实际样式调整style标签内的规则，即可100%还原原始设计效果

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