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

标题使用的核心技术点是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>

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

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

相关文章

shell 终端打印格式化日志 log::info

代码 logging.sh #!/bin/bash NC\033[0m RED\033[31m GREEN\033[32m YELLOW\033[33m BLUE\033[34mlog::err() {printf "[$(date %Y-%m-%dT%H:%M:%S.%2N%z)][${RED}ERROR${NC}] %b\n" "$" }log::info() {printf "[${GREEN}$(date %Y-%m-%dT%H:%M:%S.%…

VB.net实战(VSTO):Excel插件的安装与卸载

1. 安装 1.1编程环境&#xff1a;Visual Studio 2022 1.2创建新项目&#xff1a; 1.3 加入一行测试程序&#xff1a;MsgBox&#xff08;“hello”&#xff09;&#xff0c;点击启动&#xff0c;确认可以弹窗 1.4 点击发布 1.5 找到安装程序&#xff0c;点击安装。打开Excel程…

有效的括号-力扣

栈适合用来解决匹配问题。 第一种情况&#xff1a;已经遍历完了字符串&#xff0c;但是栈不为空&#xff0c;说明有相应的左括号没有右括号来匹配&#xff0c;所以return false 第二种情况&#xff1a;遍历字符串匹配的过程中&#xff0c;发现栈里没有要匹配的字符。所以retur…

Keras深度学习框架实战(7):使用YOLOV8和KerasCV进行高效的图像物体识别

1、绪论 1.1 KerasCV简介 KerasCV是一个专注于计算机视觉任务的模块化组件库&#xff0c;基于Keras构建&#xff0c;可与TensorFlow、JAX或PyTorch等框架配合使用。 概念与定位&#xff1a; KerasCV是Keras API的水平扩展&#xff0c;提供了一系列新的第一方Keras对象&#x…

微信短视频怎么收藏?成都鼎茂宏升文化传媒公司

微信短视频怎么收藏&#xff1f;一文教你轻松掌握 随着微信功能的不断升级&#xff0c;微信短视频已经成为我们日常生活中不可或缺的一部分。无论是朋友分享的生活点滴&#xff0c;还是公众号推送的精彩内容&#xff0c;短视频都以其直观、生动的形式&#xff0c;吸引着我们的…

乡村振兴与脱贫攻坚相结合:巩固拓展脱贫攻坚成果,推动乡村全面振兴,建设更加美好的乡村生活

目录 一、引言 二、巩固拓展脱贫攻坚成果 1、精准施策&#xff0c;确保稳定脱贫 2、强化政策支持&#xff0c;巩固脱贫成果 3、激发内生动力&#xff0c;促进持续发展 三、推动乡村全面振兴 1、加快产业发展&#xff0c;增强乡村经济实力 2、推进乡村治理体系和治理能力…

【面试宝藏】Redis 常见面试题解析

Redis 常见面试题解析 1. 什么是 Redis&#xff1f; Redis 是一个开源的内存数据结构存储系统&#xff0c;可以用作数据库、缓存和消息中间件。它支持多种数据结构&#xff0c;如字符串、哈希、列表、集合和有序集合。 2. Redis 的数据类型&#xff1f; Redis 支持以下数据…

使用tftpd更新开发板内核

我们升级内核可以通过原厂提供的升级软件来进行&#xff0c;比如瑞芯微的RKDevTool.exe&#xff0c;只不过这种方式必须通过指定的OTG升级口&#xff0c;还得借助按键进入loader模式后才可以。 其实还可以利用一些通用的工具来进行升级&#xff0c;比如tftpd工具。 下载地址p…

C++:栈(stack)、队列(queue)、优先级队列(priority_queue)

hello&#xff0c;各位小伙伴&#xff0c;本篇文章跟大家一起学习《C&#xff1a;栈&#xff08;stack&#xff09;和队列&#xff08;queue&#xff09;》&#xff0c;感谢大家对我上一篇的支持&#xff0c;如有什么问题&#xff0c;还请多多指教 &#xff01; 文章目录 :map…

rust linux 交叉编译

