想在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>


 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/42015.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

印尼网络安全治理能力观察

在全国国际机场的移民服务完全瘫痪 100 多个小时后&#xff0c;印尼政府承认其新成立的国家数据中心 (PDN) 遭受了网络攻击。 恶意 Lockbit 3.0 勒索软件加密了存储在中心的重要数据&#xff0c;其背后的黑客组织要求支付 800 万美元的赎金。 不幸的是&#xff0c;大多数数据…

递推平均滤波法(又称滑动平均滤波法)

递推平均滤波法(又称滑动平均滤波法) 递推平均滤波法:把连续取得的N个采样值看成一个队列,队列的长度固定为N,每次采样到一个新数据放入队尾,并扔掉原来队首的一次数据(先进先出原则),把队列中的N个数据进行算术平均运算,获得新的滤波结果。 优点: 对周期性干扰有良…

性能测试相关理解(一)

根据学习全栈测试博主的课程做的笔记 一、说明 若未特别说明&#xff0c;涉及术语都是jmeter来说&#xff0c;线程数&#xff0c;就是jmeter线程组中的线程数 二、软件性能是什么 1、用户关注&#xff1a;响应时间 2、业务/产品关注&#xff1a;响应时间、支持多少并发数、…

深入解析 androidx.databinding.Bindable 注解

在现代 Android 开发中&#xff0c;数据绑定 (Data Binding) 是一个非常重要的技术。它使得我们能够简化 UI 和业务逻辑之间的连接&#xff0c;从而提高代码的可读性和维护性。在数据绑定中&#xff0c;Bindable 注解是一个关键部分&#xff0c;它帮助我们实现双向数据绑定和自…

Apache Doris的分区与分桶原理解析

介绍 在 Apache Doris 中,“分区”和“分桶”是两种用于管理和优化数据的技术,分别解决不同的数据存储和查询优化问题。 在 Doris 中,数据都以表(Table)的形式进行逻辑上的描述。 Row & Column 一张表包括行(Row)和列(Column): Row:即用户的一行数据; Colu…

redis7新特性、源码解析

版本&#xff1a;第2位版本号为奇数是非稳定版&#xff0c;偶数才是稳定版本https://download.redis.io/releases/ redis7新特性 multi-AOF: 7之前的版本AOF只有一个文件&#xff0c;现在有多个处于同一目录的AOF文件RDB文件格式更新&#xff0c;不兼容老版本的RDB格式redis …

【车载开发系列】GIT安装详细教程

【车载开发系列】GIT安装详细教程 【车载开发系列】GIT安装详细教程 【车载开发系列】GIT安装详细教程一. GIT软件概念二. GIT安装步骤三. GIT安装确认三. GIT功能使用1&#xff09;Git Bash2&#xff09;Git CMD3&#xff09;Git FAQs4&#xff09;Git GUI 一. GIT软件概念 G…

数据库系统原理 | 查询作业1

整理自博主本科《数据库系统原理》专业课自己完成的实验课查询作业&#xff0c;以便各位学习数据库系统概论的小伙伴们参考、学习。 *文中若存在书写不合理的地方&#xff0c;欢迎各位斧正。 专业课本&#xff1a; ​ ———— 本次实验使用到的图形化工具&#xff1a;Heidisql…

云端AI大模型群体智慧后台架构思考

1 大模型的调研 1.1 主流的大模型 openai-chatgpt 阿里巴巴-通义千问 一个专门响应人类指令的大模型。我是效率助手&#xff0c;也是点子生成机&#xff0c;我服务于人类&#xff0c;致力于让生活更美好。 百度-文心一言&#xff08;千帆大模型&#xff09; 文心一言"…

MySQL基础篇(三)数据库的修改 删除 备份恢复 查看连接情况

对数据库的修改主要指的是修改数据库的字符集&#xff0c;校验规则。 将test1数据库字符集改为gbk。 数据库的删除&#xff1a; 执行完该数据库就不存在了&#xff0c;对应数据库文件夹被删除&#xff0c;级联删除&#xff0c;里面的数据表全部被删除。 注意&#xff1a;不要随…

浅识Jmeter与浅谈互联网公司高并发业务压测流程痛点

