JS导出Word细节设置

最新推荐文章于 2024-06-18 17:58:22 发布
最新推荐文章于 2024-06-18 17:58:22 发布
阅读量1.8w 收藏 13
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengshuiyue/article/details/73321190
版权

前几篇文章介绍了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.com/office/2004/12/omml"
xmlns="http://www.w3.org/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.com/office/2004/12/omml"
xmlns="http://www.w3.org/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打开后的效果图如下：


风水月
关注
  • 0
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
专栏目录
前端插件导出word，完美demo
03-15
自带插件 ，代码齐全， 可直接导出word，亲测有效，放心下载！
vue导出word文档
qq_44899153的博客
03-25 627
1.安装依赖 npm install docxtemplater npm install pizzip npm install jszip-utils npm install file-saver 2.创建js文件，引入依赖 import Docxtemplater from 'docxtemplater'; import PizZip from 'pizzip'; import JSZipUtils from 'jszip-utils'; import { saveAs } from 'file-sav
thymeleaf+Springboot实现试卷导出为Word
最新发布
m0_62458640的博客
06-18 245
实习期间遇到了一个这样的需求，业务要求将试题详情进行导出。这样就可以实现题目导出为Word的操作辣，如果有问题欢迎大家与我交流！
html 导出 word 调整页边距
团子窝
09-30 2710
经分析源码，添加如下CSS代码即可： @page WordSection1 {size:595.3pt 841.9pt; margin:30.0pt 30.0pt 30.0pt 30.0pt; mso-header-margin:42.55pt; mso-footer-margin:49.6pt; mso-paper-source:0;} div.WordSection1 {pag...
word复制到html编辑器中可能产生的垃圾代码
暂时先用这个名字
02-27 1761
MsoNormal: 这是Word默认使用的样式名称，也是最常见的垃圾代码之一。MsoListParagraph: 用于列表段落的样式名称。MsoTitle: 用于标题的样式名称。MsoHeader: 用于页眉的样式名称。MsoFooter: 用于页脚的样式名称。MsoTable: 用于表格的样式名称。MsoCommentText: 用于批注的样式名称。MsoBodyText: 用于正文的样式名称。这些垃圾代码通常会导致样式混乱，因此建议在处理HTML代码时尽可能去除它们。
php html word_PHP完美生成word文档，可加入html元素
weixin_42501077的博客
03-09 383
PHP生成word文档，网上有很多方法，有调用COM组件生成的，有安装PHP扩展生成的，也有引用第三方类库，如phpword生成的。以下为最简洁的两种方法，无须安装其他，只要你安装了php环境便可以直接生成。header("Content-type:text/html;charset=utf-8");/*** @desc 方法一、生成word文档* @param $content* @param ...
itext7 字体问题解答与相应源代码分析
BoBo的博客
04-23 3955
ITEXT7 字体处理前言一、如何添加itext7 没有的字体？二、部分字体添加无效总结 前言 本文主要是用于解决itext7 添加字体时遇到的问题分析及解决方案。 一、如何添加itext7 没有的字体？ itext pdf 提供了多种对字体的添加，例如： FontProvider fp = new FontProvider(); // 该方法为通过添加font的路径的方式让FontProvider对象自行加载字体列表 fp.addDirectory(prePath + "config\\fonts")
js导出Word默认页面视图、横向显示、分栏、设置固定页眉
08-14
总的来说，利用JavaScript导出Word文档并进行特定的页面布局和格式设置，需要对HTML、CSS以及相关的库有深入的理解。这是一个涉及多方面技术的综合任务，但通过不断学习和实践，开发者可以创建出高度定制化的Word...
jquery导出word
07-13
本文将详细讲解如何利用jQuery实现“导出Word”功能，以及相关的关键知识点。 首先，jQuery导出Word功能主要是为了让网页中的内容能够以Word文档的形式保存或分享。这通常涉及到数据的格式转换和文件的下载触发。...
vue导出word功能
02-20
在Vue.js应用中实现导出Word功能，通常是为了让用户能够方便地下载并保存数据报告、图表或表格等信息。Echarts是一个强大的JavaScript可视化库，常用于创建各种类型的图表，如折线图、柱状图、饼图等。将Echarts图表...
javaScript导出word和excel例子
05-05
在JavaScript中，我们可以利用...通过以上知识点，你可以构建一个基本的JavaScript应用程序，实现从HTML导出Word和Excel的功能。具体的实现细节会根据使用的库和需求有所不同，但这些核心概念是构建此类功能的基础。
word生成目录后 中文目录前出现Equation Chapter (Next) Section 1字样解决方法
Bonner1的博客
03-26 2万+
word生成目录后 中文目录前出现Equation Chapter (Next) Section 1字样解决方法 问题描述：因为在某一章节，使用mathtype插入下一章，使得公式编号从该章重新开始，但在引用----目录-----自动更新目录的时候，目录中会被插入Equation Chapter (Next) Section 1字样 解决方法:参考的这个答案，确实解决了。ctrl+shift+8，...
html显示word文档内容,JS实现获取word文档内容并输出显示到html页面示例
weixin_35773740的博客
06-03 1842
Titlevar w = new ActiveXObject('Word.Application');var docText;var obj;if(w != null) {w.Visible = true;obj = w.Documents.Open("D:\\word\\go.doc");docText = obj.Content;w.Selection.TypeText("Hello");w....
Excel 导出
ypalj的专栏
06-26 476
     最近在做Excel导出的时用户突然提出需要对文件设置页眉和页脚,这个问题很是让人头痛.在网上查找资料的时候发现都做得很是复杂,最后自己对文件进行代码分析通过设置前后的不同发现可以用样式表进行处理,真个汗呀!下面代码贴出来分享一下. ///         /// 传入的DataTable        ///         ///         ///         publi
纯js实现html指定页面导出word
积善之家
09-19 1433
因为最近做了范文网站需要，所以要下载为word文档，如果php进行处理，很吃后台服务器，所以想用前端进行实现。查询github发现，确实有这方面的插件。学校班主任安全工作计划模板_醉学网 (nongpin88.com)这样就搞定了，看看效果吧！
【jquery.wordexport.js】前端将表格数据导出为Word文档
sunxinyi9978的博客
07-18 2020
记录一下使用过程。
js 标签距离文档边距_如何控制Google文档中的边距
culiyuan8310的博客
09-22 771
js 标签距离文档边距Margins in a document are the white space that surrounds the text in your file. They appear at the top, bottom, left, and right sides. While the default margins are fine most of the time, s...
使用freemarker导出html格式的word（续）
生如夏花之灿烂
12-28 5916
本文接上文（https://blog.csdn.net/u011099093/article/details/81010298）继续探讨导出word中携带图片问题。 在参考了博文http://www.cnblogs.com/liaofeifight/p/5484891.html后，改用.mht格式的模板进行编辑，首先介绍下整体思路： 1.准备好一个word（.doc格式），在里面编辑好自己想要...
使用mathtype后，word自动生成目录中出现“Equation Chapter (Next) Section 1字样”
热门推荐
P0ny的博客
03-10 2万+
问题来源 相信很多学生在写论文的时候会用用到很多的公式，不可避免的就要写公式的编号，真的是相当麻烦，如果你是手写的话。 所以啊一般会在word 中使用mathtype的自动生成编号功能，具体怎么用呢： 首先你创建一个章节断点，比如说你的公式序号形(1,2)(章节序号，本章内第几个公式)一般都会采用这种格式。所以你必须让mathtype知道这是第几章。 比如说第二章的公式，你需要在第二章刚开始的地...
Java导出word文档设置表格字体
06-06
要在 Java 中导出 Word 文档并设置表格字体，可以使用 Apache POI 库来操作 Word 文档。以下是一个简单的示例代码，演示如何设置表格字体： ```java import java.io.*; import org.apache.poi.xwpf.usermodel.*; public class SetTableFont { public static void main(String[] args) throws Exception { // 创建 Word 文档对象 XWPFDocument doc = new XWPFDocument(); // 创建表格对象 XWPFTable table = doc.createTable(3, 3); // 设置表格字体 CTTblPr tblPr = table.getCTTbl().getTblPr(); CTTblStyle tblStyle = tblPr.addNewTblStyle(); tblStyle.setVal("TableGrid"); CTFonts fonts = tblPr.addNewTblStyle().addNewRPr().addNewRFonts(); fonts.setAscii("Times New Roman"); fonts.setEastAsia("宋体"); fonts.setHAnsi("黑体"); // 保存 Word 文档 FileOutputStream out = new FileOutputStream("output.docx"); doc.write(out); out.close(); doc.close(); } } ``` 在上面的示例代码中，我们使用 `getCTTbl()` 方法获取表格的 `CTTbl` 对象，然后使用 `getTblPr()` 方法获取表格属性对象 `CTTblPr`。通过 `addNewTblStyle()` 方法，我们可以为表格设置样式，并设置表格字体。 需要注意的是，Apache POI 的使用需要添加相应的依赖库。在 Maven 项目中，可以在 `pom.xml` 文件中添加以下依赖： ```xml <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>4.1.2</version> </dependency> ```
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风水月

从心底相信自己是成功的第一步

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值