Html方式导出word 页头和页脚设置

<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
xmlns="http://www.w3.org/TR/REC-html40">
<head><meta http-equiv=Content-Type content="text/html; charset=utf-8"><title></title>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<style>
@page
{
    mso-page-orientation: landscape;
    size:29.7cm 21cm;    margin:1cm 1cm 1cm 1cm;
}
@page Section1 {
    mso-header-margin:.5in;
    mso-footer-margin:.5in;
    mso-header: h1;
    mso-footer: f1;
    }
div.Section1 { page:Section1; }
table#hrdftrtbl
{
    margin:0in 0in 0in 900in;
    width:1px;
    height:1px;
    overflow:hidden;
}
p.MsoFooter, li.MsoFooter, div.MsoFooter
{
    margin:0in;
    margin-bottom:.0001pt;
    mso-pagination:widow-orphan;
    tab-stops:center 3.0in right 6.0in;
    font-size:12.0pt;
}
</style>
<xml>
<w:WordDocument>
<w:View>Print</w:View>
<w:Zoom>100</w:Zoom>
<w:DoNotOptimizeForBrowser/>
</w:WordDocument>
</xml>
</head>

<body>
<div class="Section1">

    <p>&nbsp;</p>
<br/>
    <table id='hrdftrtbl' border='0' cellspacing='0' cellpadding='0'>
    <tr><td>        <div style='mso-element:header' id=h1 >
        <!-- HEADER-tags -->
            <p class=MsoHeader >HEADER</p>
        <!-- end HEADER-tags -->
        </div>
    </td>
    <td>
    <div style='mso-element:footer' id=f1><span style='position:relative;z-index:-1'> 
        <!-- FOOTER-tags -->
        FOOTER

        <span style='mso-no-proof:yes'><!--[if gte vml 1]><v:shapetype
         id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t"
         path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f">
         <v:formulas>
          <v:f eqn="if lineDrawn pixelLineWidth 0"/>
          <v:f eqn="sum @0 1 0"/>
          <v:f eqn="sum 0 0 @1"/>
          <v:f eqn="prod @2 1 2"/>
          <v:f eqn="prod @3 21600 pixelWidth"/>
          <v:f eqn="prod @3 21600 pixelHeight"/>
          <v:f eqn="sum @0 0 1"/>
          <v:f eqn="prod @6 1 2"/>
          <v:f eqn="prod @7 21600 pixelWidth"/>
          <v:f eqn="sum @8 21600 0"/>
          <v:f eqn="prod @7 21600 pixelHeight"/>
          <v:f eqn="sum @10 21600 0"/>
         </v:formulas>
         <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>
         <o:lock v:ext="edit" aspectratio="t"/>
        </v:shapetype><v:shape id="Picture_x0020_1" o:spid="_x0000_s3073" type="#_x0000_t75"
         alt="VHB" style='position:absolute;
         margin-right:0pt;margin-top:-400pt;
         z-index:-1;
         visibility:visible;mso-wrap-style:square;mso-wrap-distance-left:9pt;
         mso-wrap-distance-top:0;mso-wrap-distance-right:9pt;
         mso-wrap-distance-bottom:0;mso-position-horizontal:absolute;
         mso-position-horizontal-relative:text;mso-position-vertical:absolute;
         mso-position-vertical-relative:text'>
         <v:imagedata src="https://www.google.bg/logos/2012/Rodin-2012-homepage.png"/>
        </v:shape><![endif]--></span>
           <p class=MsoFooter>
           <span style=mso-tab-count:2'></span>
           Page <span style='mso-field-code: PAGE '><span style='mso-no-proof:yes'></span> from <span style='mso-field-code: NUMPAGES '></span>

        <!-- end FOOTER-tags -->
   </span>


        </p>
    </div>



    <div style='mso-element:header' id=fh1>
        <p class=MsoHeader><span lang=EN-US style='mso-ansi-language:EN-US'>&nbsp;<o:p></o:p></span></p>
        </div>
        <div style='mso-element:footer' id=ff1>
        <p class=MsoFooter><span lang=EN-US style='mso-ansi-language:EN-US'>&nbsp;<o:p></o:p></span></p>
    </div>

    </td></tr>
    </table>
</div>

</body></html>

参考地址:

http://stackoverflow.com/questions/13340216/html-generated-microsoft-word-document-with-header-footer-and-watermark

需要保存为doc文件才能起作用。

转载于:https://www.cnblogs.com/tangruixin/p/3555415.html

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用以下步骤将 HTML 导出Word: 1. 创建一个包含 HTML 内容的隐藏的 div 元素。 ```html <div id="export-content" style="display: none"> <!-- 这里是 HTML 内容 --> </div> ``` 2. 引入 jszip 和 docxtemplater 库。 ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/docxtemplater/3.9.1/docxtemplater.js"></script> ``` 3. 创建一个导出 Word 的函数。 ```javascript function exportToWord() { // 获取 HTML 内容 const content = document.getElementById("export-content").innerHTML; // 创建 JSZip 实例 const zip = new JSZip(); // 加载 Word 模板 const xhr = new XMLHttpRequest(); xhr.open("GET", "template.docx", true); xhr.responseType = "arraybuffer"; xhr.onload = function () { // 将模板文件读取为 Word 文档 const template = xhr.response; const doc = new window.docxtemplater().loadZip(new JSZip(template)); // 将 HTML 内容替换到模板中 doc.setData({ content: content, }); doc.render(); // 将生成的 Word 文档添加到 JSZip 实例中 const output = doc.getZip().generate({ type: "blob" }); zip.file("document.docx", output); // 下载 Word 文档 zip.generateAsync({ type: "blob" }).then(function (content) { saveAs(content, "document.docx"); }); }; xhr.send(); } ``` 其中,`template.docx` 是一个包含 Word 模板的文件,可以在模板中设置好样式、页眉页等内容。 4. 在页面中添加一个按钮,并将导出函数绑定到按钮的点击事件上。 ```html <button onclick="exportToWord()">导出 Word</button> ``` 这样,当用户点击按钮时,就会将 HTML 内容导出Word 文档并下载到本地。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值