位置: IT常识 - 正文

纯前端文档预览,还要支持所有主流格式,有这一篇就足够了(前端文件预览)

编辑:rootadmin
纯前端文档预览,还要支持所有主流格式,有这一篇就足够了 写在前面

推荐整理分享纯前端文档预览,还要支持所有主流格式,有这一篇就足够了(前端文件预览),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端文件预览,前端预览excel,前端在线预览pdf,前端在线预览pdf,纯前端文档预览怎么设置,纯前端文档预览怎么设置,纯前端文档预览怎么做,纯前端文档预览怎么做,内容如对您有帮助,希望把文章链接给更多的朋友!

        纯前端的文档预览功能,是非常常见的需求,但就是这么简单的需求,难住了许多可爱的小伙伴们。别急,先访问一下解决方案,给你一个惊喜,再往下看:

文件在线预览DEMO

服务器文件预览DEMO

演示视频

Vue3纯前端文档预览演示

开源项目项目最新进展(2023年4月10日): 

1. Vue3版本重构了Xlsx模块,使用Worker加载,增加了体验性,能够秒级打开千万行的Excel

2. 增加了Markdown文档的渲染,能够美观的渲染md文档,使用了github风格

4. 新版文档增加视频演示,更直观展示功能。

项目最新进展(2023年4月4日): 

1. Vue3+TypeScript+Vite版本发布,完全重构,性能飞跃,超高代码质量

2. 重构了Xlsx对于主题颜色的获取和计算,能够完美显示颜色

3. 重构了Pptx底层部分逻辑,解耦了图表部分,并优化了显示性能

4. 新版文档已经上线,demo部分替换部署了Vue3版本

2023年2月28日全面升级说明 

鉴于很多朋友呼吁文档的问题,目前使用文档已更新,请参考

使用文档

本次更新属于突破更新,完成了项目组件化改造,嵌入项目中使用更加容易,具体请拉取最新代码体验一下吧!

==更新日志==

1. 优化了pptx嵌套块溢出效果,比之前好很多

2. 增加了文件标题显示

3. 进行了组件化拆分设计,提供标准的Vue组件,方便接入

4. 优化了底层的一些代码,运行更加稳定

== 公众号上线!==

此外,博主的公众号上线了,大家在微信搜索 "飞鱼开源"。关注“飞鱼开源WorkShop”公众号,可以获取最新源码,同时不定期更新技术福利!

有大家的支持我才有更新的动力,感谢大家一直以来的支持!❤❤❤

仓库地址: https://git.flyfish.group,请下载过资源的大家注册后获取最新源码!

2022年8月1日更新,重大升级。

1. 重构大部分pptx逻辑,优化背景样式,块文字样式和图表。

2. 优化PDF展现逻辑,基于官网demo使用官方pdfViewer组件实现懒加载,虚拟滚动,大幅度提高性能,可以秒开超大PDF文件!

3. 优化框架和升级依赖版本

福利:注册git私库并发送账号给博主,博主会帮忙开放本项目的git仓库权限,永久更新!记得是下载过资源的小伙伴哦,开发不易,请予以点滴支持,不尽感激!

git仓库地址:飞鱼开源工作室

2022年5月31日更新。增加文件url输入预览,可以访问文件在线预览DEMO体验。由于很多小伙伴提的问题都是关于服务器URL预览文件怎么预览,这次的demo集成了这部分功能,大家可以参照源码进行理解和修改。

因demo使用ajax加载,在测试时请保证文件资源响应Header包含允许跨域的头部。建议头部如下:

Access-Control-Allow-Origin*Access-Control-Allow-Headers X-Requested-WithAccess-Control-Allow-MethodsGET纯前端文档预览,还要支持所有主流格式,有这一篇就足够了(前端文件预览)

功能入口如下:

实现效果

word文档预览 

Excel文档预览 

 PPT文档预览

 PDF文档预览

Markdown预览

 图片预览

文本预览

视频预览

看完了之后,废话不多说,来给大家梳理梳理实现思路。

现存的方案和不足

笔者在接到这个功能需求后,对市面上目前的实现方案进行了归纳和梳理,不外乎就三种:

