vue2 点击预览本地 word excle pdf 文件

安装

考虑到三个包加一起的话会比较大,所以拆成了三个包,需要哪个自行安装即可。

//docx文档预览组件
npm install @vue-office/docx//excel文档预览组件
npm install @vue-office/excel//pdf文档预览组件
npm install @vue-office/pdf

npm i --save @vue/composition-api@1.3.0

使用示例

docx文档的预览

<template><vue-office-docx :src="docx" @rendered="rendered"/>
</template><script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'export default {components:{VueOfficeDocx},data(){return {docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档地址}},methods:{rendered(){console.log("渲染完成")}}
}
</script>

excel文档预览

<template><vue-office-excel :src="excel" @rendered="rendered"/>
</template><script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'export default {components:{VueOfficeExcel},data(){return {excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址}},methods:{rendered(){console.log("渲染完成")}}
}
</script>

pdf文档预览

<template><vue-office-pdf :src="pdf" @rendered="rendered"/>
</template><script>
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'export default {components:{VueOfficePdf},data(){return {pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址}},methods:{rendered(){console.log("渲染完成")}}
}
</script>

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

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

相关文章

万界星空科技电机行业MES+商业电机行业开源MES+项目合作

要得出mes系统解决方案在机电行业的应用范围&#xff0c;我们先来看一下传统机电行业的管理难题&#xff1a; 1、 产品标准化程度较低&#xff0c;制造工艺复杂&#xff0c;生产周期较长&#xff0c;产品质量不稳定&#xff1b; 2、 自动化程度低&#xff0c;大多数工序以手工…

【linux】匿名管道|进程池

1.进程为什么要通信&#xff1f; 进程也是需要某种协同的&#xff0c;所以如何协同的前提条件(通信) 通信数据的类别&#xff1a; 1.通知就绪的 2.单纯的数据 3.控制相关的信息 2.进程如何通信&#xff1f; 进程间通信&#xff0c;成本会高一点 进程间通信的前提&#xff0c;先…

Git克隆项目到另一台服务器上详细操作

Git克隆项目到另一台服务器上详细操作 一 克隆原始仓库 首先&#xff0c;确保你从原始仓库克隆了所有分支。通常使用标准的 git clone 命令会拉取所有远程分支的历史&#xff0c;但只会在本地创建默认分支&#xff08;通常是 main 或 master&#xff09;。在克隆前&#xff0…

2024年最新 Windows\Linux 后台运行程序注解

一、前言 有时候需要在后台运行程序&#xff0c;查了查网上现有的程序有些运行不了&#xff0c;跑通了之后简单记录一下&#xff0c;为后面的同学躺一下雷 1、Linux 系统 Linux后台运行进程时&#xff0c;通常使用如下方法&#xff1a; &#xff08;1&#xff09;程序挂后台…

算法练习(2)——约瑟夫环和坐标公式的推导

看一下上面的牛客题。题目的意思是n个小朋友围成一个圆环&#xff0c;编号从0开始&#xff0c;数m个数时&#xff0c;让小朋友出列&#xff0c;然后出列小朋友的下一个位置为0&#xff0c;继续数m个数&#xff0c;然后小朋友出来&#xff0c;直到最后一个小朋友&#xff0c;然后…

union节省内存

联合体 一、联合体的优点二、联合体定义三、联合体的使用四、python 联合体的使用 一、联合体的优点 由于联合体里的变量共同占有一个空间&#xff0c;可以利用联合体达到节省内存空间的目的。 需要注意&#xff1a;同时只有一个成员可以得到这块内存的使用权(对该内存的读写)…

SVN小乌龟汉化问题

1.首先确认中文语言包和SVN版本需要一致&#xff08;点击右键 选择最后一个选项即可查看&#xff09; 官网链接 点击这个官网链接可以下载对应版本的中文包 2.下载好之后直接无脑下一步安装即可 3.如果还是没有中文&#xff0c;找到这个文件夹&#xff0c;把里面的内容全部删…

图解《图搜索算法》及代码实现

关注我&#xff0c;持续分享逻辑思维&管理思维&#xff1b; 可提供大厂面试辅导、及定制化求职/在职/管理/架构辅导&#xff1b; 有意找工作的同学&#xff0c;请参考博主的原创&#xff1a;《面试官心得--面试前应该如何准备》&#xff0c;《面试官心得--面试时如何进行自…

