当前位置: 首页 > news >正文

【JavaScript】关于使用JS对word文档实现预览的一些思考

文章目录

    • mammoth
    • docx4js

mammoth

官网地址:https://github.com/mwilliamson/mammoth.js#readme

安装mammoth:

npm i mammoth -S

我们可以安装mammoth来实现上传的word文件的在线预览,我们以element的上传组件为示例:

<template><div><el-upload class="upload-demo" drag action="#" :auto-upload="false" :on-change="changeFile"><el-icon class="el-icon--upload"><upload-filled /></el-icon><div class="el-upload__text">Drop file here or <em>click to upload</em></div><template #tip><div class="el-upload__tip">jpg/png files with a size less than 500kb</div></template></el-upload><div v-html="wordcontent"></div></div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { UploadProps } from 'element-plus'
import mammoth from 'mammoth'const wordcontent = ref('')const changeFile: UploadProps['onChange'] = (uploadFile, uploadFiles) => {const file = uploadFile.rawconst myReader = new FileReader()myReader.readAsArrayBuffer(file as Blob)myReader.addEventListener('loadend', function (e) {const buffer = e?.target?.result // arraybuffer objectmammoth.convertToHtml({arrayBuffer: buffer}).then(function (result: { value: string; messages: any[] }) {const html = result.value // The generated HTMLconst messages = result.messages // Any mesarnings during conversionwordcontent.value = html}).done()})
}
</script>

详细的API参考官网地址。

docx4js

官网地址:https://github.com/lalalic/docx4js

使用docx4js实现获取docx文件有多少页码。

安装docx4js:

npm i docx4js -S

我们新建一个docx.mjs,代码如下:

import docx4js from 'docx4js'
import { TextDecoder } from 'util'docx4js.docx.load('./test2.docx').then((doc) => {const propsAppRaw = doc.parts['docProps/app.xml']._data.getContent()const propsApp = new TextDecoder('utf-8').decode(propsAppRaw)console.log(propsApp)const match = propsApp.match(/<Pages>(\d+)<\/Pages>/)if (match && match[1]) {const count = Number(match[1])console.log(count)}
})

执行命令: node docx.mjs

可以在控制台看到打印结果,第一个打印:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Properties xmlns="http://schemas.openxmlformats.org/officeDocument/2006/extended-properties" xmlns:vt="http://schemas.openxmlformats.org/officeDocument/2006/docPropsVTypes"><Template>Normal.dotm</Template><Pages>4</Pages><Words>996</Words><Characters>1013</Characters><Lines>0</Lines><Paragraphs>0</Paragraphs><TotalTime>0</TotalTime><ScaleCrop>false</ScaleCrop><LinksUpToDate>false</LinksUpToDate><CharactersWithSpaces>1250</CharactersWithSpaces><Application>WPS Office_12.1.0.18543_F1E327BC-269C-435d-A152-05C5408002CA</Application><DocSecurity>0</DocSecurity></Properties>

第二个打印:

4

其中的4表示这个word文档是4页。

但是有时候,有的word文档解析的结果是不一样的,如下:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<ap:Properties xmlns:vt="http://schemas.openxmlformats.org/officeDocument/2006/docPropsVTypes" xmlns:ap="http://schemas.openxmlformats.org/officeDocument/2006/extended-properties"/>

该文件中就没有包含Pages的字段。

所以综上所示,如果通过docx4js获取word文件的页码数量是不准确的,并且需要在node环境中运行,且文件是docx格式的,doc格式的不支持。

相关文章:

【JavaScript】关于使用JS对word文档实现预览的一些思考

文章目录 mammothdocx4js mammoth 官网地址&#xff1a;https://github.com/mwilliamson/mammoth.js#readme 安装mammoth&#xff1a; npm i mammoth -S我们可以安装mammoth来实现上传的word文件的在线预览&#xff0c;我们以element的上传组件为示例&#xff1a; <temp…...

安宝特方案 | AR技术在轨交行业的应用优势

随着轨道交通行业不断向智能化和数字化转型&#xff0c;传统巡检方式的局限性日益凸显。而安宝特AR眼镜以其独特的佩戴方式和轻便设计&#xff0c;为轨道交通巡检领域注入了创新活力&#xff0c;提供了全新的解决方案。 01 多样化佩戴方法&#xff0c;完美适应户外环境 安宝特…...

K8S配置MySQL主从自动水平扩展

前提环境 操作系统Ubuntu 22.04 K8S 1.28.2集群&#xff08;1个master2个node&#xff09; MySQL 5.7.44部署在K8S的主从集群 metrics-server v0.6.4 概念简介 在K8s中扩缩容分为两种 ●Node层面&#xff1a;对K8s物理节点扩容和缩容&#xff0c;根据业务规模实现物理节点自动扩…...

Excel:将一列拆分成多列

实现的效果是&#xff1a; 操作步骤如下&#xff1a; 1.选中列 → 点击菜单栏中的"数据" → 分列 2.选择"分列符号"&#xff0c;点击下一步 3.我想要按照空格分列&#xff0c;就选择空格 4.点击完成&#xff0c;就可以实现分列的效果了...

一款强大灵活的流程图引擎,支持React 和 Svelte 框架

大家好&#xff0c;今天给大家分享一个专注于处理流程可视化和交互的项目xyflow。它旨在为开发者和用户提供一种直观、高效的方式来表示、管理和操作各种流程。 项目介绍 xyflow是一款强大灵活的流程图引擎。该项目是用于构建基于节点的编辑器和交互式图表&#xff0c;支持 Re…...

基于STM32 ARM+FPGA+AD的电能质量分析仪方案设计(一)硬件设计

电能质量分析系统硬件设计 3.1 电能质量分析系统设计要求 本系统实现对电能质量的高精度测量&#xff0c;根据国家相关电能质量分析仪器规定 标准以及对市场电能质量分析仪的分析&#xff0c;指定以下设计目标。 &#xff08; 1 &#xff09;电能质量参数测量精度&#xf…...

LLM - 配置 ModelScope SWIFT 测试 Qwen2-VL 视频微调(LoRA) 教程(3)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/142882496 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 SWIFT …...

jmeter实现SSL双向验证

前提: 预先了解:SSL单向/双向认证详解握手请求以及tomcat配置https请求的请到以下网址了解Java nginx https 双向认证 der,cer文件一般是二进制格式的,只放证书,不含私钥 crt 文件可能是二进制的,也可能是文本格式的,应该以文本格式居多,功能同der/cer pem文件一般是…...

数据结构 ——— 单链表oj题:相交链表(链表的共节点)

目录 题目要求 手搓两个相交简易链表 代码实现 题目要求 两个单链表的头节点 headA 和 headB &#xff0c;请找出并返回两个单链表相交的起始节点&#xff0c;如果两个链表不存在相交节点&#xff0c;则返回 NULL 手搓两个相交简易链表 代码演示&#xff1a; struct Lis…...

【WKWebview】WKWebView Cookie 同步

个人实测&#xff1a;js注入的方式更靠谱一点 ⌈iOS⌋WKWebView Cookie 同步的一种方式 屈服于 Apple 的“淫威”&#xff0c;开发者不得不将 App 的网页容器从 UIWebView 迁移到 WKWebView。我们在享受后者带来的性能和功能提升的同时&#xff0c;也被诸如 Cookie 同步、截图…...

vue-router拦截器

在 Vue 项目中&#xff0c;vue-router 的路由拦截器和组件内部的路由拦截器&#xff08;如 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave&#xff09;虽然都能拦截路由&#xff0c;但它们的作用范围和使用场景有所不同。下面是二者的区别总结&#xff1a; 1. 全局路…...

SpringBoot驱动的人事管理系统:高效办公新选择

1系统概述 1.1 研究背景 如今互联网高速发展&#xff0c;网络遍布全球&#xff0c;通过互联网发布的消息能快而方便的传播到世界每个角落&#xff0c;并且互联网上能传播的信息也很广&#xff0c;比如文字、图片、声音、视频等。从而&#xff0c;这种种好处使得互联网成了信息传…...

大数据干了什么?

1.大数据技术主要解决的问题是海量数据的 存储 和 查询...

android studio可用下载地址

AndroidDevTools - Android开发工具 Android SDK下载 Android Studio下载 Gradle下载 SDK Tools下载 在此记录一下...

HTTP 协议详解

HTTP 协议是 Web 的基石&#xff0c;它定义了客户端和服务器之间的通信规则。本文将深入地探讨 HTTP 的核心概念&#xff0c;包括工作原理、请求方法、状态码以及不同 HTTP 版本的演进。 一、HTTP 的工作原理 HTTP 协议基于客户端-服务器模型&#xff0c;遵循请求-响应的循环&…...

【力扣 | SQL题 | 每日四题】力扣534, 574, 2314, 2298

今天的每日四题比较简单&#xff0c;主要其中两题可以用窗口函数轻松解决。 1. 力扣534&#xff1a;游戏玩法分析3 1.1 题目&#xff1a; 表&#xff1a;Activity ----------------------- | Column Name | Type | ----------------------- | player_id | int | …...

Gitxray:一款基于GitHub REST API的网络安全工具

关于Gitxray Gitxray是一款基于GitHub REST API的网络安全工具&#xff0c;支持利用公共 GitHub REST API 进行OSINT、信息安全取证和安全检测等任务。 Gitxray&#xff08;Git X-Ray 的缩写&#xff09;是一款多功能安全工具&#xff0c;专为 GitHub 存储库而设计。它可以用于…...

Chrome(谷歌)浏览器 数据JSON格式美化 2024显示插件安装和使用

文章目录 目录 文章目录 安装流程 小结 概要安装流程技术细节小结 概要 没有美化的格式浏览器展示 美化之后效果图 安装流程 下载地址 https://github.com/gildas-lormeau/JSONVue 点击下载 下载成功&#xff0c;如图所示 解压文件 添加成功&#xff0c;如图所示 通过浏览器…...

关于相机的一些零碎知识点

热成像&#xff0c;英文为Thermal Imaging&#xff0c;例如型号500T&#xff0c;其实指的就是热成像500分辨率。 相机的CMOS&#xff0c;英文为Complementary Metal Oxide Semiconductor&#xff0c;是数码相机的核心成像部件&#xff0c;是一种互补金属氧化物导体器件。 DPI…...

看不懂来打我!让性能提升56%的Vue3.5响应式重构

前言 在Vue3.5版本中最大的改动就是响应式重构&#xff0c;重构后性能竟然炸裂的提升了56%。之所以重构后的响应式性能提升幅度有这么大&#xff0c;主要还是归功于&#xff1a;双向链表和版本计数。这篇文章我们来讲讲使用双向链表后&#xff0c;Vue内部是如何实现依赖收集和…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文通过代码驱动的方式&#xff0c;系统讲解PyTorch核心概念和实战技巧&#xff0c;涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...

一些实用的chrome扩展0x01

简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序&#xff0c;无论是测试应用程序、搜寻漏洞还是收集情报&#xff0c;它们都能提升工作流程。 FoxyProxy 代理管理工具&#xff0c;此扩展简化了使用代理&#xff08;如 Burp…...

leetcode73-矩阵置零

leetcode 73 思路 记录 0 元素的位置&#xff1a;遍历整个矩阵&#xff0c;找出所有值为 0 的元素&#xff0c;并将它们的坐标记录在数组zeroPosition中置零操作&#xff1a;遍历记录的所有 0 元素位置&#xff0c;将每个位置对应的行和列的所有元素置为 0 具体步骤 初始化…...

【深尚想】TPS54618CQRTERQ1汽车级同步降压转换器电源芯片全面解析

1. 元器件定义与技术特点 TPS54618CQRTERQ1 是德州仪器&#xff08;TI&#xff09;推出的一款 汽车级同步降压转换器&#xff08;DC-DC开关稳压器&#xff09;&#xff0c;属于高性能电源管理芯片。核心特性包括&#xff1a; 输入电压范围&#xff1a;2.95V–6V&#xff0c;输…...