react预览word文档和Excel文档

于 2024-05-31 09:13:45 发布
阅读量316 收藏
点赞数 1
文章标签： react.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40429514/article/details/139339829
版权

react预览word文档和Excel文档
yarn add react-file-viewer或者npm install react-file-viewer
import FileViewer from ‘react-file-viewer’;

const [fileDataBlob, setFileDataBlob] = useState();
const [fileDataBlobflag, setFileDataBlobflag] = useState(false);

const data = await downloadFile({ id: info?.id }) //获取文件二进制流 blob，最好不要直接用url，很有可能会报跨域
const href = URL.createObjectURL(data)
setFileDataBlob(href)
setFileDataBlobflag(true)
在这里插入图片描述
这页面Html
在这里插入图片描述

想吃冰淇淋TT
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react项目实现文件预览，比如PDF、txt、word、Excel、ppt等常见文件（腾讯云cos）
YanHSama的博客
10-24 3804
使用腾讯云文档预览，需要开通文档预览功能，该功能需要收费的。如果需要图片预览、视频或音频可以使用获取下载链接。使用cos获取预览文档链接。
React文件预览,React实现在线预览docx，xslx，pdf格式文件
酸酸的博客
07-30 1万+
一、前言 由于项目需要实现文件的预览功能，通过查询百度找到了一个组件，就是react-file-viewer，其官方API中描述可支持文件格式有以下格式： 图片：png，jpeg，gif，bmp，包括360度图片 pdf格式 CSV xslx docx 视频：mp4，webm 音频：mp3 但是经过我的测试发现它可以打开docx，xslx格式的文件，pdf格式的文件有时能打开有时打不开的（我刚开始测试的时候pdf格式的文件就一直打不开，但是当项目写完测试的时候发现又能打开pdf格式的文件了）。所以当时开发的
React通过docx-preview预览Word文档
一名Java语言狂热分子。
08-21 4096
在基于React的Web应用中，我们经常遇到需要预览和展示Word文档的需求。而是一个优秀的React组件库，可以帮助我们实现在Web页面上预览Word文档的功能。本文将介绍如何使用组件来实现Word文档的预览，并提供一个案例供参考。效果体验：https://volodymyrbaydalka.github.io/docxjs/通过使用组件，我们可以轻松地实现在React应用中预览Word文档的功能。只需简单的安装、配置和使用，就能够在Web页面上展示并预览Word文档。
react文件预览
weixin_43827172的博客
11-17 761
react文件预览 下载插件 这里得注意一下自己的react的版本 react的版本大于等于16的react-pdf 用5.0及以上 react的版本大于等于15的react-pdf 用4.0及以上 <Document file={filePath} // file是预览文件的路劲 loading="加载中..." externalLinkTarget="_blank" onLoadSuccess={onDocumentLoadSuccess} // 成功加载回调 options
React中使用react-file-viewer，实现预览office文件（pdf,word,xlsx等文件）前端实现，在浏览器打开文件
热门推荐
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
12-11 3万+
前言： 最近做一个项目要求在前端浏览器可以直接打开office文件（pdf,doc,xlsx等文件）。pdf浏览器可以直接打开（可以直接用a标签href="文件地址"或者iframe标签src="文件地址"再或者使用pdf.js）。但是word,xlsl等文件很难实现，网上的实现方式有微软的方法实现但是访问的文件地址必须是公共文件，所有人都能访问到才可以使用，显然是不行的，所以我就找到了reac...
react文件预览插件react-file-viewer
老实敲代码，佛只渡有缘人
11-08 8158
文件在线预览
redocx：with用React创建Word文档
02-03
用React创建Word文档 介绍 redocx是一个库，可让您使用React创建Word文档。 它提供了一组组件，这些组件将您的声明性视图和组件呈现为word文档。 例 一个简单的组件，可将“ Hello World”文本呈现为word文档。 ...
react-利用React创建word文档
08-15
在React开发中，创建Word文档是一项实用且常见的需求，特别是在企业级应用中，例如报告生成、数据导出等场景。本篇文章将深入探讨如何利用React技术来实现这一功能，同时结合Haunted库提供的Web组件和React Hooks ...
React获取Java后台文件流并下载Excel文件流程解析
08-19
React获取Java后台文件流并下载Excel文件流程解析 React获取Java后台文件流并下载Excel文件流程解析是指在React前端应用程序中，通过axios库发送POST请求到Java后台服务器，以获取Excel文件流，并将其下载到本地...
jsp开发实现wordexcel的在线预览源码.rar
01-28
在IT行业中，尤其是在Web开发领域，常常需要处理用户上传的各种文档，如Word和Excel文件。这些文件的在线预览功能可以提升用户体验，避免用户必须下载文件到本地才能查看内容。本篇文章将详细讲解如何使用JSP（Java...
react-stl-file-viewer:一个简单的stl文件预览组件可嵌入React应用程序
05-07
react-stl-file-viewer 安装 npm install --save react-stl-file-viewer 用法 import React , { useState } from 'react' import { StlViewer } from 'react-stl-file-viewer' import { Box , Button , Flex , Heading , Image } from '@chakra-ui/react' const App = ( ) => { const [ photo , setphoto ] = useState ( '' ) const [ volume , setvolume ] = useState ( 0 ) function getFrame ( ) { let canvas = document
react-ReactPDF帮你在React应用中展示PDF文件
08-14
React-PDF 帮你在 React 应用中展示 PDF 文件
react-code-preview:React的代码编辑预览
04-12
React代码预览 React的代码编辑预览。 预览演示： : 文档中经常有很多示例代码。 我们希望您可以在阅读文档时运行示例代码来查看渲染界面。 安装 npm install @uiw/react-code-preview --save 用法 import React from 'react' ; import { Button } from 'uiw' ; import CodePreview from '@uiw/react-code-preview' ; const code = `import { Button, Divider, Icon } from 'uiw'; ReactDOM.render( <div> <Button type="primary">主要按钮</Button> <Button type="success">成功按钮</Butt
react-file-viewer
05-02
React文件查看器 Web的可扩展文件查看器 支持的文件格式： 图片：png，jpeg，gif，bmp，包括360度图片 pdf格式 CSV xslx docx 视频：mp4，webm 音频：mp3 用法 请注意，此模块在react 16+上效果最佳。 如果您使用的是React <16，则可能需要使用版本0.5。 npm install react-file-viewer@0.5.0 。 有一个主要的React组件FileViewer ，它具有以下道具： fileType字符串：要显示的资源类型（一种受支持的文件格式，例如'png' ）。 传递不支持的文件类型将导致显示unsupported file type消息（或自定义组件）。 filePath字符串：FileViewer要显示的资源的URL。 onError函数[可选]：当文件查看器在获取或呈现请求的资源时发生错
react核心文件和中文文档.rar
04-19
react的核心库文件，前端开发的利器。用于构建用户界面的 JavaScript 库，声明式 React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。...
React封装文件预览组件
读心悦
04-05 1707
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
springboot react文件下载预览
niki_yang
06-07 953
请注意，上述代码仅为示例，具体实现可能会根据您的需求和文件类型而有所不同。
pdf预览组件react-pdf，pdfjs-dist
最新发布
老实敲代码，佛只渡有缘人
04-03 1272
react项目预览pdf文件
vue 页面预览word文件和excel文件
06-02
在 Vue 中预览 Word 文件和 Excel 文件，可以通过引入第三方插件实现。 1. 首先，需要安装并引入 `office-ui-fabric-js` 和 `office-ui-fabric-react` 这两个依赖库。 ```bash npm install office-ui-fabric-js office-ui-fabric-react --save ``` 2. 然后，可以通过 `office-ui-fabric-react` 提供的 `DocumentCard` 和 `DocumentCardPreview` 组件来实现 Word 和 Excel 文件的预览。需要注意的是，这两个组件需要在 `componentDidMount` 生命周期中加载。 ```vue <template> <div> <DocumentCard> <DocumentCardPreview previewImages={[ { previewIconProps: { iconName: 'WordDocument' }, previewProps: { previewFileType: PreviewFileType.Document, previewFileUrl: 'http://example.com/word.docx' } } ]} /> </DocumentCard> <DocumentCard> <DocumentCardPreview previewImages={[ { previewIconProps: { iconName: 'ExcelWorkbook' }, previewProps: { previewFileType: PreviewFileType.Document, previewFileUrl: 'http://example.com/excel.xlsx' } } ]} /> </DocumentCard> </div> </template> <script> import { DocumentCard, DocumentCardPreview, PreviewFileType } from 'office-ui-fabric-react' export default { name: 'FilePreview', mounted () { require('office-ui-fabric-js/dist/css/fabric.min.css') require('office-ui-fabric-js/dist/css/fabric.components.min.css') }, components: { DocumentCard, DocumentCardPreview } } </script> <style scoped> /* 样式可以根据需求自行修改 */ </style> ``` 3. 最后，需要在后端将 Word 和 Excel 文件转换为 PDF 格式，然后在前端通过 `iframe` 标签来展示 PDF 文件。 ```vue <template> <div> <iframe :src="pdfUrl" frameborder="0" width="100%" height="600"></iframe> </div> </template> <script> export default { name: 'FilePreview', data () { return { pdfUrl: '' } }, mounted () { this.getPdfUrl() }, methods: { getPdfUrl () { // 从后端获取 PDF 文件的 URL // ... this.pdfUrl = 'http://example.com/file.pdf' } } } </script> <style scoped> /* 样式可以根据需求自行修改 */ </style> ``` 以上是两种实现 Word 和 Excel 文件预览的方法，可以根据自己的需求选择合适的方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值