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

React实现在线预览word报告/本地选择报告预览

news 2026/2/7 23:14:43

标题使用的核心技术点是docx-preview，读取到文件的File对象，用File去做文件展示，这里是才用将文件转base64字符串存储到localStorage中

在线预览word报告且包含word样式

  1. 下载需要使用的min.js文件进项目的public目录中（上zip已包含以下pulib内的js/css文件）
    在这里插入图片描述
    2.在public文件目录下新建html，命名为docpreview.html
    3.在html中引入public下的资源
<linkhref="./docx-preview/bootstrap.min.css"rel="stylesheet"integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"crossorigin="anonymous"/><scriptsrc="./docx-preview/bootstrap.bundle.min.js"integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"crossorigin="anonymous"></script><script src="./docx-preview/jszip.min.js"></script><script src="./docx-preview/docx-preview.min.js"></script><script src="./docx-preview/thumbnail.example.js"></script><link href="./docx-preview/thumbnail.example.css" rel="stylesheet" /><script crossorigin src="./docx-preview/tiff.js"></script><script src="./docx-preview/tiff-preprocessor.js"></script>

4.创建dom去展示对应的docx文件

<body class="vh-100 d-flex flex-column"><div class="flex-grow-1 d-flex flex-row" style="height: 0"><divid="document-container"class="overflow-auto flex-grow-1 h-100"></div></div></body>

5.创建一个基于Web的文档查看器，用于查看和预览Microsoft Word文档。

