在线预览Word、Excel、PowerPoint等文件
在我们工作时,经常会有在线查看各种不同类型的文件的需要,如Word文档、Excel表格、PowerPoint幻灯片和PDF等。可以直接在这里预览:https://www.compdf.com/webviewer/demo
Word 文件实现前端预览
方案一:
使用 XDOC 可以实现预览以 DataURI 表示的 word 文档,此外 XDOC 还可以实现文本、带参数文本、html文本、json文本、公文等在线预览,具体实现方法请看官方文档
下面是使用 XDOC 实现预览 DOCX 文档的代码示例:
注意:文档地址要用utf-8编码,并且外网可访问
示例代码:
window.open("https://view.xdocin.com/view?src=" + encodeURIComponent("https://view.xdocin.com/demo/view.docx"));
方案二:
使用 docx-preview 开源组件实现 word 文件预览
-
npm 安装 docx-preview
-
获取 word文档 blob 数据流
-
调用 docx-preview 提供的 renderAsync 方法,并将获取的 blob 数据流传入方法中,渲染word文档
示例代码:
import Axios from "axios";
import { renderAsync } from "docx-preview";Axios.get('文档下载路径',{responseType: 'blob'
}).then(({data}) => {renderAsync(data, document.getElementById("container")) // 渲染到页面
})
Excel 文件实现前端预览
-
使用 npm 命令安装库:
npm i exceljs handsontable @handsontable/vue -
使用 exceljs 解析数据,通过
workbook.getWorksheet方法获取到每一个工作表的数据,将数据处理成一个二维数组的数据 -
引入
@handsontable/vue的组件HotTable -
通过settings属性,将一些配置参数和二维数组数据传入组件,渲染成excel样式,实现预览
<template><input type="file" @hange='handleFile' /><hot-table :settings="hotSettings"></hot-table>
</template><script setup>import Excel from 'exceljs';import { HotTable } from "@handsontable/vue";import { ref } from 'vue';const data = ref([]);const handleFile = (e) => {const file = e.target.files[0];const workbook = new Excel.Workbook();await workbook.xlsx.load(file)// 第一个工作表const worksheet = workbook.getWorksheet(1);// 遍历工作表中的所有行(包括空行)data.value = worksheet.getRows(1, worksheet.actualRowCount);})const hotSettings = {language: "zh-CN",readOnly: true,data: data.value,mergeCells: this.merge,colHeaders: true,rowHeaders: true,height: "auto",outsideClickDeselects: false,licenseKey: "non-commercial-and-evaluation"}
</script>
PowerPoint 文件实现前端预览
使用 jszip 和 pptxjs 实现 PowerPoint 文件预览
<div id="slide-resolte-contaniner" ></div> <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/jszip.min.js"></script> <!-- v2.. , NOT v.3.. -->
<script type="text/javascript" src="./js/filereader.js"></script> <!--https://github.com/meshesha/filereader.js -->
<script type="text/javascript" src="./js/d3.min.js"></script> <!-- for charts graphs -->
<script type="text/javascript" src="./js/nv.d3.min.js"></script> <!-- for charts graphs -->
<script type="text/javascript" src="./js/pptxjs.js"></script>
<script type="text/javascript" src="./js/divs2slides.js"></script> <!-- for slide show --><script> $("#slide-resolte-contaniner").pptxToHtml({ pptxFileUrl: "Sample_demo1.pptx", slidesScale: "50%", slideMode: false, keyBoardShortCut: false });
</script>
PDF 文件实现前端预览
使用 ComPDFKit PDF SDK 实现 PDF 文件的在线预览
第一步:添加 ComPDFKit PDF SDK 包
-
将 @compdfkit 文件夹添加到项目的 根 目录或 assets 目录下的 lib 目录中。这将作为 ComPDFKit PDF SDK for Web 的入文件,并将它导入到您的项目中。
-
将包含运行 ComPDFKit PDF SDK for Web 所需的静态资源文件的 webviewer 文件夹添加到项目的静态资源文件夹中。
第二步:显示PDF文档
-
将 @compdfkit 文件夹中的 webviewer.js 文件导入到您的项目中。
-
调用
ComPDFKitViewer.init()在您的项目中初始化 ComPDFKit Web Viewer。 -
将要显示的 PDF 地址和许可证密钥传递给 init 函数
// Import the JS file of ComPDFKit Web Viewer
import ComPDFKitViewer from "/@compdfkit/webviewer";
const viewer = document.getElementById('webviewer');
ComPDFKitViewer.init({pdfUrl: 'Your PDF Url',license: 'Input your license here'
}, viewer)
.then((core) => {const docViewer = core.docViewer;docViewer.addEvent('documentloaded', () => {console.log('ComPDFKit Web Viewer loaded');})
})
- 项目运行后,您就可以看到要显示的 PDF 文件了。
相关文章:
在线预览Word、Excel、PowerPoint等文件
在我们工作时,经常会有在线查看各种不同类型的文件的需要,如Word文档、Excel表格、PowerPoint幻灯片和PDF等。可以直接在这里预览:https://www.compdf.com/webviewer/demo Word 文件实现前端预览 方案一: 使用 XDOC 可以实现预…...
准确预测极端降水,哥伦比亚大学推出升级版神经网络 Org-NN
内容一览:随着环境变化加剧,近年来全球极端天气现象频频出现,准确预测降水强度对人类以及自然环境都十分重要。传统模型预测降水的方差较小,偏向小雨,对极端降水预测不足。 关键词:极端天气 内隐学习 神经网…...
【数据结构】反转链表、链表的中间节点、链表的回文结构(单链表OJ题)
正如标题所说,本文会图文详细解析三道单链表OJ题,分别为: 反转链表 (简单) 链表的中间节点 (简单) 链表的回文结构 (较难) 把他们放在一起讲的原因是: 反转链…...
Python爬虫-抓取的目标数据为#x开头,怎么解决?
前言 本文是该专栏的第4篇,后面会持续分享python爬虫案例干货,记得关注。 在做爬虫项目的时候,有时候抓取的平台目标数据为&#x开头,如下图所示: 浏览器显示的正常数据,但通过爬虫协议获取到的网页源码数据却是以&#x开头的隐藏数据,遇到这种情况,爬虫需要怎么处…...
短视频账号矩阵系统/技术开发搭建私有部署
本系统是基于短视频领域的新一代系统,旨在提供一个高效、全面的短视频管理与分发平台。系统采用先进的开发算法和技术,实现了智能化视频分类、推荐和用户互动功能。 目录 一、抖音SEO账号矩阵系统的开发和部署遵循以下原则: 二、账号矩阵绑…...
光致发光二极管光源——荧光效率检测系统
发光二极管(LED)光源已经逐步地取代传统光源,并在生产和生活中得以广泛应用。荧光粉在LED照明设备中起到了至关重要的作用,其功能为将转换芯片所产生的紫外或者蓝光,发射出目标颜色的光。近年来,人们为了提…...
【手撕C语言】多线程
(꒪ꇴ꒪ ),Hello我是祐言QAQ我的博客主页:C/C语言,Linux基础,ARM开发板,软件配置等领域博主🌍快上🚘,一起学习,让我们成为一个强大的攻城狮!送给自己和读者的一句鸡汤🤔&…...
Dubbo2-概述
Dubbo 阿里公司开源的一个高性能,轻量级的javaRPC(远程服务调用方案)框架,提供高性能远程调用方案以及SOA服务治理方案 Dubbo架构 节点角色说明: Provider:服务提供方 Container:服务运行容器 Consumer:调用远程服务…...
【将回声引入信号中】在语音或音频文件中引入混响或简单回声,以研究回声延迟和回波幅度对生成的回波信号感知的影响(Matlab代码实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...
pythonocc进阶学习:投影projection
1.点 到 线,(直线,曲线)等上的投影 staticmethod # 点到Lin的投影 def Project_Pnt_To_Lin(p: gp_Pnt, lin: gp_Lin):Edge BRepBuilderAPI_MakeEdge(lin).Edge()curve BRep_Tool.Curve(Edge)proPnt GeomAPI_ProjectPointOnCurve(p, curve[0])Neares…...
Scractch3.0_Arduino_ESP32_学习随记_显示网络天气(二)
这里写目录标题 目的器材程序联系我们 目的 通过C02获取网络天气。并在屏上显示 器材 硬件: 齐护机器人C02 购买地址 软件: scratch3.0 下载地址:官网下载 程序 使用的是公开免费的API,对请求间隔和次数有限制,如果连续获取可能会被封IPÿ…...
Mysql压力测试(sysbench)
目录 配置项目环境: 参考:采用sysbench压测mysql详解_dream21st的博客-CSDN博客 实验步骤: 1、安装sysbench工具 2、在master上创建用户和库,配置用户的权限可以使他可以访问库(Mysql的主从复制) 3、基…...
TBDS MPP参数列表
TBDS MPP参数列表 namesettingdescriptionapplication_namessqlSets the application name to be reported in statistics and logs.archive_cleanup_commandSets the shell command that will be executed at every restart point.archive_command(disabled)Sets the shell co…...
C# OpenCvSharp 读取rtsp流
效果 项目 代码 using OpenCvSharp; using OpenCvSharp.Extensions; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading; using Syste…...
每日后端面试5题 第七天
一、内连接和外连接查询有什么区别? 内连接只查询出两表的交集; 外连接会查询出某表的全部与两表的交集。 二、Nginx的作用 1.反向代理 前端把请求发送给nginx,再由nginx将请求发送给后端服务器。 2.负载均衡 提高访问速度;…...
计算机视觉的应用10-图片中的表格结构识别与提取实战
大家好,我是微学AI,今天给大家介绍一下计算机视觉的应用10-图片中的表格结构识别与提取实战,表格结构识别在信息处理领域中具有广泛应用,但由于表格的多样性和复杂性,以及难以准确解析的布局和格式,传统的方…...
P4178 Tree (点分治)
题目链接 一:我们考虑树上两点之间的路径有什么情况 1:经过根节点(即在根节点的两端) 2:不经过根节点(完全在一颗子树的一侧) 二:我们考虑这两种路径是否可以归为一类 1࿱…...
Kubernetes 二进制搭建
Kubernetes 二进制搭建 一、二进制搭建 Kubernetes v1.201.1 部署准备1.2 操作系统初始化配置1.3 部署 etcd 集群1.3.1 etcd 作为服务发现系统,有以下的特点1.3.2 准备签发证书环境1.3.3 在 master01 节点上操作1.3.4 生成证书 1.4 部署 docker引擎1.4.1 部署 Maste…...
QT QtXlsx安装使用
QtXlsx介绍 QtXlsx是一个可以读取和写入Excel文件的库。它不需要Microsoft Excel,可以在Qt5支持的任何平台上使用。 这里一定是需要QT5支持的。 须知安装QtXlsx时,需要下载perl 1.安装perl 这里选择官网下载安装即可。 官网地址:https://p…...
Java医院信息化HIS管理系统源码
HIS模板分为两种:病历模板和报表模板。模板管理是运营管理的核心组成部分,是基层卫生健康云中各医疗机构定制电子病历和报表的地方,各医疗机构可根据自身特点特色定制电子病历和报表,制作的电子病历及报表可直接在业务系统中使用。…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段: 构建阶段(Build Stage):…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用:作为微服务架构的网关,统一入口,处理所有外部请求。 核心能力: 路由转发(基于路径、服务名等)过滤器(鉴权、限流、日志、Header 处理)支持负…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作: 1)、切换集群 2)、切换节点 3)、切换到 apparmor 的目录 4)、执行 apparmor 策略模块 5)、修改 pod 文件 6)、…...
以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述:iview使用table 中type: "index",分页之后 ,索引还是从1开始,试过绑定后台返回数据的id, 这种方法可行,就是后台返回数据的每个页面id都不完全是按照从1开始的升序,因此百度了下,找到了…...
对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验,以及大语言模型的分析能力,我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际,我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测,聊作存档。等到明…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面,避免重复抓取,以节省资源和时间。 在分布式环境下,增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路:将增量判…...
JVM 内存结构 详解
内存结构 运行时数据区: Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器: 线程私有,程序控制流的指示器,分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...
Linux 内存管理实战精讲:核心原理与面试常考点全解析
Linux 内存管理实战精讲:核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用,还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...
