react-file-viewer预览excel

2024-10-28

React中使用react-file-viewer，实现预览office文件（pdf,word,xlsx等文件）前端实现

最近做一个项目要求在前端浏览器可以直接打开office文件(pdf,doc,xlsx等文件).pdf浏览器可以直接打开(可以直接用a标签href="文件地址"或者iframe标签src="文件地址"再或者使用pdf.js).但是word,xlsl等文件很难实现,网上的实现方式有微软的方法实现但是访问的文件地址必须是公共文件,所有人都能访问到才可以使用,显然是不行的,所以我就找到了react-file-viewer. 1.实现pdf预览.(1)用iframe标签src

ASP.NET MVC在线预览Excel、Word、TXT、PDF文件

代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Microsoft.Office.Interop.Excel; using System.Diagnostics; using System.IO; using Microsoft.Office.Interop.Word; namespace Suya.Web.Ap

文档控件NTKO OFFICE 详细使用说明之预览Excel文件（查看、编辑、保存回服务器）

1.在线预览Excel文件 (1) 运行环境 ① 浏览器:支持IE7-IE11(平台版本还支持Chrome和Firefox) ② IE工具栏-Internet 选项:将www.ntko.com加入到浏览器的可信站点中,不启用保护模式,并将HTTPS验证取消 ③ 如果是开发人员首次使用文档控件,需要将控件手动注册控件,获取控件的版本clisid以及版本信息Version(如果程序已经开发完则可以忽略此步骤) (2) 创建一个加载控件的JS文件,用户只需修改控件版本号Version,classid,

在网页中预览excel表格文件

项目需求在前端页面中实现预览excel表格的功能,上网了解之后大致总结为一下几种方法. 1.office文档转换为pdf,再转swf,然后通过网页加载flash进行预览 2.通过 xlsx.js,jszip.js插件 3.django xlrd读取excel内容,循环写入到前端页面table中 4.office转html,网页加载html文件进行预览第一种方法:首先你的电脑上需要安装office软件,其次转换过程较为繁琐,同时消耗系统资源. 第二种方法:个人对js不是很熟悉,看了别人写的js代

上传图片预览JS脚本 Input file图片预览的实现示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

input file 模拟预览图片。

首先申明,接下来内容只是单纯的预览图片,最多选择九张,并没有和后台交互,交互的话需要自己另外写js. 本来想写一个调用摄像头的demo,意外的发现input file 在手机端打开的话,ios可以调用图库或者摄像头,而安卓系统不能调用= =||.如果有人早知道,轻喷,我才发现... 我对于web这一块很感兴趣,希望能和大家一起交流,一起进步! 代码很简单,当我第一次发博客的纪念... 效果演示: 1.这是页面布局,基本没多少= =class随手起的,不要介意,懒... <body> <p

input上传图片（file）,预览图片的两种方法。blob与base64编码

上传图片时一般都需要预览,我一般用这两种方法来实现.base64编码可以直接上传到后台,后台解析下,得到的文件就会比较小了,省去了压缩图片这一步了. //获取对象input file 的图片地址,放进img $("#file").change(function () {//input的id var objUrl = getObjectURL(this.files[0]);//调用函数调取图片地址 obUrl = objUrl; console.log("objUrl = &q

一段上传图片预览JS脚本,Input file图片预览的实现

在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预览的功能,还被我给翻了出来,在这里做个记录,方便自己以后用,也方便其他需要的朋友! 代码很简单,如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

前端实现input[type='file']上传图片预览效果