1.获取当前文档（currentDocument）：通过document.querySelector(‘#document-container’)获取一个用于显示文档内容的HTML元素。

2.设置docx选项：使用Object.assign()方法将docx.defaultOptions与一个包含debug和experimental属性值的对象进行合并。

3.获取加载按钮（loadButton）：通过document.querySelector(‘#loadButton’)获取一个用于加载文档的按钮。

4.定义renderDocx函数：一个异步函数，用于渲染Word文档。它接受一个文件参数（file），将其转换为Blob对象，然后使用docx.renderAsync()方法将其渲染到指定的容器中。同时，它还调用renderThumbnails()函数来生成文档的缩略图。

5.处理加载文档按钮的点击事件：当用户点击加载按钮时，调用renderDocx()函数并传入当前文档

<script>let currentDocument = nullconst docxOptions = Object.assign(docx.defaultOptions, {debug: true,experimental: true})const container = document.querySelector('#document-container')const loadButton = document.querySelector('#loadButton')async function renderDocx(file) {currentDocument = fileif (!currentDocument) returnlet docxBlob = preprocessTiff(currentDocument)let res = await docx.renderAsync(docxBlob, container, null, docxOptions)renderThumbnails(container,document.querySelector('#thumbnails-container'))}</script>

6.读取本地存储的文件base64并展示

<script>// base64Data是从后端接收到的Base64字符串const base64String = localStorage.getItem('base64String')// 将Base64字符串转换为Blob对象const byteCharacters = atob(base64String)const byteNumbers = new Array(byteCharacters.length)for (let i = 0; i < byteCharacters.length; i++) {byteNumbers[i] = byteCharacters.charCodeAt(i)}const byteArray = new Uint8Array(byteNumbers)const blob = new Blob([byteArray], { type: 'application/octet-stream' })// 将 Blob 对象转换为 File 对象const file = new File([blob], 'example.docx', {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'})//调用方法renderDocx(file)</script>

7.触发预览按钮的事件

  //预览报告function previewReportRequest() {setsubmitLoading(true)asyncActionCreators.previewReport({ id: ID }).then((response) => {setsubmitLoading(false)if (response?.data?.code === 0) {localStorage.setItem('base64String', response?.data?.data)//存好之后，跳转到预览页面const htmlFilePath = `${window.location.origin}/docpreview.html`openHtmlFileInNewTab(htmlFilePath)} else {message.warning(response.data.msg || '获取报告失败')}})}const openHtmlFileInNewTab = (url) => {const anchor = document.createElement('a')anchor.href = urlanchor.target = '_blank'anchor.rel = 'noopener noreferrer'anchor.click()}

本地选择文件后预览需做以下改动

1.设一个input选取文件

<input type="file" accept=".docx" onChange={handleLocalFilePreview} />

2.添加文件选择方法

const handleLocalFilePreview = (event) => {const file = event.target.files[0]const reader = new FileReader()// 将 Blob 数据编码为 Base64 字符串reader.onload = (event) => {const base64String = event.target.resultlocalStorage.setItem('base64String', base64String)}reader.readAsDataURL(file)}

3.预览按钮的事件 openHtmlFileInNewTab同在线预览

  const docxPreview = () => {const htmlFilePath = `${window.location.origin}/docpreview.html`openHtmlFileInNewTab(htmlFilePath)}

4.html文件需要改变方法

<script>//==========之前的===========//获取存储的blob的base64字符串const base64String = localStorage.getItem('base64String')// 将 Base64 字符串解码为 Blob 对象const byteCharacters = atob(base64String?.split(',')?.[1])const byteNumbers = new Array(byteCharacters.length)for (let i = 0; i < byteCharacters.length; i++) {byteNumbers[i] = byteCharacters.charCodeAt(i)}const byteArray = new Uint8Array(byteNumbers)const blob = new Blob([byteArray])const file = new File([blob], 'example.docx', {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'})// 将 Blob 对象转换为 File 对象const file = new File([blob], 'example.docx', {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'})//调用方法renderDocx(file)</script>

相关文章：

React实现在线预览word报告/本地选择报告预览

标题使用的核心技术点是docx-preview&#xff0c;读取到文件的File对象&#xff0c;用File去做文件展示&#xff0c;这里是才用将文件转base64字符串存储到localStorage中 在线预览word报告且包含word样式 下载需要使用的min.js文件进项目的public目录中&#xff08;上zip已包…...

编程日记 2024/6/11 20:13:00

计算机哈佛架构、冯·诺依曼架构对比

哈佛架构和冯诺依曼架构是两种不同的计算机系统架构&#xff0c;它们在存储器组织方式上有着显著的区别。下面是它们的原理、优缺点的对比以及一些常见的 MCU 采用的架构&#xff1a; 哈佛架构&#xff1a; 原理&#xff1a;哈佛架构将指令存储器&#xff08;程序存储器&#x…...

编程日记 2024/6/11 20:09:58

单片机串口发送为空中断和发送完成中断有什么区别？

单片机串口发送的空中断和发送完成中断在触发条件和功能上存在明显的区别。以下是关于这两种中断的详细解释&#xff1a; 【发送为空】中断&#xff08;Transmit Data Register Empty Interrupt&#xff09;&#xff1a; 触发条件&#xff1a;当发送数据寄存器&#xff08;TDR…...

编程日记 2024/6/11 20:08:57

css特效:对多个tag标签实现模拟地球仪特效

要实现对多个<a>标签&#xff08;比如链接&#xff09;的模拟地球仪特效和鼠标跟随特效&#xff0c;你可以使用CSS和一点点JavaScript来完成。下面是一个基本的示例代码&#xff1a;HTML代码&#xff1a; <!DOCTYPE html> <html lang"en"> <h…...

编程日记 2024/6/11 20:07:56

【2024Python教程】Python文件打包成exe，如果有图片怎么打包？有手就会的超简单教程

目录 pyinstaller模块打包exe&#xff08;无图片或其他文件打包版&#xff09; 第一步 安装pyinstaller模块&#xff1a; 第二步 找到需要打包的主程序文件夹 第三步 打包exe文件 第四步 确认exe文件是否可以打开 pyinstaller模块打包exe&#xff08;有图片打包版--方法一…...

编程日记 2024/6/11 20:06:54

mac环境基于llama3和metaGPT自动开发2048游戏

1.准备虚拟环境 conda create -n metagpt python3.9 && conda activate metagpt 2.安装metagpt pip install --upgrade metagpt 3.初始化配置文件 metagpt --init-config 4. 安装llama3 5. 修改配置文件 6.让metegpt自动开发2048游戏 7.经过多轮迭代&#xff0c;最终…...

编程日记 2024/6/11 20:04:53

这些Linux知识可不是靠背就会的！

在信息技术日新月异的今天&#xff0c;Linux以其开源、稳定、高效的特性&#xff0c;逐渐成为了众多专业人士的首选操作系统。然而&#xff0c;关于Linux知识的学习&#xff0c;却常常陷入一个误区——许多人认为&#xff0c;掌握Linux就是死记硬背各种命令和参数。这种观念&am…...

编程日记 2024/6/11 20:03:52

openlayers 绘图功能，绘制多边形，draw组件的使用，一个简单的需求引发的思考（一）

1 需求 使用openlayers绘图功能绘制多边形 2 分析 主要是openlayers中draw功能的使用&#xff0c;感觉比较简单&#xff0c;祖传CV大法搞起来 3 实现 为了方便&#xff0c;就不加载底图了&#xff0c;直接使用绘制功能 2.1 简单实现 <template><div id"ma…...

编程日记 2024/6/11 19:58:46

【Flutter】 TextField限制长度时， 第三方手写输入法、ios原始拼音输入法输入被吞问题

问题描述 TextField限制长度时&#xff0c; 当你的输入字符长度已经到了最大值-1时&#xff0c;使用第三方手写输入法或者ios原生拼音输入法输入liang&#xff08;什么拼音都行&#xff0c;这里只是举例&#xff09;&#xff0c;输到i那么li都会消失。 原因分析 这是因为第三…...

编程日记 2024/6/11 19:55:44

快递一键查询，只需快递单号，轻松掌握全程物流信息，让您的包裹追踪无忧！

在快节奏的现代生活中&#xff0c;快递已经成为我们生活中不可或缺的一部分。无论是网购的宝贝、亲朋好友寄来的礼物&#xff0c;还是工作中的紧急文件&#xff0c;快递都承载着我们的期待和需要。然而&#xff0c;面对众多的快递公司和复杂的查询流程&#xff0c;如何快速、准…...

编程日记 2024/6/11 19:50:39

【Java探索之旅】继承结构 继承和组合 protected final

文章目录 &#x1f4d1;前言一、继承1.1 继承关系的代码块1.2 protected关键字1.3 继承方式1.4 final关键字1.5 继承与组合 &#x1f324;️全篇总结 &#x1f4d1;前言 在面向对象编程中&#xff0c;继承是一种重要的概念&#xff0c;它允许我们创建一个新类&#xff0c;从现有…...

编程日记 2024/6/11 19:48:37

Ubuntu20.04-SLAM软件安装

目录 安装环境安装问题1.Ubuntu20.04在T440p上的安装问题1.1 安装后提示"x86/cpu:VMX(outside TXT) disabled by BIOS"1.2 ACPI Error:Needed type[Reference],found [Integer] 等错误1.3 ima: Error Communicating to TPM chip1.4 locate命令的安装 2.中文输入法-go…...

编程日记 2024/6/11 19:46:34

OSI七层网络参考模型

一、物理层 我们要发送出去的数据在计算机里只不过是无数的0和1&#xff0c;0或1就叫做比特&#xff0c;物理层就是把这些比特用不同的媒介传输出去&#xff0c;可以用电、光或者其他形式的电磁波来表示和传输信号&#xff0c;数据从网络接口出去以后&#xff0c;会经过不同的网…...

编程日记 2024/6/11 19:45:33

RAG与知识库搭建

Tip: 如果你在进行深度学习、自动驾驶、模型推理、微调或AI绘画出图等任务&#xff0c;并且需要GPU资源&#xff0c;可以考虑使用UCloud云计算旗下的Compshare的GPU算力云平台。他们提供高性价比的4090 GPU&#xff0c;按时收费每卡2.6元&#xff0c;月卡只需要1.7元每小时&…...

编程日记 2024/6/11 19:44:32

MySQL提权之UDF提权

1、前言 最近遇到udf提权&#xff0c;几经周折终于搞懂了。感觉挺有意思的&#xff0c;渗透思路一下子就被打开了。 2、什么是udf提权 udf 全称为user defined function&#xff0c;意思是用户自定义函数。用户可以对数据库所使用的函数进行一个扩展&#xff08;windows利用…...

编程日记 2024/6/11 19:43:31

【设计模式】结构型设计模式之 组合模式

介绍 这里的组合模式&#xff0c;与之前的设计模式中的"组合关系"完全是两码事&#xff0c;这里的组合模式主要用来处理结构为树形的数据。 组合模式&#xff08;Composite Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许你将对象组合成树状结构来表示…...

编程日记 2024/6/11 19:40:28

我给KTV服务生讲解防抖，他竟然听懂了

端午节三天假期&#xff0c;的最后一天&#xff0c;我和朋友闲来无事&#xff0c;想着去唱会儿歌吧&#xff0c;好久不唱了&#xff0c;于是吃了午饭&#xff0c;石景山就近找了一家KTV&#xff0c;我们团好了卷就过去了。 装修还算不错&#xff0c;很快找到服务生&#xff0c…...

编程日记 2024/6/11 19:39:26

抽象java入门1.3.1

前言&#xff1a; 本期内容是为了更好补充关于方法&#xff08;函数&#xff09;的定义 开始&#xff1a; 函数&#xff08;function&#xff09;表示每个输入值对应唯一输出值的一种对应关系。 核心在于&#xff1a;输入值和输出值这两个元素 真的吗&#xff1f; 错&…...

编程日记 2024/6/11 19:38:26

使用Rufus工具制作Ubuntu To Go——很详细

一、准备工作 准备工具&#xff1a; 1、下载Rufus(主角)软件 2、准备一个U盘&#xff08;制作启动盘&#xff0c;32G足够&#xff09; 3、准备一个U盘或硬盘&#xff08;小白128G足够&#xff0c;装Ubuntu系统&#xff09; 4、下载Ubuntu系统镜像文件 1、下载软件Rufus 先来看…...

编程日记 2024/6/11 19:35:13

Android Jetpack Compose 实现一个电视剧选集界面

文章目录 需求概述效果展示实现思路代码实现总结 需求概述 我们经常能看到爱奇艺或者腾讯视频这类的视频APP在看电视剧的时候都会有一个选集的功能。如下图所示 这个功能其实很简单&#xff0c;就是绘制一些方块&#xff0c;在上面绘制上数字&#xff0c;还有标签啥的。当用户…...

编程日记 2024/6/11 19:34:10

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/10/6 14:17:21

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2026/1/12 10:41:22

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2026/1/24 13:04:10

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/10/31 17:25:40

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2026/1/31 17:09:43

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2026/2/4 15:29:40

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/9/24 23:08:17

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

编程新知 2025/10/6 2:06:51

Kubernetes 网络模型深度解析：Pod IP 与 Service 的负载均衡机制，Service到底是什么？

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

编程新知 2025/11/4 22:48:45

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

编程新知 2025/11/13 2:37:01