浅谈Jmeter 什么是Jmeter JMeter 是 Apache 软件基金会开发的一个开源软件&#xff0c;用于负载测试和性能测试。它被设计用来模拟多种请求到服务器、网络或对象&#xff0c;以测试其性能。JMeter 可以用于测试静态和动态资源&#xff0c;并且可以模拟各种协议的请求&#xf…

NDVI数据集提取植被覆盖度FVC

植被覆盖度FVC 植被覆盖度&#xff08;Foliage Vegetation Cover&#xff0c;FVC&#xff09;是指植被冠层覆盖地表的面积比例&#xff0c;通常用来描述一个区域内植被的茂密程度或生长状况。它是生态学、环境科学以及地理信息系统等领域的重要指标&#xff0c;对于理解地表能…

绝区叁--如何在移动设备上本地运行LLM

随着大型语言模型 (LLM)&#xff08;例如Llama 2和Llama 3&#xff09;不断突破人工智能的界限&#xff0c;它们正在改变我们与周围技术的互动方式。这些模型早已集成到我们的手机中&#xff0c;但到目前为止&#xff0c;它们理解和处理请求的能力还非常有限。然而&#xff0c;…

手写实现一个ORM框架

手写实现一个ORM框架 什么是ORM框架、ORM框架的作用效果演示框架设计代码细节SqlBuilderSqlExecutorStatementHandlerParameterHandlerResultSetHandler逆序生成实体类 大家好&#xff0c;本人最近写了一个ORM框架&#xff0c;想在这里分享给大家&#xff0c;让大家来学习学习。…

leetcode力扣_排序问题

215.数组中的第K个最大元素 鉴于已经将之前学的排序算法忘得差不多了&#xff0c;只会一个冒泡排序法了&#xff0c;就写了一个冒牌排序法&#xff0c;将给的数组按照降序排列&#xff0c;然后取nums[k-1]就是题目要求的&#xff0c;但是提交之后对于有的示例显示”超出时间限制…

JavaWeb开发之环境准备-大合集

本文博客地址 JavaWeb开发 || 环境准备 1. 前言2. JDK8安装2.1 下载地址2.2 安装配置图示2.2.1 JDK安装2.2.2 配置系统环境变量 3. Maven安装3.1 Maven下载3.2 Maven解压及系统变量配置 4. Tomcat安装4.1 Tomcat下载4.2 Tomcat解压及系统变量配置 5. Redis安装5.1 Redis下载5.…

记录一次麒麟V10 安装sysbench各种报错(关于MySQL)处理过程

sysbench手工下载&#xff1a; https://github.com/akopytov/sysbench 下载.zip文件&#xff0c;上传到服务器上 解压、安装&#xff1a; unzip sysbench-master.zipcd sysbench-master/sh autogen.sh./configure 报错&#xff1a;没有mysql驱动 configure: error: mysql_c…

Marin说PCB之CAM350的软件使用知多少?

今天上海的气温那叫一个高啊&#xff0c;温度都达到了39左右了都&#xff0c;我都严重怀疑我不是在魔都上班而是在火焰山板砖去了。这么燥热的天气真的是严重影响了小编我的工作效率&#xff0c;没有心情工作啊&#xff0c;要去泳池避避暑&#xff0c;冲个凉也行啊。这种天气只…

WebKit 的结构、工作流程、技术细节和高级特性

WebKit 是一个开源的浏览器引擎&#xff0c;主要负责解析和渲染网页&#xff0c;执行 JavaScript 代码以及处理用户交互。它最初由苹果公司开发&#xff0c;用于 Safari 浏览器&#xff0c;但后来 Google 和其他公司也基于 WebKit 开发了自己的浏览器&#xff0c;如早期版本的 …

SQL Server时间转换

第一种&#xff1a;format --转化成年月日 select format( GETDATE(),yyyy-MM-dd) --转化年月日&#xff0c;时分秒&#xff0c;这里的HH指24小时的&#xff0c;hh是12小时的 select format( GETDATE(),yyyy-MM-dd HH:mm:ss) --转化成时分秒的&#xff0c;这里就不一样的&…