众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现:一是前后台交互,后台将图片地址返回前端: 二是,我今天写的内容,使用FileReader对象——允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容:此种方法可以优化图片加载速度,减少方法一占用带宽的问题: 但是,此种方法兼容性存在问题,主要是IE浏览器(ie10以上没问题

在浏览器上打开、预览Excel xlsx表格文件

现在的HTML5,有了FileReader文件读写API, 真是让javascript的能力大幅提升. 解析zip压缩文件.解析Excel xlsx 表格文档各种文件预览,实现起来也有了可能性,以前的js是完全无法实现的. github找了一下,找到3个热门的excel的js开源库. xlsx.jsGithub: https://github.com/SheetJS/js-xlsx 这个是最热门的了. exceljsGithub: https://github.com/exceljs/excel

在线预览Excel

遇到的问题各种多 <system.web> <identity impersonate="true" userName="Administrator" password="qqqq"/> http://zzhi191.blog.163.com/blog/static/1350849520129122280406/ http://bbs.csdn.net/topics/330173175 http://tany

通过Pdf预览Excel或者word或者Powerpoint （C#将Office转换为PDF）

下面代码是Excel转换为PDF using System; using System.Collections.Generic; using System.Linq; using System.Web; using ms = Microsoft.Office.Interop.Excel; public class Excel2Pdf { public static void ToPdf(string excelName, string pdfName) { ms.Application app

input file上传图片预览，非插件

Input标签 <input type="file" name="pic" onchange="changepic(this)" multiple="multiple"/> JS方法 function changepic(obj) { //console.log(obj.files[0]);//这里可以获取上传文件的name var newsrc = getObjectURL(obj.files[0]); docu

C#在线预览文档（word，excel，pdf，txt，png）

C#在线预览文档(word,excel,pdf,txt,png) 1.预览方式:将word文件转换成html文件然后预览html文件2.预览word文件:需要引入Interop.Microsoft.Office.Interop.Word.dll(Com组件)3.预览Excel文件:需要引入Interop.Microsoft.Office.Interop.Excel.dll(Com组件,Microsoft Excel 12.0(or other version) Object Library)4.

Asp.net MVC 利用(aspose+pdfobject.js) 实现在线预览word、excel、ppt、pdf文件

在线预览word.excel.ppt利用aspose动态生成html 主要代码 private bool OfficeDocumentToHtml(string sourceDoc, string saveDoc){ bool result = false; //获取文件扩展名 string docExtendName = System.IO.Path.GetExtension(sourceDoc).ToLower(); switch (docExtendName) { case ".doc&q

C# 基于NPOI+Office COM组件实现20行代码在线预览文档（word，excel，pdf，txt，png）

由于项目需要,需要一个在线预览office的功能,小编一开始使用的是微软提供的方法,简单快捷,但是不符合小编开发需求, 就另外用了:将文件转换成html文件然后预览html文件的方法.对微软提供的方法感兴趣的小伙伴可以去看一下,够简单直接:word+excle+pdf表格在线浏览我们来说一下小编使用的方法,这种预览方式基于开源的NPOI+Office COM组件,使用是需要引入这几个动态链接库,总体如下: C#在线预览文档(word,excel,pdf,txt,png) 预览方式:将文件转换成

WinForm中预览Office文件

WinForm预览Office文档使用WinForm, WPF, Office组件原理:使用Office COM组件将Word,Excel转换为XPS文档, 将WPF的DocumentViewer控件寄宿到WinForm中, 实现预览. 1. 新建WinForm项目 2. 新建WPF用户控件, 注意是WPF控件 3. 编辑WPF用户控件 <UserControl ... ...> <Grid> <DocumentViewer x:Name="documentVi

net 预览文件转换文件

预览SWF文件 swfobject.js (google浏览器会阻止需设置) @{ ViewBag.Title = "PdfPreview"; Layout = "~/Views/Shared/_Layout.cshtml"; var fileType = ViewBag.fileType; var swfpath = ViewBag.filePath; } <script src="~/Content/js/jquery.uploadify/

HTML页面预览表格文件内容

背景简介在将一个表格文件上传到服务器上之前,JS读取表格文件并将文件内容输出到页面中 vue项目第三方 exceljs 安装 npm install exceljs 插件使用 github 中文文档地址 element ui 文件选择 el-upload 数据展示 el-table 代码以及说明 import Excel from 'exceljs'; // 引入exceljs // 预览表格文件 previewFile(){ let _this=this // 获取选择的文件 let fi

H5实现本地预览图片

我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>UploadFile</title> </head> <body> <div> <img src="" id=&quo

H5图片预览、压缩、上传

目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除预览效果图: 代码说明: 1.input:file选择图片  <ul id="preview" class="clear"> <li class="fl"> <img src="/images/audition/icon_upload.pn

react-file-viewer预览excel

热门专题