Word文件转HTML
Word 转 HTML
第一步:使用word文档打开文件,将文档另存为 "筛选过的网页(*.htm,*.html)"格式 到 “a文件夹” 下
此时的 “a文件夹” 下会多出一个文件和文件夹:
- 文件:包含html内容、js脚本、css样式,点击可通过浏览器直接预览
- 文件夹:包含word文档中的图片
第二步:将 html 或者 htm 文件使用编辑器打开(以vscode为例)
如果出现乱码,点击 右下角 UTF-8 ,选择通过编码重新打开,点击后,选择 gb2312 即可
如果仍存在乱码使用其余编码格式尝试 或 谷歌搜索,word软件转换的html该以什么编码格式打开
第三步:通过浏览器打开 htm(或 html) 文件,此时点击目录即可跳转到相应锚点
第四步:此时开始调整样式,使用 <div class="left-nav></div>"
包裹整个目录
- 你可以通过vscode的搜索功能快速定位整个目录的元素,例如:我先搜索了 “一、业主端APP”
- 也许存在多个匹配项,可通过hml(或html) 打开的网页可快速确定出现的第几个是匹配目录的
- 给目录元素头部添加
<div class="left-nav">
,尾部添加</div>
- 搜索
</style>
快速定位到css
样式的编写位置,在其后添加 如下代码:
body > div {position: relative;overflow: hidden;margin-left: 260px;
}
.left-nav {float: left;width: 260px;position: fixed;top: 0;left: 0;overflow-y: auto;height: 100%;background: #fafafa;border-right: 1px solid #eee;padding-bottom: 20px;
}
.left-nav a {color: #364149;display: inline-block;padding: 8px 0;text-decoration: none;
}
.left-nav a:visited,.left-nav span.MsoHyperlinkFollowed {color: #008cff;
}
.left-nav a:active,.left-nav span.MsoHyperlink {color: #008cff;
}
.left-nav p:last-child {margin-bottom: 20px;
}
p.MsoTocHeading {padding: 20px 0 !important;text-align:center;page-break-after:auto;color: #364149;font-weight: bold;
}
p.MsoToc1 {padding-left: 10px;
}
p.MsoToc1 span {font-weight: bold !important;
}
p.MsoToc2 {margin-left: 16px;
}
p.MsoToc3 {margin-left: 40px;
}
p.MsoToc3 span{font-size: 15px;
}
.zw2 {padding-top: 30px;
}
实际上就是向被包裹的目录元素设置固定定位,以及样式内容,同时对内容元素设置 左外边距(margin-left)
如果添加代码后保存时提示无法直接修改,直接选择另存为即可 ,此处我另存为了 rong.htm
(名字无限制)
要点记录:
详解第四步 如何搜索目录元素
- 可先全选htm代码,使用编辑器自带的 整理代码功能,让代码格式更便于阅读
- 为何我的文件转换后的文件没有目录
- 转换文件不会出现原本就不存在的东西,目录需要在word文档中存在目录
- 如果不存在,使用word的插入目录功能,点击引用 -> 目录,生成目录
- 注意生成的目录选第一种,不要第二种,否则将花费时间去掉htm文件中的 “…”
- 通过浏览器控制台配合编辑器可快速定位,一般都是在
WordSectionX
div
中,根据你目录生成位置 MsoTocX
即你的目录层级,一级目录就是 MsoToc1,以此类推- 找到最后一个
MsoTocX
,就是你需要使用<div class="left-nav"></div>
包裹的HTML元素
word 转为html后部分内容渲染与原先不相同
- 大部分是原因是使用了形状,这类元素可以在word文档上随意拖拽的元素使用时需要注意尽可能水平居中,原因是定位不准,可能导致渲染的元素被隐藏
- 使用word的表格功能可以很好的帮助定位元素的位置
Word文件转HTML相关推荐
- python批量pdf转word,python批量实现Word文件转换为PDF文件
本文为大家分享了python批量转换Word文件为PDF文件的具体方法,供大家参考,具体内容如下 1.目的 通过万能的Python把一个目录下的所有Word文件转换为PDF文件. 2.遍历目录 作者总 ...
- Python:读取两种Word文件简述及文件未能引发事件错误
Python 中可以读取 word 文件的库有 python-docx 和 pywin32. 优点缺点python-docx跨平台只能处理 .docx 格式,不能处理.doc格式pywin32仅限 w ...
- php如何word转html格式文件,PHP将上传word文件,转化为Html格式,(多种转换方式)
标签:主机 git not __name__ sts offic write otto ice 方法一: 通过PHPOffice(推荐) 1: composer req ...
- JSP生成word文件
1.jsp生成word文件,直接改动jsp格式: <%@ page contentType="application/vnd.ms-word;charset=GB2312"% ...
- C#实现对Word文件读写[转]
手头上的一个项目报表相对比较简单,所以报表打印采用VBA引擎,通过定制Word模版,然后根据模版需要填充数据,然后OK,打印即可. 实现方法:首先需要引用VBA组建,我用的是Office2003 Pr ...
- Beyond Compare比较Word文件的方法
2019独角兽企业重金招聘Python工程师标准>>> office软件是我们在日常工作中常常会用到的,在使用过程中如果遇到了比较两个Word文件的差异的问题,这个时候往往会非常的耗 ...
- java flexpaper_java web word文件 pdf文件在线预览源码(flexpaper)
[实例简介]java web word文件 pdf文件在线预览源码 经过测试 [实例截图] [核心代码] BrowsenOnline html, body{ height:100%; } body { ...
- java批量导出word_java 批量生成word 文件
最近在工作中遇到一个需求,我有一个拥有3000行数据的excel文件和一个word模板. 我需要将excel文件中的每一行数据填充到word模板文件中生成一个Word文件. 考虑到数据量较大且需求有可 ...
- python入门教程2word-入门干货:Python操作Word文件经验分享
原标题:入门干货:Python操作Word文件经验分享 导读:Microsoft Word在当前使用中是占有巨大优势的文字处理器,这使得Word专用的档案格式Word 文件(.docx)成为事实上最通 ...
- python 操作word文件案例
基础知识 安装python-docx pip install python-docx 打开文档 doc = Document('test.docx') 添加段落 paragraph = doc.add ...
最新文章
- swift_009(Swift 类型别名/安全/推断)
- 机器视觉_Java机器学习,第2部分
- oracle数据库优化,访问oracle视图数据很慢
- 用php 用拼出一个菱形_这可是我没来过的杭州呀!远在开封的他,用一种特殊的方式,拼出一个彩色杭州...
- JVM性能优化之堆区域OOM问题
- 每日一题(易错):哪些REPEAT_INTERVAL参数能够实现每30分钟运行job
- linux acl源码,acl框架库下载
- Docker修炼第一招: 先从Dockerfile开始
- saltstack学习-1:saltstack介绍、部署、常见问题处理
- 计算机室nb代码,NB-iot SDK源码(Linux版)
- 360主机卫士Linux版,360主机卫士
- 标签打印软件如何制作菱形标签
- 分分钟免费搭建一个简单而美博客
- Hutool学习 —— 设置文件-Setting
- 互联网“诸神”的排位赛,2016年会是转折点?
- 在微信小程序中如何下载APP?
- python反距离权重法_先从IDW(反距离权重)插值开始吧
- 如何配置谷歌浏览器_如何科学地使用Chrome?下载谷歌浏览器?
- 2023第十四届蓝桥杯 C/C++大学生A组省赛 满分题解
- 开发证书与发布证书申请和安装步骤