想在vue中预览doxc,excel,pdf文件? vue-office提供包支持
在浩瀚的Vue生态中,vue-office
犹如一颗璀璨的星辰,以其独特的魅力照亮了开发者处理多种文件格式的预览之路。这款精心打造的Vue组件库,不仅拥抱了Vue2的经典,也紧密跟随Vue3的步伐,展现了卓越的技术前瞻性和兼容性。它巧妙地集成了对DOCX、Excel、PDF等多种文件格式的支持,让文档预览在Web应用中变得前所未有的便捷与高效。
使用实例:轻盈如风,预览无界
想象一下,在您的Vue项目中,只需简单几行代码,即可将复杂的文档预览功能嵌入其中。无论是用户上传的简历、项目报告,还是财务报表,vue-office
都能以优雅的方式呈现,让信息的传递与共享变得直观而流畅。无需担心文件格式的兼容性问题,vue-office
以其强大的解析能力,确保每种文档都能精准还原,让用户享受如原生应用般的预览体验。
vue-office(git地址https://github.com/501351981/vue-office)
安装
#docx文档预览组件
npm install @vue-office/docx vue-demi
#excel文档预览组件
npm install @vue-office/excel vue-demi
#pdf文档预览组件
npm install @vue-office/pdf vue-demi
如果是vue2.6版本或以下还需要额外安装 @vue/composition-api
npm install @vue/composition-api/
vue3+Typescript格式
本地excel文件预览
<template><vue-office-excelsrc="/assets/ComputerIT.pdf"@rendered="renderedHandler"@error="errorHandler"class="excel-viewer"/>
</template><script lang="ts" setup>
import VueOfficeExcel from '@vue-office/excel'
function renderedHandler() {console.log("渲染完成");
}function errorHandler() {console.log("渲染失败");
}
</script>
本地word 文件预览
<template><vue-office-docxsrc="/assets/ComputerIT.pdf"@rendered="renderedHandler"@error="errorHandler"class="docx-viewer"/>
</template><script lang="ts" setup>
import VueOfficeDocx from '@vue-office/docx'
function renderedHandler() {console.log("渲染完成");
}function errorHandler() {console.log("渲染失败");
}
</script>
本地pdf 文件预览
<template><vue-office-pdfsrc="/assets/ComputerIT.pdf"@rendered="renderedHandler"@error="errorHandler"class="pdf-viewer"/>
</template><script lang="ts" setup>
import VueOfficePdf from '@vue-office/pdf'
function renderedHandler() {console.log("渲染完成");
}function errorHandler() {console.log("渲染失败");
}
</script>
相关文章:
想在vue中预览doxc,excel,pdf文件? vue-office提供包支持
在浩瀚的Vue生态中,vue-office犹如一颗璀璨的星辰,以其独特的魅力照亮了开发者处理多种文件格式的预览之路。这款精心打造的Vue组件库,不仅拥抱了Vue2的经典,也紧密跟随Vue3的步伐,展现了卓越的技术前瞻性和兼容性。它…...

PostgreSQL16安装Mac(brew)
问题 最近需要从MySQL切换到PostgreSQL。我得在本地准备一个PostgreSQL。 步骤 使用brew安装postgresql16: arch -arm64 brew install postgresql16启动postgresql16: brew services start postgresql16配置postgresql环境变量,打开环境变量文件: …...
【语音识别算法】深度学习语音识别算法与传统语音识别算法的区别、对比及联系
深度学习语音识别算法与传统语音识别算法在理论基础、实现方式、性能表现等方面存在显著区别,同时也有一些联系。下面将从几个方面详细比较这两种方法,并给出应用实例和代码示例。 一、理论基础与实现方式 1.传统语音识别算法: 特征提取&a…...

图片批量重命名bat,一个脚本快速搞定图片批量重命名
BAT 批处理 是一种在 Microsoft Windows 操作系统中使用的脚本语言,用于自动执行一系列预定义的命令或任务。这些命令集合通常存储在一个文本文件中,文件扩展名为 .bat 或 .cmd。批处理脚本可以包含简单的命令,如文件复制、移动、删除&#x…...

基于stm32单片机的智能手环的设计
摘 要 随着科技的飞速发展和人们生活水平的提高,健康与科技日益融合,智能可穿戴设备已成为现代人生活中不可或缺的一部分。智能手环,作为一种便携、实用且功能丰富的可穿戴设备,受到越来越多用户的喜爱。它不仅能够实时监测用户的…...

雷池WAF动态防护功能初体验
一、 介绍 大名鼎鼎的雷池WAF最近新上了个名为 动态防护 的功能 所谓动态防护,是在用户浏览到的网页内容不变的情况下,将网页赋予动态特性,即使是静态页面,也会具有动态的随机性。 说白了就是给你网站的 html 和 js 代码加上加密…...

持安科技CEO何艺荣获中国信通院2023-2024年度标准卓越贡献奖
近日,由中国信息通信研究院、中国通信标准化协会承办的“全球数字经济大会—云和软件安全论坛”暨“2024第二届SecGo云和软件安全大会”胜利召开,零信任办公安全技术创新企业持安科技创始人兼CEO何艺获评为2023-2024年度零信任领域标准卓越贡献者。 由中…...

gitee上传和下载idea项目的流程
环境:idea2022 一、上传项目 1、在gitee中新建一个仓库。 2、打开所要上传的项目的文件夹,点击Git Bash,生成.git文件夹。 3、在idea中打开所要上传的项目,在控制台的Terminal菜单中,输入git add . (注意…...

【Numpy】np.loadtxt 读取单行数据时报错。(零维数组)
np.loadtxt 读取单行数据时遇到了报错 代码: import numpy as nplabelPath"./name.names" names np.loadtxt(labelPath, dtypestr)print(names[0])names中的数据: 报错: IndexError: too many indices for array: array is 0-…...

Unity之OpenXR+XR Interaction Toolkit实现 Gaze眼部追踪
使用 Unity OpenXR 实现Gaze眼部追踪 在虚拟现实(VR)和增强现实(AR)应用中,眼动追踪是一项强大而受欢迎的技术。它可以让开发者更好地理解用户的注意力和行为,并创造出更加沉浸和智能的体验。在本文中,我们将探讨如何使用 Unity OpenXR 实现Gaze眼部追踪功能。 Unity …...
自然语言处理(NLP)与大语言模型(LLM) 主要差异
一、简述 NLP 和 LLM 技术是大规模分析和生成人类语言的核心。随着它们的日益普及,区分 LLM 与 NLP 变得越来越重要。 NLP 包含一套用于理解、操纵和生成人类语言的算法。自 20 世纪 50 年代诞生以来,NLP 已发展到分析文本关系的阶段。它使用词性标注、命…...

智能车载防窒息系统设计
摘要 随着汽车行业的快速发展,车辆安全问题越来越受到人们的关注。其中,车载防窒息系统是一项重要的安全设备。本论文基于STM32单片机,设计了一种智能车载防窒息系统。该系统主要包括氧气浓度检测模块、温湿度检测模块、声音检测模块、光线检…...

硅纪元视角 | 电信公司出招!AI机器人全面反击AI诈骗电话
在数字化浪潮的推动下,人工智能(AI)正成为塑造未来的关键力量。硅纪元视角栏目紧跟AI科技的最新发展,捕捉行业动态;提供深入的新闻解读,助您洞悉技术背后的逻辑;汇聚行业专家的见解,…...
Java爬虫翻页
编写一个Java爬虫以进行翻页通常涉及到使用HTTP客户端(如Apache HttpClient或OkHttp)来发送请求,解析HTML页面(如使用Jsoup库),以及处理分页逻辑(如通过URL参数或页面内的链接进行翻页ÿ…...
.net6 当连接用户的shell断掉后,dotnet会自动关闭,达不到长期运行的效果。.NET 进程守护
1、/etc/systemd/system/ 目录下创建service文件 如:/etc/systemd/system/testDemoSer.service 2、文件内容示例: [Unit] DescriptiontestDemoSer running on CentOS [Service] WorkingDirectory/usr/project/iis Typesimple Userroot Grouproot Exec…...

02 源码编译构建LAMP
目录 2.1Apache 网站服务基础 2.1.1Apache 简介 1. Apache 的起源 2. Apache的主要特点 2.1.2安装httpd服务器 1. 准备工作 2.源码编译及安装 (1)解包 (2)配置 (3)编译及安装 3.确认安装结果 4.优化执行路径 5. 添加 httpd 系统服务 2.2 httpd服务器的基本配置 …...
【Axure视频教程】页面滚动距离函数
今天教大家在Axure里如何使用页面滚动距离函数,我们会先学习该函数的基础,然后通过滚动到指定位置后显示对应元件位案例来学习怎么应该这个函数。具体效果可以打开下方试看版视频观看。 注:函数教程主要是讲解函数的用法,不包含案例中元件的制…...

【Linux】:程序替换
朋友们、伙计们,我们又见面了,本期来给大家解读一下有关Linux程序替换的相关知识点,如果看完之后对你有一定的启发,那么请留下你的三连,祝大家心想事成! C 语 言 专 栏:C语言:从入门…...

使用ResizeObserver观察DOM元素的尺寸变化
文章目录 关于ResizeObserver示例代码示例代码结果如下所示echarts自适应容器div大小示例代码结果如下所示echarts自适应容器大小的方式二 关于ResizeObserver 关于这个Web API,可以看mdn的官网,ResizeObserver - Web API | MDN (mozilla.org)ÿ…...

前端使用Vue和Element实现可拖动弹框效果,且不影响底层元素操作(可拖拽的视频实时播放弹框,底层元素可以正常操作)
简述:在前端开发中,弹框和实时视频播放是常见的需求。这里来简单记录一下,如何使用Vue.js和Element UI实现一个可拖动的弹框,并在其中播放实时视频。同时,确保在拖拽弹框时,底层元素仍然可以操作。 一、项目…...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成:MAC头部frame bodyFCS,其中MAC是固定格式的,frame body是可变长度。 MAC头部有frame control,duration,address1,address2,addre…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说,传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度,通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包(Closure)?闭包有什么应用场景和潜在问题?2.解释 JavaScript 的作用域链(Scope Chain) 二、原型与继承3.原型链是什么?如何实现继承&a…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...
重启Eureka集群中的节点,对已经注册的服务有什么影响
先看答案,如果正确地操作,重启Eureka集群中的节点,对已经注册的服务影响非常小,甚至可以做到无感知。 但如果操作不当,可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

JVM 内存结构 详解
内存结构 运行时数据区: Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器: 线程私有,程序控制流的指示器,分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...

华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1: 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置: // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...
LOOI机器人的技术实现解析:从手势识别到边缘检测
LOOI机器人作为一款创新的AI硬件产品,通过将智能手机转变为具有情感交互能力的桌面机器人,展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家,我将全面解析LOOI的技术实现架构,特别是其手势识别、物体识别和环境…...