React(四):DOCX文件在线预览

效果

在这里插入图片描述

注意

⚠️注意:部分文件预览存在问题

依赖

$ yarn add docx-preview
$ yarn add jszip

源码

import './index.scss';
import {useRef} from 'react';
import type {UploadRequestOption} from 'rc-upload/lib/interface';
import {Upload, Button, message} from 'antd';
import JSZip from 'jszip';
import * as docx from 'docx-preview';function PreviewDOCX() {const containerRef = useRef<HTMLDivElement>(null);const fileUpload = async (options: UploadRequestOption) => {if ((options.file as File).name.split('.').pop()!.toLowerCase() !== 'docx') return message.error('仅支持docx文件!');const zip = await JSZip.loadAsync(options.file as File);const blob = await zip.generateAsync({type: 'blob'});docx.renderAsync(blob, containerRef.current!).then(res => {console.log(res);}).catch(err => {console.log({err});});};return (<><Upload className="upload-btn" action="#" customRequest={fileUpload} showUploadList={false}><Button type="primary">点击上传</Button></Upload><div className="docx-preview-wrap" ref={containerRef}></div></>);
}export default PreviewDOCX;

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

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

相关文章

【时时三省】(C语言基础)一维数组

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ——csdn时时三省 数组 数组就是一组数 数组的官方定义是一组相同类型元素的集合 一堆数组的创建和初始化 求组的创建 数组是一组相同类型元素的集合。数组的创建当时是: type&#xff3f;t arr&#x…

【过题记录】8.4(robocom补题,网络流)

今天robocom国赛&#xff0c;因为一个bool函数忘记return 1而裂开(错失21分) 以此为戒 贪心消消乐 其实就是一个求最大子矩阵和的板子题 利用最大子段和的思想 枚举矩阵中的上下界 压成一维后利用最大子段和 O ( n ) O(n) O(n)处理 复杂度 O ( n 3 ∗ k ) O(n^3*k) O(n3∗k) k为…

nginx: [error] open() “/run/nginx.pid“ failed (2: No such file or directory)

今天 准备访问下Nginx服务&#xff0c;但是 启动时出现如下报错&#xff1a;&#xff08;80端口被占用&#xff0c;没有找到nginx.pid文件&#xff09; 解决思路&#xff1a; 1、 查看下排查下nginx服务 #确认下nginx状态 ps -ef|grep nginx systemctl status nginx#查看端口…

[CTF]-PWN:格式化字符串漏洞题综合解析

printf型格式化字符串漏洞&#xff1a; 任意地址写&#xff1a; 32位&#xff1a; 例题&#xff08;inndy_echo&#xff09;&#xff1a; 有格式化字符串漏洞&#xff0c;可以修改printf的got表内地址为system&#xff0c;传参getshell 解法一&#xff1a; 在32位中可以使…

vscode的json文件解析

vscode的json文件解析 0.参考链接1.什么是JSON2.JSON语法2.0数据类型2.1对象2.2数组2.3嵌套 3.vscode包含的JSON文件介绍4.vscode包含的JSON文件解析4.1 task.json4.2 launch.json4.3 settings.json4.4 c_cpp_properties.json4.5 package.json&#xff08;详细的看参考链接&…

Python设计模式 - 抽象工厂模式

定义 抽象工厂模式是一种创建型设计模式&#xff0c;它提供了一种创建一系列相关或相互依赖对象的接口&#xff0c;而无需指定它们具体的类。 产品等级结构与产品族 为了更好地理解抽象工厂模式&#xff0c;先引入两个概念&#xff1a; 产品等级结构&#xff1a;就是产品的…

试用AWS全新神器:Amazon Bedrock的「Open Artifacts」版Claude.ai Artifacts

Claude.ai的Artifacts真是太方便了。 GitHub上的AWS Samples仓库中有一个仿制Artifacts的应用程序。 Open Artifacts for Amazon Bedrock https://github.com/aws-samples/open_artifacts_for_bedrockhttps://github.com/aws-samples/open_artifacts_for_bedrock本文将介绍「…

【C++】数组案例 五只小猪称体重

题目&#xff1a;给出五只小猪体重&#xff0c;找出最大的体重的值并打印 思路&#xff1a;利用数组写入五只小猪的体重&#xff0c;让每一个元素都赋值给一个整型变量并每赋值一次就于下一个数组中的元素比&#xff0c;若是大就继续赋值给这个变量&#xff0c;若是小则不赋值…

H81002S 1.7mm网络变压器:BMS汽车蓝牙接收器中的超薄共模电感科技