PDF预览使用pdfjs,Office文档使用微软的提供的预览URL。该方案确实省事,而且效果是最好的,但是有个很大的问题,文件链接必须是公网链接,这对于在企业网或局域网部署的系统来说,基本上是不可行的方案,pass使用Java后端统一转换为PDF,然后在前端预览。该方案兼容性较好,效果仅次于在线Office,但是对于服务器的压力比较大,在动辄要“高并发,高可用,高吞吐量”的互联网场景下总是不那么合适,基于OpenOffice的文件转换非常耗费IO,pass客户端本地安装Office,利用浏览器的Office插件进行预览。这种实现方式对客户端要求较高,基本上不考虑,毕竟我们是web预览嘛,谁知道客户用的是啥浏览器,pass意外的收获

        到此为止,所有的方案都被pass掉了,非常绝望。无果后,我搭上梯子,疯狂Google,终于找到了一个jquery的开源插件,叫做officeToHtml,出于对开源的尊重,这里提供一下人家的访问链接:OfficeJs | Demos

        这个开源项目非常好用,引用它的demo就能直接预览主流格式,但是它是基于JQuery的。事实上,当时我都已经通过这个方案实现了,结果我们领导说不是Vue,而且用的组件也太老了,强行pass掉了。现实总是残酷的,看着我头顶所剩不多的秀发,深深叹了口气,准备自己再次开整。

        有了国外大佬的思路提供,我的思路也渐渐清晰:

要解决这个问题,还是得用Vue实现大佬的项目是jquery写的,我用Vue实现,也没说不让引用jQuery呀分析一下大佬使用的开源组件,去GitHub上找最新的或者效果最好的,说不定有Vue版本呢自己封装渲染入口,根据扩展名动态匹配渲染器,解析需要的格式。

        OK,思路清晰了,我们开始撸代码。

开始实现       一、找替代框架

        大佬的框架已经老得不被待见了,大致整理后,笔者找到的最贴近且效果最好的框架都在下面的表里了:

文档格式        老的开源组件替代开源组件word(docx)mammothdocx-preview(npm)

powerpoint(pptx)

pptxjs

pptxjs改造开发

excel(xlsx)sheetjs、handsontableexceljs(npm)、handsontable(npm)pdf(pdf)pdfjspdfjs(npm)图片jquery.verySimpleImageViewerv-viewer(npm)

        升级后的组件完全兼容npm,唯一不兼容的pptxjs也被我改造了,能够完美兼容。以下是package.json中相关的依赖。

"@handsontable/vue": "^11.1.0","docx-preview": "^0.1.8","exceljs": "^4.3.0","handsontable": "^11.1.0","pdfjs-dist": "^2.12.313","v-viewer": "^1.6.4","vue": "^2.6.11"        二、搭建简单的视图组件

        框架找好了,接下来我们开工。老样子,用vue-cli创建一个hello-world项目,把脚手架初始化出来。如果没安装过,先全局安装一下:

npm install -g @vue/cli-service-global

        创建项目,名字就叫file-viewer吧!

cd ~/Projectsvue create file-viewer

         然后我们在 src/components/HelloWorld.vue中,给他加一个容器,用于承载文档视图。再弄一个简单的loading容器,ok。

        注意,这里的 @/components/util 是一些常用工具类,主要做二进制数据和字节码、字符串互转的。当然,文档渲染入口也在里面,我们后面说。

