JS将docx转为html代码--Vue3(简易版)

news/2025/1/9 9:51:57/文章来源:https://www.cnblogs.com/itcattle/p/18661124

这两天突然接了一个把节气文章转成html页面的需求,本来只是需要多按几下ctrl+c,ctrl+v能解决的事,但是想想后续一年24个节气,就做个自动转换的工具吧。由于做软件还涉及到其他语言和配置环境,所以还是选择了web。
首先创建一个vue3项目,我用的vite搭建的,不会的请自行移步到vite官网。
至于docx转html,自行操作的话复杂度高,所以选择了mammoth依赖库。
HTML代码:

点击查看代码
<input type="file" @change="onFileChange" accept=".doc,.docx" />
JS代码:
点击查看代码
function onFileChange(event) { // 选择文件const file = event.target.files[0];if (file) {readWordFile(file);}
}
const content = ref(''); // html内容,可在代码中使用v-html展示
function readWordFile(file) { // 读取文件const reader = new FileReader(); // 创建FileReaderreader.onload = async (e) => { // 加载文件const arrayBuffer : ArrayBuffer = e.target?.result as ArrayBuffer;try {const result = await mammoth.convertToHtml({ arrayBuffer }); // 将文件转为htmlconsole.log("Word file result:", result);content.value = result.value // 将结果赋值给content// navigator.clipboard.writeText(content.value);} catch (error) {console.error("Error reading Word file:", error);}};reader.readAsArrayBuffer(file); // 将file用ArrayBuffer格式读取}
本来到这就差不多结束了,但是,样式呢?通过显示的结果内容可以看出,mammoth会将段落写在p标签,将标题用h1,h2来包裹,加粗会用strong标签,但是是没有css样式的,这样我们的UI没法通过呀~。在查看内容时也发现图片是用base64渲染的,因为我需要复制此代码放在另外的html页面并渲染在移动端,当有多个图片或图片过大时,会导致编辑器卡顿等问题。于是需要对结果做一些处理,mammoth官方文档也有提供方法和思路,比如mammoth.images.imgElement(),transformElement等,详情可以看mammoth的[npm文档](https://www.npmjs.com/package/mammoth)。但是我还是想自己做处理,于是,魔鬼般的写正则开始了………… 首先,图片和图片介绍小字要改,不过我拿的文章图片和介绍格式比较统一,所以稍微好操作一些,不过图片名称和介绍肯定不一样,对于经常使用replace和replaceAll进行初级转换的我来说确实小小的难住了一下哈哈,在翻看了MDN后,决定采用replace的正则加function返回替换值的方式,至于怎么判定是哪个图片,就定义一个i来累加好了。思路有了,开始敲代码~
点击查看代码
function replaceImagesToTxt (html) { // 替换图片路径和图片介绍const regex = /<p\s*>\s*<img\s+[^>]+?\s*>\s*<\/p>\s*<p\s*>(.*?)\s*<\/p>/gi;const today = getToday();let i = 0;return html.replace(regex, function (match, capture) {console.log(match);i++;return `<img style="width: 100%; height: auto;" src="/html/articleImg/${today}/${i}.jpg" alt="图片${i}"><div style="width:100%;text-align:center;font-size:0.8rem;">${capture}</div>`;})
}
function  getToday () { // 获取今天日期yyyy/MM/ddreturn new Date().toISOString().split('T')[0].replace(/-/g, '-');
}
替换部分是很好写的,问题在于正则,为了避免匹配超过的情况,所以需要非贪婪模式,大概调试了十来遍之后才写对。 详细解释一下正则表达式的组成部分 1.:

标签后可能有任意数量的空白字符。 2.\s* (在

标签关闭的大于号>和标签后面必须跟着至少一个空白字符,通常用来分隔标签名和属性。 4.([^>]+?):( 和 ) 定义了一个捕获组,意味着这部分内容会被捕获并可以在替换中使用。[^>]+? 是一个非贪婪匹配,它会匹配除了大于号>以外的所有字符,直到遇到第一个>为止。这里的+?表示匹配一个或多个字符,但尽可能少地匹配(即非贪婪模式),以确保不会跨过实际的>标签结束符去匹配更多内容。 5.\s*>:\s* 再次匹配任意数量的空白字符。> 匹配>符号,它是标签的结束。 6.\s*<\/p>:\s* 匹配标签结束后的任意空白字符。<\/p> 匹配字符串

,注意斜杠被反斜杠转义了,因为斜杠是正则表达式中的特殊字符。 后面如出一辙,就懒得写了,各位自行观看吧。 至于替换其他段落的样式,和以上正则方法类似,就不赘述了,还是要好好学正则呀~。 如果有建议或者意见可以提出来呀,本人第一篇博客,还请多多包涵。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/866447.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大语言模型提示技巧(八)-防止胡说八道

自然语言往往充满歧义和模糊性,模型在学习时可能会产生误解或错误理解一些概念,导致生成不准确的信息。为了尽量减少这些问题,研究人员和工程师会使用更大规模、更多样化和更准确的训练数据,调整模型架构,以及使用更先进的训练技术。但是自然语言本身就是复杂且充满挑战的…

使用API方式远程调用ollama模型

在有GPU的环境启动一个ollama大模型,非常简单:注意,ollama启动时默认监听在127.0.0.1:11434上,可以通过配置OLLAMA_HOST环境变量修改 `export OLLAMA_HOST="0.0.0.0:11434" ollama serve& ollama run qwen2.5:7b-instruct`然后就可以在远端访问: `curl http…

JMeter——压力测试工具的安装

JMetere 简介 jmeter 是 apache 公司基于 java 开发的一款开源压力测试工具,体积小,功能全,使用方便,是一个比较轻量级的测试工具,使用起来非常简 单。 jmeter 是免安装的,拿到安装包之后直接解压就可以使用,同时它在 linux/windows/macos 上都可以使用。 前提 已安装和…

微软开源!Office 文档轻松转 Markdown!

MarkItDown —— 微软开源的 Python 工具,能够将多种常见的文件格式(如 PDF、PowerPoint、Word、Excel、图像、音频和 HTML 等)转换为 Markdown 格式。大家好,我是 Java陈序员。 今天,给大家介绍一款微软开源的文档转 Markdown 工具。关注微信公众号:【Java陈序员】,获取…

人工智能(AI)在医学领域的应用 -九五小庞

人工智能(AI)在医学领域的应用是当前科技发展的重要方向之一,它通过提高医疗效率、准确性和个性化治疗水平,极大地改善了医疗服务的质量和患者的体验。以下是一些AI在医学领域的主要应用:辅助诊断医学影像分析:AI可以通过深度学习算法快速准确地分析CT、MRI、X光等医学影…

Ftrans汽车制造供应链管理方案,如何实现协同共赢?

汽车制造供应链管理是指对从供应商到客户的汽车产品、信息及资金流动进行集成管理的过程,旨在最大化供应链价值。在汽车制造供应链管理中,信息流扮演着至关重要的角色。它不仅是供应链各环节之间沟通协作的桥梁,也是确保供应链高效运作、降低库存成本、提升客户满意度的重要…

升级后手机版网站无法访问,可能的原因及解决方案

!在进行服务器或应用程序升级后,如果发现手机版网站无法访问,这通常是由于升级过程中某些配置发生了变化,导致移动端设备无法正确解析或加载网页内容。为了帮助您更好地理解和解决这个问题,以下是几个可能的原因及相应的解决方案:检查域名解析设置升级后,域名解析设置可…

如何解决批量主机升级未成功的问题?

如果您尝试对多个主机进行批量升级,但部分主机未能成功升级,可能是由多种原因引起的。以下是详细的排查步骤和解决方案:检查财务记录:首先,确保所有主机的升级订单已经成功支付。您可以登录到云服务提供商的控制面板,查看财务记录,确认每个主机的升级订单状态。如果存在…

游戏网站模板修改软件推荐

游戏网站通常需要独特的设计和功能来吸引玩家。有哪些推荐的模板修改软件可以帮助用户高效地修改游戏网站模板? 解决方案:选择合适的CMS平台:根据游戏网站的需求选择合适的CMS平台。常用的平台包括WordPress、DedeCMS等。这些平台提供了丰富的模板资源,方便用户快速搭建网站…

在宝塔面板上如何高效管理和修改网站配置以保障稳定运行

宝塔面板因其简洁直观的操作界面深受广大开发者喜爱,但对于初次接触的人来说,仍然可能存在一些困惑,特别是在涉及网站配置修改时。掌握正确的操作流程不仅可以提高工作效率,还能确保网站的安全性和稳定性。 解决方案安装必要组件:根据所使用的编程语言和技术栈,在宝塔面板…

如何修改网站权限

网站权限管理是确保网站安全的重要环节。如何在网站后台管理系统中修改用户权限? 解决方案:登录后台管理系统:首先,以管理员身份登录网站的后台管理系统。大多数CMS系统(如WordPress、DedeCMS等)都提供了直观的界面来管理网站内容。 找到用户管理功能:在后台管理系统中,…

使用PowerShell脚本获取并发连接数

PowerShell是微软提供的任务自动化框架,它提供了更高级的功能和更好的灵活性。利用PowerShell,我们可以轻松地获取并分析服务器的并发连接数。打开PowerShell:按下 Win + X 键,选择“Windows PowerShell (管理员)”选项启动具有管理员权限的PowerShell窗口。运行PowerShell…