HTML页面转换为Word文档时如何保留原有页面样式？

核心问题原因 #

• 你的CSS代码存在语法错误：<style>标签内部开头多了一个多余的{，导致整段样式规则无法被正确解析，这是样式丢失的首要原因
• 微软Word对HTML内嵌CSS的支持存在较多限制，很多现代CSS特性、层级选择器、带透明度的颜色都无法被正常识别

优化后可正常生效的代码 #

function Export2Word(element, filename = ''){
    // 修复了CSS开头多余的{，同时调整了部分Word不兼容的CSS属性
    var preHtml = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML To Doc</title><style>table{page-break-inside:auto}tr{page-break-inside:avoid;page-break-after:auto}thead{display:table-header-group}tfoot{display:table-footer-group}.Quotation-box{width:100%;border:1px solid #eee;background-color:#fff}table{border:1px solid #000;width:100%}.Quotation-box table td{padding:3px;vertical-align:top;}.right-border{border-right:1px solid #000;}.paddingcell{padding:5px;}.paddingcell1{padding:5px;}.bottom-border{border-bottom:1px solid #000;}.prod-title th{border-right:1px solid #000;}img{width:793px; height:auto;}.proddesc th{border-top:1px solid #000;}.terms{border-top:1px solid;}.calculation{padding:5px;}.fill{background:#cccccc;}.print-btn{padding-bottom:5px;}.terms-condition{font-weight:700;border-bottom:1px solid #000;padding-left:5px;background:#cccccc;margin-bottom:0;border-right:1px solid #000;}.stamp-section{padding-top:150px;text-align:center;}.bank-div p{padding-bottom:2px;}.terms-div p{padding-bottom:3px;}.subth{width:400px;border-right:1px solid #000;padding:5px;font-weight:400;border-bottom:1px solid #000;}.subth1{width:250px;}@page{margin:3.5mm;}td{width:40px;}</style></head><body>";
    var postHtml = "</body></html>";
    var html = preHtml+document.getElementById(element).innerHTML+postHtml;

    var blob = new Blob(['\ufeff', html], {
        type: 'application/msword'
    });
    
    // 指定链接地址
    var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);
    
    // 指定文件名
    filename = filename?filename+'.doc':'document.doc';
    
    // 创建下载链接元素
    var downloadLink = document.createElement("a");

    document.body.appendChild(downloadLink);
    
    if(navigator.msSaveOrOpenBlob ){
        navigator.msSaveOrOpenBlob(blob, filename);
    }else{
        // 创建文件链接
        downloadLink.href = url;
        
        // 设置文件名
        downloadLink.download = filename;
        
        // 触发下载
        downloadLink.click();
    }
    
    document.body.removeChild(downloadLink);
}

额外适配优化建议 #

• 尽量避免使用层级复杂的CSS选择器，Word对嵌套选择器支持度极低，建议直接给元素添加独立class，使用单类选择器写样式
• 不要使用带透明度的8位十六进制颜色值，Word不支持透明色，统一换成6位十六进制或者RGB纯色值
• 尽量不要用margin属性控制间距，Word对margin的解析逻辑和浏览器差异极大，建议换成padding或者空的占位元素实现间距效果
• 表格的宽度、边框等核心样式建议直接写在行内style属性中，行内样式优先级更高，Word更容易识别生效

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