前几篇文章介绍了jquery.wordexport.js插件导出Word,阅读jquery.wordexport.js插件源码可知,将html格式的文件保存为拓展名为.docx或.doc文件,即可用word程序打开,打开视图格式为“web版式视图”。
这篇文章将介绍如何添加一些代码,实现以下两个小细节:
1)以页面视图方式打开
2)调整页边距
一、JS导出Word以“页面方式”打开
以页面方式打开,仅需做的调整是:
1)<html>页签的调整
<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/office/2004/12/omml"
xmlns="http://www.w3/TR/REC-html40">
2)在<head></head>页签内部添加如下内容
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Print</w:View>
<w:GrammarState>Clean</w:GrammarState>
<w:TrackMoves>false</w:TrackMoves>
<w:TrackFormatting/>
<w:ValidateAgainstSchemas/>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:DoNotPromoteQF/>
<w:LidThemeOther>EN-US</w:LidThemeOther>
<w:LidThemeAsian>ZH-CN</w:LidThemeAsian>
<w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript>
<w:Compatibility>
<w:BreakWrappedTables/>
<w:SnapToGridInCell/>
<w:WrapTextWithPunct/>
<w:UseAsianBreakRules/>
<w:DontGrowAutofit/>
<w:SplitPgBreakAndParaMark/>
<w:DontVertAlignCellWithSp/>
<w:DontBreakConstrainedForcedTables/>
<w:DontVertAlignInTxbx/>
<w:Word11KerningPairs/>
<w:CachedColBalance/>
<w:UseFELayout/>
</w:Compatibility>
<w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
<m:mathPr>
<m:mathFont m:val="Cambria Math"/>
<m:brkBin m:val="before"/>
<m:brkBinSub m:val="--"/>
<m:smallFrac m:val="off"/>
<m:dispDef/>
<m:lMargin m:val="0"/>
<m:rMargin m:val="0"/>
<m:defJc m:val="centerGroup"/>
<m:wrapIndent m:val="1440"/>
<m:intLim m:val="subSup"/>
<m:naryLim m:val="undOvr"/>
</m:mathPr></w:WordDocument>
</xml><![endif]-->
二、JS调整页边距
页边距的调整需要修改<style>页签中的样式@page WordSection1中的margin值即可
<style>
@page WordSection1{
size:595.3pt 841.9pt;
margin:72.0pt 90.0pt 72.0pt 90.0pt;//默认margin值表示的页边距为 上下边距2.54厘米、左右边距3.17厘米
mso-header-margin:42.55pt;
mso-footer-margin:49.6pt;
mso-paper-source:0;
}
@page WordSection1{
size:595.3pt 841.9pt;
margin:36.0pt 36.0pt 36.0pt 36.0pt;//该margin值表示的页边距为 上下左右边距都为1.27厘米
mso-header-margin:42.55pt;
mso-footer-margin:49.6pt;
mso-paper-source:0;
}
</style>
三、完整的示例代码
完整的示例代码如下(示例代码为默认的页边距)
<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/office/2004/12/omml"
xmlns="http://www.w3/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=unicode">
<!--[if gte mso 9]>
<xml>
<w:WordDocument>
<w:View>Print</w:View>
<w:SpellingState>Clean</w:SpellingState>
<w:GrammarState>Clean</w:GrammarState>
<w:TrackMoves>false</w:TrackMoves>
<w:TrackFormatting/>
<w:ValidateAgainstSchemas/>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:DoNotPromoteQF/>
<w:LidThemeOther>EN-US</w:LidThemeOther>
<w:LidThemeAsian>ZH-CN</w:LidThemeAsian>
<w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript>
<w:Compatibility>
<w:BreakWrappedTables/>
<w:SnapToGridInCell/>
<w:WrapTextWithPunct/>
<w:UseAsianBreakRules/>
<w:DontGrowAutofit/>
<w:SplitPgBreakAndParaMark/>
<w:DontVertAlignCellWithSp/>
<w:DontBreakConstrainedForcedTables/>
<w:DontVertAlignInTxbx/>
<w:Word11KerningPairs/>
<w:CachedColBalance/>
<w:UseFELayout/>
</w:Compatibility>
<w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
<m:mathPr>
<m:mathFont m:val="Cambria Math"/>
<m:brkBin m:val="before"/>
<m:brkBinSub m:val="--"/>
<m:smallFrac m:val="off"/>
<m:dispDef/>
<m:lMargin m:val="0"/>
<m:rMargin m:val="0"/>
<m:defJc m:val="centerGroup"/>
<m:wrapIndent m:val="1440"/>
<m:intLim m:val="subSup"/>
<m:naryLim m:val="undOvr"/>
</m:mathPr></w:WordDocument>
</xml>
<![endif]-->
<style>
<!--
/* Font Definitions */
@font-face
{font-family:宋体;
panose-1:2 1 6 0 3 1 1 1 1 1;
mso-font-alt:SimSun;
mso-font-charset:134;
mso-generic-font-family:auto;
mso-font-pitch:variable;
mso-font-signature:3 680460288 22 0 262145 0;}
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;
mso-font-charset:1;
mso-generic-font-family:roman;
mso-font-format:other;
mso-font-pitch:variable;
mso-font-signature:0 0 0 0 0 0;}
@font-face
{font-family:"\@宋体";
panose-1:2 1 6 0 3 1 1 1 1 1;
mso-font-charset:134;
mso-generic-font-family:auto;
mso-font-pitch:variable;
mso-font-signature:3 680460288 22 0 262145 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-unhide:no;
mso-style-qformat:yes;
mso-style-parent:"";
margin:0cm;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:14.0pt;
font-family:宋体;
mso-bidi-font-family:宋体;}
p.MsoHeader, li.MsoHeader, div.MsoHeader
{mso-style-noshow:yes;
mso-style-priority:99;
mso-style-link:"页眉 Char";
margin:0cm;
margin-bottom:.0001pt;
text-align:center;
mso-pagination:widow-orphan;
layout-grid-mode:char;
font-size:9.0pt;
font-family:宋体;
mso-bidi-font-family:宋体;}
p.MsoFooter, li.MsoFooter, div.MsoFooter
{mso-style-noshow:yes;
mso-style-priority:99;
mso-style-link:"页脚 Char";
margin:0cm;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
layout-grid-mode:char;
font-size:9.0pt;
font-family:宋体;
mso-bidi-font-family:宋体;}
p.MsoAcetate, li.MsoAcetate, div.MsoAcetate
{mso-style-noshow:yes;
mso-style-priority:99;
mso-style-link:"批注框文本 Char";
margin:0cm;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:9.0pt;
font-family:宋体;
mso-bidi-font-family:宋体;}
span.Char
{mso-style-name:"页眉 Char";
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-unhide:no;
mso-style-locked:yes;
mso-style-link:页眉;
font-family:宋体;
mso-ascii-font-family:宋体;
mso-fareast-font-family:宋体;
mso-hansi-font-family:宋体;}
span.Char0
{mso-style-name:"页脚 Char";
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-unhide:no;
mso-style-locked:yes;
mso-style-link:页脚;
font-family:宋体;
mso-ascii-font-family:宋体;
mso-fareast-font-family:宋体;
mso-hansi-font-family:宋体;}
span.Char1
{mso-style-name:"批注框文本 Char";
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-unhide:no;
mso-style-locked:yes;
mso-style-link:批注框文本;
font-family:宋体;
mso-ascii-font-family:宋体;
mso-fareast-font-family:宋体;
mso-hansi-font-family:宋体;}
p.msochpdefault, li.msochpdefault, div.msochpdefault
{mso-style-name:msochpdefault;
mso-style-unhide:no;
mso-margin-top-alt:auto;
margin-right:0cm;
mso-margin-bottom-alt:auto;
margin-left:0cm;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:宋体;
mso-bidi-font-family:宋体;}
span.msonormal0
{mso-style-name:msonormal;
mso-style-unhide:no;}
.MsoChpDefault
{mso-style-type:export-only;
mso-default-props:yes;
font-size:10.0pt;
mso-ansi-font-size:10.0pt;
mso-bidi-font-size:10.0pt;
mso-ascii-font-family:"Times New Roman";
mso-hansi-font-family:"Times New Roman";
mso-font-kerning:0pt;}
/* Page Definitions */
@page WordSection1
{size:595.3pt 841.9pt;
margin:72.0pt 90.0pt 72.0pt 90.0pt;
mso-header-margin:42.55pt;
mso-footer-margin:49.6pt;
mso-paper-source:0;}
div.WordSection1
{page:WordSection1;}
-->
</style>
</head>
<body lang=ZH-CN style='tab-interval:21.0pt'>
<div class=WordSection1>
<p align=center style="font-size:20pt;font-weight:bold;">JS导出Word已"页面视图"打开</p>
</div>
</body>
</html>
用word打开后的效果图如下:
更多推荐
JS导出Word细节设置
发布评论