使用innerHTML下载HTML文件丢失<html><head>标签如何解决

你遇到的<html>、<head>标签丢失问题是浏览器DOM解析规则导致的：当完整的HTML文档（包含<!DOCTYPE>、<html>、<head>等顶层标签）被嵌入到普通<div>元素内部时，浏览器会自动剔除这些不属于div合法子元素的顶层标签，仅保留原本属于<body>内部的内容，因此读取innerHTML时无法拿到被剥离的外层标签。

推荐改造成本最低的自定义属性存储方案，不影响现有预览逻辑，仅需调整两处代码即可：

1. 将完整的邮件HTML内容存储到预览容器的自定义属性data-full-html中
2. 导出时直接读取该自定义属性的值，而非读取innerHTML

调整后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<a style="background-color: #c028b9; color: white; text-decoration: none; padding: 2% 3%; border-radius: 999px" href="#" id="downloadLink">Download email html</a>

<script>
function downloadInnerHtml(filename, elId, mimeType) {
    // 读取自定义属性存储的完整HTML内容
    const elHtml = document.getElementById(elId).dataset.fullHtml;
    const link = document.createElement('a');
    mimeType = mimeType || 'text/html';

    link.setAttribute('download', filename);
    link.setAttribute('href', 'data:' + mimeType  +  ';charset=utf-8,' + encodeURIComponent(elHtml));
    link.click(); 
}

const fileName =  'emailName_renameMe.html'; 
        
$('#downloadLink').click(function(){
    downloadInnerHtml(fileName, 'emailPreview','text/html');
});
</script>

<div id="emailPreviewWrapper" class="emailPreviewWrapper"  style="width: 50%; float: right; position:relative;">
    <!-- 完整HTML存入自定义属性，innerHTML保留原有内容用于页面预览 -->
    <div id="emailPreview" data-full-html='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style></style>
</head>
<body>
<table>
<tr>
<td> Email Content</td>
</tr>
</table>
</body>
</html>'>
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style></style>
</head>
<table>
<tr>
<td> Email Content</td>
</tr>
</table>
</html>
    </div>
</div>

如果你的邮件HTML内容包含单引号，存入data-full-html属性前需要先对单引号做转义处理，避免属性值提前闭合导致内容异常。
如果是动态生成邮件内容，每次更新预览内容的同时，同步更新data-full-html属性的值即可。

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