GPT与GAN结合生成图像——VQGAN原理解析

1、前言 这篇文章&#xff0c;我们讲VQ_GAN&#xff0c;这是一个将特征向量离散化的模型&#xff0c;其效果相当不错&#xff0c;搭配Transformer&#xff08;GPT&#xff09;或者CLIP使用&#xff0c;达到的效果在当时可谓是令人拍案叫绝&#xff01; 原论文&#xff1a;Tam…

政安晨:【Keras机器学习示例演绎】(十二)—— 用利用 MIRNet 增强弱光图像效果

目录 简介 下载 LOL 数据集 创建 TensorFlow 数据集 MIRNet 模型 选择性核特征融合

【视频异常检测】Open-Vocabulary Video Anomaly Detection 论文阅读

Open-Vocabulary Video Anomaly Detection 论文阅读 AbstractMethod3.1. Overall Framework3.2. Temporal Adapter Module3.3. Semantic Knowledge Injection Module3.4. Novel Anomaly Synthesis Module3.5. Objective Functions3.5.1 Training stage without pseudo anomaly …

Eureka详解

Eureka详解 一、Eureka概述 1. 什么是Eureka Eureka 是 Netflix 开发的一款基于 REST 的服务注册与发现组件&#xff0c;广泛应用于基于 Spring Cloud 构建的微服务架构中。作为服务治理的核心组件之一&#xff0c;Eureka 负责维护服务注册表&#xff0c;使得各个分布式服务…

网盘——查看文件

本文主要讲解文件操作过程中&#xff0c;查看文件如何实现&#xff0c;实现步骤如下&#xff1a; 1、实现步骤&#xff1a; A、首先客户端发送查看请求&#xff08;包含目录信息&#xff09; B、服务器将文件名字还有文件的类型发送给客户端&#xff08;只发送文件的名字&am…

Apace配置+http重定向到https

一、配置APache 打开apache安装目录下的 ssl.conf 配置以下内容 <VirtualHost *:443># General setup for the virtual host, inherited from global configuration #DocumentRoot "/var/www/html" ServerName www.pwx.com # 古籍检索系统 &#xff0c;重定向…

Linux2.6内核进程调度队列

目录 运行队列runqueue 活跃队列&过期队列 queue[140]&优先级&队列数组下标 bitmap[5]&O(1)调度算法 nr_active active指针和expired指针 O(1)调度算法之调度过程 本篇是Linux进程概念篇的最后一篇&#xff0c;Linux2.6内核是一个具体的/可行的/实际的存…

前端技巧——webgl快速上手

WebGL(Web Graphics Library)是一种在不需要使用插件的情况下在网页浏览器中使用的3D图形API。它是一种低级的、基于OpenGL ES的API,可以直接在网页浏览器的JavaScript中使用,用于创建和操作复杂的3D图形。 一、WebGL 的关键特点 无需插件:WebGL 完全内置于现代浏览器中…

【Node.js】03 —— HTTP 模块探索

&#x1f31f;Node.js之HTTP模块探索✨ &#x1f31f;引言 在网络编程中&#xff0c;HTTP协议无处不在。在Node.js的世界里&#xff0c;我们可以通过内置的http模块来轻松创建HTTP服务器和客户端&#xff0c;实现数据的接收和发送。今天就让我们一起打开这扇门&#xff0c;探索…

CentOS 7 常用命令大全

1.基础知识 1.1Linux系统文件结构 /bin 二进制文件,系统常规命令 /boot 系统启动分区,系统启动时读取的文件 /dev 设备文件 /etc 大多数配置文件 /home 普通用户的家目录 /lib 32位函数库 /lib64 64位库 /media 手动临时挂…

Fisher判别示例:鸢尾花(iris)数据(R)

先读取iris数据&#xff0c;再用程序包MASS&#xff08;记得要在使用MASS前下载好该程序包&#xff09;中的线性函数lda()作判别分析&#xff1a; data(iris) #读入数据 iris #展示数据 attach(iris) #用变量名绑定对应数据 library(MASS) #加载MASS程序包 ldlda(Species~…

Python打怪升级(4)

在计算机领域常常有说"合法"和"非法"指的是:是否合理&#xff0c;是否有效&#xff0c;并不是指触犯了法律。 random.randint(begin,end) 详细讲解一下这个random是指模板&#xff0c;也就是别人写好的代码直接来用&#xff0c;在Python当中&#xff0c;…