【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 官网地址:https://github.com/mwilliamson/mammoth.js#readme 安装mammoth: npm i mammoth -S我们可以安装mammoth来实现上传的word文件的在线预览,我们以element的上传组件为示例: <temp…...
安宝特方案 | AR技术在轨交行业的应用优势
随着轨道交通行业不断向智能化和数字化转型,传统巡检方式的局限性日益凸显。而安宝特AR眼镜以其独特的佩戴方式和轻便设计,为轨道交通巡检领域注入了创新活力,提供了全新的解决方案。 01 多样化佩戴方法,完美适应户外环境 安宝特…...
K8S配置MySQL主从自动水平扩展
前提环境 操作系统Ubuntu 22.04 K8S 1.28.2集群(1个master2个node) MySQL 5.7.44部署在K8S的主从集群 metrics-server v0.6.4 概念简介 在K8s中扩缩容分为两种 ●Node层面:对K8s物理节点扩容和缩容,根据业务规模实现物理节点自动扩…...
Excel:将一列拆分成多列
实现的效果是: 操作步骤如下: 1.选中列 → 点击菜单栏中的"数据" → 分列 2.选择"分列符号",点击下一步 3.我想要按照空格分列,就选择空格 4.点击完成,就可以实现分列的效果了...
一款强大灵活的流程图引擎,支持React 和 Svelte 框架
大家好,今天给大家分享一个专注于处理流程可视化和交互的项目xyflow。它旨在为开发者和用户提供一种直观、高效的方式来表示、管理和操作各种流程。 项目介绍 xyflow是一款强大灵活的流程图引擎。该项目是用于构建基于节点的编辑器和交互式图表,支持 Re…...
基于STM32 ARM+FPGA+AD的电能质量分析仪方案设计(一)硬件设计
电能质量分析系统硬件设计 3.1 电能质量分析系统设计要求 本系统实现对电能质量的高精度测量,根据国家相关电能质量分析仪器规定 标准以及对市场电能质量分析仪的分析,指定以下设计目标。 ( 1 )电能质量参数测量精度…...
LLM - 配置 ModelScope SWIFT 测试 Qwen2-VL 视频微调(LoRA) 教程(3)
欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/142882496 免责声明:本文来源于个人知识与公开资料,仅用于学术交流,欢迎讨论,不支持转载。 SWIFT …...
jmeter实现SSL双向验证
前提: 预先了解:SSL单向/双向认证详解握手请求以及tomcat配置https请求的请到以下网址了解Java nginx https 双向认证 der,cer文件一般是二进制格式的,只放证书,不含私钥 crt 文件可能是二进制的,也可能是文本格式的,应该以文本格式居多,功能同der/cer pem文件一般是…...
数据结构 ——— 单链表oj题:相交链表(链表的共节点)
目录 题目要求 手搓两个相交简易链表 代码实现 题目要求 两个单链表的头节点 headA 和 headB ,请找出并返回两个单链表相交的起始节点,如果两个链表不存在相交节点,则返回 NULL 手搓两个相交简易链表 代码演示: struct Lis…...
【WKWebview】WKWebView Cookie 同步
个人实测:js注入的方式更靠谱一点 ⌈iOS⌋WKWebView Cookie 同步的一种方式 屈服于 Apple 的“淫威”,开发者不得不将 App 的网页容器从 UIWebView 迁移到 WKWebView。我们在享受后者带来的性能和功能提升的同时,也被诸如 Cookie 同步、截图…...
vue-router拦截器
在 Vue 项目中,vue-router 的路由拦截器和组件内部的路由拦截器(如 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)虽然都能拦截路由,但它们的作用范围和使用场景有所不同。下面是二者的区别总结: 1. 全局路…...
SpringBoot驱动的人事管理系统:高效办公新选择
1系统概述 1.1 研究背景 如今互联网高速发展,网络遍布全球,通过互联网发布的消息能快而方便的传播到世界每个角落,并且互联网上能传播的信息也很广,比如文字、图片、声音、视频等。从而,这种种好处使得互联网成了信息传…...
大数据干了什么?
1.大数据技术主要解决的问题是海量数据的 存储 和 查询...
android studio可用下载地址
AndroidDevTools - Android开发工具 Android SDK下载 Android Studio下载 Gradle下载 SDK Tools下载 在此记录一下...
HTTP 协议详解
HTTP 协议是 Web 的基石,它定义了客户端和服务器之间的通信规则。本文将深入地探讨 HTTP 的核心概念,包括工作原理、请求方法、状态码以及不同 HTTP 版本的演进。 一、HTTP 的工作原理 HTTP 协议基于客户端-服务器模型,遵循请求-响应的循环&…...
【力扣 | SQL题 | 每日四题】力扣534, 574, 2314, 2298
今天的每日四题比较简单,主要其中两题可以用窗口函数轻松解决。 1. 力扣534:游戏玩法分析3 1.1 题目: 表:Activity ----------------------- | Column Name | Type | ----------------------- | player_id | int | …...
Gitxray:一款基于GitHub REST API的网络安全工具
关于Gitxray Gitxray是一款基于GitHub REST API的网络安全工具,支持利用公共 GitHub REST API 进行OSINT、信息安全取证和安全检测等任务。 Gitxray(Git X-Ray 的缩写)是一款多功能安全工具,专为 GitHub 存储库而设计。它可以用于…...
Chrome(谷歌)浏览器 数据JSON格式美化 2024显示插件安装和使用
文章目录 目录 文章目录 安装流程 小结 概要安装流程技术细节小结 概要 没有美化的格式浏览器展示 美化之后效果图 安装流程 下载地址 https://github.com/gildas-lormeau/JSONVue 点击下载 下载成功,如图所示 解压文件 添加成功,如图所示 通过浏览器…...
关于相机的一些零碎知识点
热成像,英文为Thermal Imaging,例如型号500T,其实指的就是热成像500分辨率。 相机的CMOS,英文为Complementary Metal Oxide Semiconductor,是数码相机的核心成像部件,是一种互补金属氧化物导体器件。 DPI…...
看不懂来打我!让性能提升56%的Vue3.5响应式重构
前言 在Vue3.5版本中最大的改动就是响应式重构,重构后性能竟然炸裂的提升了56%。之所以重构后的响应式性能提升幅度有这么大,主要还是归功于:双向链表和版本计数。这篇文章我们来讲讲使用双向链表后,Vue内部是如何实现依赖收集和…...
Xshell远程连接Kali(默认 | 私钥)Note版
前言:xshell远程连接,私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...
.Net框架,除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted()是OpenCV库中用于图像处理的函数,主要功能是将两个输入图像(尺寸和类型相同)按照指定的权重进行加权叠加(图像融合),并添加一个标量值&#x…...
AI编程--插件对比分析:CodeRider、GitHub Copilot及其他
AI编程插件对比分析:CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展,AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者,分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
Windows安装Miniconda
一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...
redis和redission的区别
Redis 和 Redisson 是两个密切相关但又本质不同的技术,它们扮演着完全不同的角色: Redis: 内存数据库/数据结构存储 本质: 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能: 提供丰…...
使用SSE解决获取状态不一致问题
使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件,这个上传文件是整体功能的一部分,文件在上传的过程中…...
【1】跨越技术栈鸿沟:字节跳动开源TRAE AI编程IDE的实战体验
2024年初,人工智能编程工具领域发生了一次静默的变革。当字节跳动宣布退出其TRAE项目(一款融合大型语言模型能力的云端AI编程IDE)时,技术社区曾短暂叹息。然而这一退场并非终点——通过开源社区的接力,TRAE在WayToAGI等…...
算法250609 高精度
加法 #include<stdio.h> #include<iostream> #include<string.h> #include<math.h> #include<algorithm> using namespace std; char input1[205]; char input2[205]; int main(){while(scanf("%s%s",input1,input2)!EOF){int a[205]…...
