原生JS将HTML导出生成word文档有页眉页脚

Fanx繁星

已于 2022-03-27 22:25:55 修改

阅读量1.9k

点赞数 1

文章标签：导出word html导出word 原生js导出word html导出word 页眉页脚页眉页脚

于 2022-03-27 22:23:47 首次发布

该文章为 Fanx繁星原创文章，如需转载请注明来源

本文链接：https://blog.csdn.net/qq_32447361/article/details/123783089

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

下载JS文件 https://github.com/fxboy/HtmlExportToWord.js.git

<html>

<body>

<div id="export">
	<div class="className">
		这边是导出的内容
	</div>
	
	<div style="mso-element:header"  id="h0" ><p class=MsoHeader > 页眉 </p></div>
    <div style="mso-element:footer"  id="f0" ><p class=MsoFooter >页脚</p></div>
</div>


</body>

</html>

导出的样式都是下面 Option来控制的

例如 display为print，就是在打开word的时候，将显示的视图改为页面，而不是web的样式


let option = {
    "header": {
        "display": "Print",
        "Zoom": "75",
        "mateType": false
    },
    "page": {
        "className": "className",
        "marginTop": "36.0079387581514pt",
        "marginBotton": "36.0079387581514pt",
        "marginLeft": "36.0079387581514pt",
        "marginRight": "36.0079387581514pt",
        "size": "595.3000pt 841.9000pt",
        "headerContext": "h0",
        "footerContext": "f0",
        "headerMargin":"20pt",
        "footerMargin:":"20pt",
        "pageNumber":"1"

    },
    "elem": {
        "maxWidth":"595.3",
        "remove":[".editor-left",".editor-right"]
    },
    "css":{
        ".props_input":{
            "text-decoration":"underline",
            "content":" ",
        }
    },
    "input":{
        "tal":"PROP_INPUT_TAL",
        "tar":"PROP_INPUT_TAR"
    }
}
function toWord(fileName){
    let word = new WordExport("export",option);
    word.export(fileName, (body)=>{
         // 对要导出的html做出最后的处理
        return b;
    });
}