华强盛导读&#xff1a;在当今这个日新月异的汽车科技领域&#xff0c;每一处细节都蕴含着创新与突破。作为电动汽车心脏的电池管理系统&#xff08;BMS&#xff09;&#xff0c;其高效稳定的运行不仅关乎续航与安全&#xff0c;更是智能化驾驶体验的基石。而在这背后&#xff…

win7安装mysql-installer-community-8.0.11.0

1、安装Microsoft Visual C 2019 Redistributable Package (x64) 官网下载地址&#xff1a;https://learn.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist?viewmsvc-160#latest-microsoft-visual-c-redistributable-version 通过百度网盘分享的文件&#xff1…

Ubuntu安装nvidia-docker并使用的正确方式

Ubuntu安装docker: ubuntu(24.04)以及WSL2安装docker的详细教程_unbantu安装docker-CSDN博客文章浏览阅读646次,点赞5次,收藏3次。默认情况下,只有root用户和docker组的用户才能运行Docker命令。我们可以将当前用户添加到docker组,以避免每次使用Docker时都需要使用sudo。…

DAP-Seq:解锁转录因子结合位点的新钥匙

引言&#xff1a; 在基因组学的浩瀚宇宙中&#xff0c;转录因子如同掌管基因表达的神秘钥匙。它们与DNA上的特定序列结合&#xff0c;调控着生命活动的每一个节拍。然而&#xff0c;传统的研究方法在探索这些结合位点时面临诸多挑战。今天&#xff0c;我们将一起了解一种创新技…

多路I/O复用之select、poll、epoll

一、多进程/多线程模型的不足 为每个请求分配一个进程或线程的方式会带来较大的资源开销。创建和切换进程/线程需要消耗系统资源&#xff0c;包括内存、CPU 时间等。例如&#xff0c;在一个大规模的服务器环境中&#xff0c;如果同时有数千个请求到来&#xff0c;为每个请求创建…

01 LVS负载均衡群集

集群 在互联网应用中&#xff0c;随着站点对硬件的性能、响应速度、服务稳定性、数据可靠性等要求越来越高&#xff0c;单台服务器越来越力不从心 集群的含义 Cluster&#xff0c;集群也叫群集由多台主机构成&#xff0c;但对外只表现为一个整体 集群分类 类型 负载均衡集…

C++初学(10)

10.1、共用体 共用体是一种数据格式&#xff0c;它能够存储不同的数据类型&#xff0c;但只能同时存储其中的一种类型。比如说&#xff1a;结构可以同时存储int、long、和double&#xff0c;而共用体只能存储int、long、或double。共用体的句式与结构相似&#xff0c;但含义不…

《Milvus Cloud向量数据库指南》——Zilliz Cloud 高可用性深度解析:赋能GenAI应用,引领非结构化数据新纪元

在人工智能与大数据技术日新月异的今天,非结构化数据的处理与分析已成为推动行业智能化转型的关键驱动力。Zilliz Cloud,作为基于开源向量数据库Milvus构建的全托管解决方案,不仅革新了非结构化数据的存储与查询方式,更以其卓越的高可用性设计,为开发人员构建高效、可靠的…

c++----内存管理

okk&#xff0c;大家好。我们大家学习了鄙人的前面前面几篇博客&#xff0c;并且还稍微使用了一些c的基础知识。并且我们前面都说过&#xff0c;我们前面学习的知识都说过。我们前面的几篇博客都是我们以后使用c基础。但是我们大家都知道现在代码都关注什么时间啊&#xff0c;内…

【linux深入剖析】初识线程---线程概念

&#x1f341;你好&#xff0c;我是 RO-BERRY &#x1f4d7; 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f384;感谢你的陪伴与支持 &#xff0c;故事既有了开头&#xff0c;就要画上一个完美的句号&#xff0c;让我们一起加油 目录 1. Linux线程概念什么是线…

k8s中yaml文件的编写

目录 1.编写pod.yaml 2.编写deploment.yaml 3.编写service.yaml关联创建的pod 4.总结获取K8S资源配置清单文件模板方法 方法1&#xff1a;根据现有资源导出yaml文件修改配置&#xff0c;重新创建 方法2&#xff1a;根据现有资源&#xff0c;进入其配置中&#xff0c;复制…

中国AI大模型场景探索及产业应用调研报告

AI大模型发展态势 定义 AI大模型是指在机器学习和深度学习领域中&#xff0c;采用大规模参数(至少在一亿个以上)的神经网络模型&#xff0c;AI大模型在训练过程中需要使用大量的算力和高质量的数据资源。 产业规模 2023年&#xff0c;中国大模型市场规模为147亿。结合《202…