比如在 x86 linux 上编译 riscv64 的程序&#xff0c;可以建一个最简单的 hello world 测试 x86 linux 需要安装gcc-riscv64-linux-gnu&#xff0c;rust要rustup target add riscv64gc-unknown-linux-gnu 在 rust 工程里创建.cargo/config.toml&#xff0c;内容为&#xff1a;…

MPLAB--读写MCU数据

空工程 Read –Programmer\Read –File\Export, –确定后选择文件位置 & 文件名 Program –File\Import…,选择烧录的文件*.hex –Programmer\Program

(有代码示例)Vue 或 JavaScript中使用全局通信的3种方式

在 Vue 或 JavaScript 应用中&#xff0c;可以使用以下库来实现全局事件通信&#xff1a; Vue.js 中的 EventBus&#xff1a; 在 Vue.js 中&#xff0c;可以使用 EventBus 来实现全局事件通信。EventBus 是一个 Vue 实例&#xff0c;用于在组件之间传递事件。你可以使用 $on、…

如何 Logrus IT 的质量评估门户帮助提升在线商店前端(案例研究)

在当今竞争激烈的电子商务环境中&#xff0c;一个运作良好的在线店面对商业成功至关重要。然而&#xff0c;确保目标受众获得积极的用户体验可能是一项挑战&#xff0c;尤其是在使用多种语言和平台时。Logrus IT的质量评估门户是一个强大的工具&#xff0c;可帮助企业简化内容和…

《python开发》cannot allocate memory in static TLS block-报错问题解决

阿丹&#xff1a; 今天在配置跑rasa训练的时候出现问题&#xff0c;找了国内论坛有解决的人&#xff0c;但是说的不明白。查阅了很多论坛之后发现了解决的方案。 https://github.com/keras-team/keras-tuner/issues/317 问题描述以及错误&#xff1a; 关键错误 &#xff1a;c…

做视频号小店什么类目最容易爆单?其实,弄懂这三点就会选品了

大家好&#xff0c;我是电商花花。 我们做视频号小店做什么类目最容易爆单&#xff1f; 其实任何类目都有属于自己的受众人群和客户&#xff0c;都非常容易爆单&#xff0c;我们想要爆单&#xff0c;就要选对类目&#xff0c;选对产品。 视频号上所有的类目基本上可以分为标…

C++ static_cast、dynamic_cast、const_cast 和 reinterpret_cast 用处和区别

在 C 中&#xff0c;static_cast、dynamic_cast、const_cast 和 reinterpret_cast 是四种类型转换运算符&#xff0c;它们各自有不同的用途和行为&#xff1a; static_cast 用于编译时已知类型的转换&#xff0c;如基本数据类型转换、派生类到基类的转换、指针和引用的转换等…

对比 delay() 和 sleep()

Kotlin 语言中的协程 Coroutine 极大地帮助了开发者更加容易地处理异步编程。就 JVM 的角度而言&#xff0c;协程一定程度上减少了 “回调地狱” 的问题&#xff0c;切实地改进了异步处理的编码方式。Coroutine 中封装的诸多高效 API&#xff0c;可以确保开发者花费更小的精力…

docker与docker-compose部署

1.1 安装工具 sudo yum install -y yum-utils device-mapper-persistent-data lvm21.2 添加docker的yum库 yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo sudo yum makecache fast1.3 安装Docker sudo yum install docke…

C2prog烧写程序

DSP开发&#xff0c;使用CCS软件建立工程 C2prog 支持C2prog通过串口进行下载&#xff0c;支持out文件。这个下载器下载速度比官方提供的UNIFLASH还要快。 boot跳线设置&#xff0c;不同的DSP拨码方式不相同。制作单板硬件时&#xff0c;通常时将前面三个直接拉到高&#xff…

视频号小店,目前电商界最值得去做的创业项目,一篇解读!

大家好&#xff0c;我是电商小V 要说24年最火的创业性项目那一定是视频号小店&#xff0c;为什么会这样说呢&#xff1f;这主要的还是和他背后的平台有关系&#xff0c;视频号小店是背靠腾讯电商平台的&#xff0c;坐拥的流量可以说是很多的&#xff0c;可以说视频号小店的靠山…