<template> <div :class="{hidden}"> <div class="banner"> <div class="container"> <h1><a href="/">Vue在线文档查看器<input class="file-select" type="file" @change="handleChange"/></a></h1> </div> </div> <div class="container"> <div v-show="loading" class="well loading">正在加载中,请耐心等待...</div> <div v-show="!loading" class="well" ref="output"></div> </div> </div></template><script>import { getExtend, readBuffer, render } from '@/components/util';import { parse } from 'qs';/** * 支持嵌入式显示,基于postMessage支持跨域 * 示例代码: * */export default { name: 'HelloWorld', props: { msg: String }, data() { return { // 加载状态跟踪 loading: false, // 上个渲染实例 last: null, // 隐藏头部,当基于消息机制渲染,将隐藏 hidden: false, } }, methods: { async handleChange(e) { this.loading = true; try { const [ file ] = e.target.files; const arrayBuffer = await readBuffer(file); this.loading = false this.last = await this.displayResult(arrayBuffer, file) } catch (e) { console.error(e) } finally { this.loading = false } }, displayResult(buffer, file) { // 取得文件名 const { name } = file; // 取得扩展名 const extend = getExtend(name); // 输出目的地 const { output } = this.$refs; // 生成新的dom const node = document.createElement('div'); // 添加孩子,防止vue实例替换dom元素 if (this.last) { output.removeChild(this.last.$el); this.last.$destroy(); } const child = output.appendChild(node); // 调用渲染方法进行渲染 return new Promise((resolve, reject) => render(buffer, extend, child) .then(resolve).catch(reject)); } }}</script><style scoped>.banner { overflow: auto; text-align: center; background-color: #12b6ff; color: #fff;}.hidden .banner { display: none;}.hidden .well { height: calc(100vh - 12px);}.file-select { position: absolute; left: 5%; top: 17px; margin-left: 20px;}.banner a { color: #fff;}.banner h1 { font-size: 20px; line-height: 2; margin: 0.5em 0;}.well { display: block; background-color: #f2f2f2; border: 1px solid #ccc; margin: 5px; width: calc(100% - 12px); height: calc(100vh - 73px); overflow: auto;}.loading { text-align: center; padding-top: 50px;}.messages .warning { color: #cc6600;}</style>        三、实现渲染入口

           写好容器后,下一步就是重头戏,笔者这里使用匹配模式简单实现了一个渲染入口,代码如下:

// 导入渲染器import renders from './renders';// 渲染入口函数,包含字节数组、文件类型、目标容器export async function render(buffer, type, target) { const handler = renders[type]; if (handler) { return handler(buffer, target); } return renders.error(buffer, target, type);}

             具体渲染逻辑我们用

本文链接地址:https://www.jiuchutong.com/zhishi/281374.html 转载请保留说明!

上一篇:mac怎么删除应用程序?苹果电脑删除软件方法介绍(mac怎么删除应用程序中没有的软件)

下一篇:drvlsnr.exe进程安全吗 drvlsnr是什么进程(drvmgr.exe)

  • oppo怎么关闭病毒警告弹窗(oppo怎么关闭病毒和威胁防护)

    oppo怎么关闭病毒警告弹窗(oppo怎么关闭病毒和威胁防护)

  • 微信采样码在哪里找(采集码在微信哪里)

    微信采样码在哪里找(采集码在微信哪里)

  • 华为freebuds3怎么配对(华为freebuds3怎么查找位置)

    华为freebuds3怎么配对(华为freebuds3怎么查找位置)

  • 荣耀20Pro密码忘了怎么解锁(华为荣耀20pro手机密码忘记了怎么办)

    荣耀20Pro密码忘了怎么解锁(华为荣耀20pro手机密码忘记了怎么办)

  • 淘宝红包没收多久会退回(淘宝红包不收)

    淘宝红包没收多久会退回(淘宝红包不收)

  • 手机号与身份证不符合怎么办(手机号与身份证号不匹配)

    手机号与身份证不符合怎么办(手机号与身份证号不匹配)

  • 酷派手机开不了机怎么办(酷派手机开不了机闪烁灯亮)

    酷派手机开不了机怎么办(酷派手机开不了机闪烁灯亮)

  • 华为手机怎么开视频通话美颜(华为手机怎么开启无线充电功能)

    华为手机怎么开视频通话美颜(华为手机怎么开启无线充电功能)

  • 如何解除电脑主板保护(如何解除电脑主机控制)

    如何解除电脑主板保护(如何解除电脑主机控制)

  • qq对其隐身什么意思(qq隐身会显示什么)

    qq对其隐身什么意思(qq隐身会显示什么)

  • 不是华为手机可以用华为手表吗(不是华为手机可以用hicar吗)

    不是华为手机可以用华为手表吗(不是华为手机可以用hicar吗)

  • 网页端是什么意思(网页端和移动端有什么区别)

    网页端是什么意思(网页端和移动端有什么区别)

  • 华为烧屏能保修吗(华为手机在保修期内烧屏可以免费换屏幕吗)

    华为烧屏能保修吗(华为手机在保修期内烧屏可以免费换屏幕吗)

  • pencil一代支持哪些型号(pencil一代支持pro吗)

    pencil一代支持哪些型号(pencil一代支持pro吗)

  • 华为手机怎么开启单手模式(华为手机怎么开视频美颜功能)

    华为手机怎么开启单手模式(华为手机怎么开视频美颜功能)

  • 怎么找回淘宝店铺(怎么找回淘宝店铺已换手机)

    怎么找回淘宝店铺(怎么找回淘宝店铺已换手机)

  • 苹果相机慢动作一直闪(苹果相机慢动作怎么调成正常速度)

    苹果相机慢动作一直闪(苹果相机慢动作怎么调成正常速度)

  • 抖音发布后能不能编辑(抖音发布后能不能加字幕和文字)

    抖音发布后能不能编辑(抖音发布后能不能加字幕和文字)

  • kiwtl00h是什么型号(kiw-ul00是什么型号)

    kiwtl00h是什么型号(kiw-ul00是什么型号)

  • 台式电脑网卡坏了怎么修复(台式电脑网卡坏了维修多少钱)

    台式电脑网卡坏了怎么修复(台式电脑网卡坏了维修多少钱)

  • canon打印机如何复印(canon打印机如何使用)

    canon打印机如何复印(canon打印机如何使用)

  • 手机如何剪辑视频(手机如何剪辑视频片段)

    手机如何剪辑视频(手机如何剪辑视频片段)

  • 抖音里的音浪是啥意思(抖音里的音浪是什么?)

    抖音里的音浪是啥意思(抖音里的音浪是什么?)

  • 腾讯微信会员怎么给别人用(腾讯微信会员怎么给别人登录)

    腾讯微信会员怎么给别人用(腾讯微信会员怎么给别人登录)

  • 物联卡需要注销吗(物联卡注销了还能恢复吗)

    物联卡需要注销吗(物联卡注销了还能恢复吗)

  • 华为fig一al00是什么型号(华为fig-al00什么型号)

    华为fig一al00是什么型号(华为fig-al00什么型号)

  • 闲鱼怎么看拍卖宝贝(闲鱼怎么看拍卖记录)

    闲鱼怎么看拍卖宝贝(闲鱼怎么看拍卖记录)

  • 苹果14出来13会降多少详细介绍(苹果14出来13会下架吗)

    苹果14出来13会降多少详细介绍(苹果14出来13会下架吗)

  • 如何自己打造一个清理垃圾的小工具(如何自己打造一台高赛摩托车)

    如何自己打造一个清理垃圾的小工具(如何自己打造一台高赛摩托车)

  • Win11如何清空剪贴板数据 Win11清空剪贴板数据的方法(win10怎么清理剪切板)

    Win11如何清空剪贴板数据 Win11清空剪贴板数据的方法(win10怎么清理剪切板)

  • 大二学生web期末大作业 在线电影网站 HTML+CSS+JS(大二期末要考试吗)

    大二学生web期末大作业 在线电影网站 HTML+CSS+JS(大二期末要考试吗)

  • 个人所得税纳税记录
  • 小规模纳税人收入是含税还是不含税
  • 一般纳税人开普票多少个点
  • 2021年销售农机免增值税吗
  • 装修公司开劳务费发票可以有材料进项票吗
  • 购车保险返现如何做会计凭证
  • 跨月红冲发票如何申报退税
  • 汽车保险专用发票怎么做账
  • 本月进项留抵会计分录
  • 汇兑损益属于企业成本吗
  • 印花税计入哪个费用
  • 电子发票丢失如何税前扣除
  • 购买理财产品现金流量处理怎么做?
  • 建安企业异地个税怎么交
  • 小规模纳税人代理记账一年费用
  • 小规模纳税人已经开了3%的票还可以享受1%的优惠吗
  • wind10激活密钥
  • 该设备正在使用中怎么关闭u盘
  • vue框架使用方法
  • windowsserver2019安装教程
  • 苹果推送最新系统怎么弄
  • 苹果手机热点打不开是灰色的
  • 处置动产减按2%税率是什么意思
  • 软件企业高新技术有哪些
  • 建筑业异地施工可以先开发票么
  • 固定资产加速折旧计算方法
  • 购买二手商住房没有给契税发票和购房发票
  • Zend Framework+smarty用法实例详解
  • 酒吧会计要做些什么
  • win11大小核调度会优化吗
  • 固定资产备抵科目怎么填
  • 非同级财政拨款收入属于什么科目
  • php数组查询
  • 固定资产减少的账务处理
  • mysqlmha高可用
  • 进口货物没有发票怎么入账,报税时怎么填
  • 支付中间人佣金违法吗
  • 企业净利润归谁所有
  • 土地出让金抵减增值税账务处理
  • 汽车折旧年限是几年如何计算
  • 生育津贴减去应发工资还是实发工资
  • 期末进行存货清查
  • 费用报销的程序是什么
  • 城建税的征收范围不包括农村
  • 长期的待摊费用包括哪些
  • 预提费用多提了怎么办
  • 开发票没有银行回单可以入帐吗?
  • 地租钱不付如何为
  • 销项税额和转出未交增值税余额怎么结转
  • 纳税人购进国内商品
  • 未确认融资费用怎么算
  • 其他业务收入在资产负债表哪里体现
  • 固定资产会计核算方法
  • sql server中的文件位置可以很灵活
  • sqlserver全文检索
  • vista ui
  • linux管理工具有哪些
  • solaris删除文件命令
  • windows无法运行
  • 怎么查看macbook air序列号
  • surface准备就绪
  • linux 系统变量
  • js 正则验证
  • Android游戏开发教程
  • android:View的setTag和getTag使用
  • node.js教程详细
  • jquery操作元素的方法
  • jq写css样式
  • 给shell脚本传参数
  • unity 3d游戏开发(第2版)
  • js的delegate
  • Jquery实现$.fn.extend和$.extend函数
  • javascript构造函数创建对象
  • 悬浮工具栏
  • android 改变view位置
  • 一般纳税人销售米面粮油税率
  • 广西地方税务局决算公开表
  • 地方税务局受谁领导
  • 安徽税务局检验员工资
  • 树叶加树叶等于几
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设