当前位置: 首页 > news >正文

vue-office 支持多种文件(docx、excel、pdf)预览的vue组件库

一、文档链接

https://gitcode.com/mirrors/501351981/vue-office/overview?utm_source=csdn_github_accelerator&isLogin=1

二、安装

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

使用示例

文档预览场景大致可以分为两种:

  1. 有文档网络地址,比如 https://***.docx
  2. 文件上传时预览,此时可以获取文件的ArrayBuffer或Blob

.docx文件预览
使用网络地址预览

<template><vue-office-docx :src="docx"style="height: 100vh;"@rendered="rendered"/>
</template><script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'export default {components:{VueOfficeDocx},data(){return {docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址,可以是相对地址}},methods:{rendered(){console.log("渲染完成")}}
}
</script>

上传文件预览
读取文件的ArrayBuffer

<template><div><input type="file" @change="changeHandle"/><vue-office-docx :src="src"/></div>
</template><script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'export default {components: {VueOfficeDocx},data(){return {src: ''}},methods:{changeHandle(event){let file = event.target.files[0]let fileReader = new FileReader()fileReader.readAsArrayBuffer(file)fileReader.onload =  () => {this.src = fileReader.result}}}
}
</script>

二进制文件预览
如果后端给的不是CDN地址,而是一些POST接口,该接口返回二进制流,则可以调用接口获取文件的ArrayBuffer数据,传递给src属性。

<template><vue-office-docx :src="docx"style="height: 100vh;"@rendered="rendered"/>
</template><script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'export default {components:{VueOfficeDocx},data(){return {docx: '' }}, mounted(){fetch('你的API文件地址', {method: 'post'}).then(res=>{//读取文件的arrayBufferres.arrayBuffer().then(res=>{this.docx = res})})},methods:{rendered(){console.log("渲染完成")}}
}
</script>

excel文件预览
通过网络地址预览示例如下,通过文件ArrayBuffer预览和上面docx的使用方式一致。

<template><vue-office-excel:src="excel"style="height: 100vh;"@rendered="renderedHandler"@error="errorHandler"/>
</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: {renderedHandler() {console.log("渲染完成")},errorHandler() {console.log("渲染失败")}}
}
</script>

pdf文件预览
通过网络地址预览示例如下,通过文件ArrayBuffer预览和上面docx的使用方式一致。

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

复制文本

 handleCopy() {const content = document.getElementById('commitment-content')// 表示一个包含节点与文本节点的一部分的文档片段const range = document.createRange()// 设置文档片段range.selectNodeContents(content)// console.log(selection)// 表示用户选择的文本范围或光标的当前位置const selection = window.getSelection()// 清空选中内容selection.removeAllRanges()// 将文档片段设置为选中内容selection.addRange(range)try {document.execCommand('copy')} catch {} finally {selection.removeAllRanges()}}

相关文章:

vue-office 支持多种文件(docx、excel、pdf)预览的vue组件库

一、文档链接 https://gitcode.com/mirrors/501351981/vue-office/overview?utm_sourcecsdn_github_accelerator&isLogin1 二、安装 #docx文档预览组件 npm install vue-office/docx vue-demi0.13.11#excel文档预览组件 npm install vue-office/excel vue-demi0.13.11#…...

如何使用GaussDB创建脱敏策略(MASKING POLICY)

目录 一、前言 二、GaussDB中的脱敏策略 1、数据脱敏的定义 2、创建脱敏策略的语法说明 三、在GaussDB中如何创建数据脱敏策略(示例) 1、创建脱敏策略的一般步骤 2、GaussDB数据库中创建脱敏策略的完整示例 1&#xff09;开启安全策略开关&#xff0c;以初识用户omm登录…...

【Golang map并发报错】panic: assignment to entry in nil map

go并发写map[string]interface{}数据的时候&#xff0c;报错&#xff1a;panic: assignment to entry in nil map 多个key同时操作一个map时&#xff0c;如&#xff1a; test[key1] 1 test[key2] "a" test[key3] true 就会遇到并发nil值报错&#xff0c;什么…...

【GO语言依赖】Go语言依赖管理简述

在运行环境中&#xff0c;遭遇报错&#xff0c;显示找不到函数 经过研究后发现需要进行依赖管理&#xff0c;进行如下操作后解决&#xff1a; 起源 最早的时候&#xff0c;Go所依赖的所有的第三方库都放在GOPATH这个目录下面。这就导致了同一个库只能保存一个版本的代码。如…...

论文阅读记录SuMa SuMa++

首先是关于SuMa的阅读&#xff0c;SuMa是一个完整的激光SLAM框架&#xff0c;核心在于“基于面元(surfel)”的过程&#xff0c;利用3d点云转换出来的深度图和法向量图来作为输入进行SLAM的过程&#xff0c;此外还改进了后端回环检测的过程&#xff0c;利用提出的面元的概念和使…...

性能分析与调优: Linux 内存观测工具

目录 一、实验 1.环境 2.vmstat 3.PSI 4.swapon 5.sar 6.slabtop 7.numstat 8.ps 9.top 10.pmap 11.perf 12.bpftrace 二、问题 1.接口读写报错 2.slabtop如何安装 3.numactl如何安装 4.numad启动服务与关闭NUMA 5. perf如何安装 6. kernel-lt-doc与kern…...

【ARM 嵌入式 编译系列 3.4 -- 查看所依赖库文件的路径 详细介绍】

文章目录 问题背景库文件路径查看库文件路径信息打印显示连接标准库不使用标准库 libgcc.a问题背景 在自己构建的 Makefle系统中对 cortex-m33 代码编译时,在链接阶段总是报出下面问题 ... arm-none-eabi-ld: cannot find libgcc.a: No such file or directory arm-none-eab…...

分布式锁3: zk实现分布式锁3 使用临时顺序节点+watch监听实现阻塞锁

一 zk实现分布式锁 1.1 使用临时顺序节点 的问题 接上一篇文章&#xff0c;每个请求要想正常的执行完成&#xff0c;最终都是要创建节点&#xff0c;如果能够避免争抢必然可以提高性能。这里借助于zk的临时序列化节点&#xff0c;实现分布式锁 1. 主要修改了构造方法和lock方…...

google drive api

1.创建oauth2 json 文件 https://developers.google.com/drive/api/quickstart/pythoncchttps://developers.google.com/drive/api/quickstart/python这里要注意quickstart的code会经常更新&#xff0c;有可能之前的版本不能用了 比方说下面这个包 from google.oauth2.crede…...

3_代理模式(动态代理JDK原生和CGLib)

一.代理模式 1.概念 代理模式(Proxy Pattern )是指为其他对象提供一种代理&#xff0c;以控制对这个对象的访问&#xff0c;属于结构型模式。 在某些情况下&#xff0c;一个对象不适合或者不能直接引用另一个对象&#xff0c;而代理对象可以在客户端和目标对象之间起到中介的…...

Linux的权限(1)

目录 操作系统的"外壳"程序 外壳程序是什么&#xff1f; 为什么存在外壳程序&#xff1f; 外壳程序怎么运行操作&#xff1f; 权限 什么是权限&#xff1f; 权限的本质&#xff1f; Linux中的&#xff08;人&#xff09;用户权限&#xff1f; su和su -的区别…...

数据安全保障的具体措施有哪些

随着信息化时代的到来&#xff0c;数据已经成为企业和社会发展的重要资产。然而&#xff0c;数据安全问题也日益突出&#xff0c;如何保障数据的安全性、完整性和可用性成为了亟待解决的问题。以下将详细探讨数据安全保障的各个方面&#xff0c;以期为企业和社会提供更好的数据…...

浅谈标签及应用场景

一、标签的定义 标签是根据业务场景的需求&#xff0c;通过对目标对象&#xff08;包含静态、动态特性&#xff09;&#xff0c;运用抽象、归纳、推理等算法得到的高度精炼的特征标识&#xff0c;用于差异化管理与决策。标签由标签名称和标签值组成&#xff0c;打在目标对象上…...

Linux动态分配IP与正向解析DNS

目录 一、DHCP分配 1. 动态分配 1.1 服务端服务安装 1.2 修改服务端dhcp配置 1.3 修改客户端dhcp&#xff0c;重启查询网卡信息 2. 根据mac固定分配 2.1 修改服务器端dhcp服务配置 2.2 客户端自动获取&#xff0c;查看网卡信息 二、时间同步 1. 手动同步 2. 自动同…...

pyspark 使用udf 进行预测,发现只起了一个计算节点

PySpark UDF 只使用一个计算节点的问题 原因分析 默认的并行度设置 PySpark在执行UDF&#xff08;用户定义函数&#xff09;时&#xff0c;默认可能不会利用所有可用的计算节点。这是因为UDF通常在单个节点上执行&#xff0c;并且如果没有正确设置分区&#xff0c;可能会导致数…...

mysql触发器的简单使用

mysql触发器 触发器是一个特殊的存储过程&#xff0c;在事件delete、insert、update发生时自动执行一条或多条SQL语句&#xff08;执行多条SQL语句需要用begin、end 包裹起来&#xff09; 创建触发器 创建触发器的四大必要条件 唯一的触发器名称触发器关联的表触发器响应的…...

全志T113开发板Qt远程调试

1引言 通常情况下工程师在调试Qt程序时&#xff0c;需要频繁制作镜像烧录到核心板来测试Qt程序是否完善&#xff0c;这样的操作既费时又费力。这时我们可以通过QtCreator设备功能&#xff0c;定义设备后&#xff0c;在x86_64虚拟机上交叉编译qt程序&#xff0c;将程序远程部署到…...

学习使用php、js脚本关闭当前页面窗口的方法

学习使用php、js脚本关闭当前页面窗口的方法 前言方法一&#xff1a;使用JavaScript代码方法二&#xff1a;通过http头文件来实现方法三&#xff1a;使用服务器端脚本来实现 前言 在开发web应用程序时&#xff0c;我们通常需要在不同的网页之间进行导航。通常情况下&#xff0…...

python 人脸检测与人脸识别

安装库文件: pip install dlib face_recognition import dlib import face_recognition import cv2 from PIL import Image, ImageDraw# 判断运行环境 cpu or gpu def check_env():print(dlib.DLIB_USE_CUDA)print(dlib.cuda.get_num_devices())# 判断人脸在图片当中的位置 def…...

RT-Thread: ulog 日志 讲解和使用

说明&#xff1a;记录 RT-Thread: ulog 日志功能和使用流程。 官网资料链接&#xff1a; https://docs.rt-thread.org/#/rt-thread-version/rt-thread-standard/programming-manual/ulog/ulog 1.ulog 简介 日志的定义&#xff1a;日志是将软件运行的状态、过程等信息&#x…...

健康管理APP的“专业度悖论“:当8亿用户遇上AI幻觉

——2026年数字医疗市场的信任构建与分化艾瑞咨询2026年数据显示&#xff0c;中国移动医疗用户规模突破8亿&#xff0c;市场规模达1.5万亿元。但另一组数据更值得玩味&#xff1a;用户人均单日使用时长8.1分钟&#xff0c;深夜10点至凌晨2点的咨询量占比23%&#xff0c;而整体付…...

掌握 Skills 技术引爆 Agent 开发!像装 App 一样让 AI 变“超人”!

本文介绍了 AI Skills 的概念&#xff0c;将其描述为可像人类一样动态加载和使用的“能力模块”&#xff0c;用于解决传统 Agent 开发的痛点&#xff0c;如重复造轮子、能力边界模糊和难以规模化。文章详细阐述了 Skills 的核心特征&#xff08;模块化、可组合、热插拔、标准化…...

5. 大模型核心基础概念(三):模型量化、蒸馏、微调的核心逻辑(通俗解读)

001、开篇:为什么大模型需要“瘦身”与“调教”?——量化、蒸馏、微调的必要性 上周在产线调试一个端侧部署的视觉模型,设备跑着跑着就内存溢出了。同事盯着日志问我:“模型在服务器上明明跑得好好的,怎么一到嵌入式板子上就崩了?” 我看了眼那 2GB 的 RAM 和板载的 8GB …...

SpeedyBee F405 V4 55A飞塔到手后,这5个关键步骤和3个常见坑点你必须知道

SpeedyBee F405 V4 55A飞塔实战指南&#xff1a;从开箱到首飞的深度解析 穿越机玩家拿到新飞塔的兴奋感&#xff0c;就像赛车手拿到新引擎——但这份喜悦往往伴随着"如何正确启动"的焦虑。SpeedyBee F405 V4 55A飞塔作为当前中高端穿越机的热门选择&#xff0c;其性能…...

城通网盘限速破解:ctfileGet让下载效率提升10倍的技术革命

城通网盘限速破解&#xff1a;ctfileGet让下载效率提升10倍的技术革命 【免费下载链接】ctfileGet 获取城通网盘一次性直连地址 项目地址: https://gitcode.com/gh_mirrors/ct/ctfileGet 在数字化协作日益频繁的今天&#xff0c;网盘已成为信息传递的重要枢纽。然而城通…...

SEO优化建站费用是多少_SEO建站平台有哪些_哪个比较好

SEO优化建站费用是多少&#xff1f;SEO建站平台有哪些&#xff1f;哪个比较好&#xff1f; 在当今数字化时代&#xff0c;建立一个成功的网站不仅仅是创建一个静态的信息展示平台&#xff0c;更是要通过SEO优化提升网站的可见性和流量。SEO优化建站费用是多少呢&#xff1f;SEO…...

IntelliJ IDEA 2026.1 版本发布,多维度升级助力开发体验

AI 能力拓展&#xff1a;内置多 Agent 提升开发效率IntelliJ IDEA 2026.1 版本在 AI 方面有显著升级&#xff0c;内置支持更多 AI agent&#xff0c;如 Codex、Cursor 以及任何兼容 ACP 的 agent。ACP Registry 实现了一键浏览和安装 AI agent&#xff0c;方便开发者快速引入所…...

tao-8k部署避坑指南:Xinference日志排查、WebUI访问与调用验证

tao-8k部署避坑指南&#xff1a;Xinference日志排查、WebUI访问与调用验证 1. 环境准备与快速部署 在开始部署tao-8k模型之前&#xff0c;我们先来了解一下这个模型的基本情况。tao-8k是由Hugging Face开发者amu研发并开源的专业文本嵌入模型&#xff0c;它能够将文本转换为高…...

SPIRAN ART SUMMONER图像生成前端展示效果优化技巧

SPIRAN ART SUMMONER图像生成前端展示效果优化技巧 1. 引言 你有没有遇到过这种情况&#xff1a;用SPIRAN ART SUMMONER生成了超棒的图片&#xff0c;但在网站上展示时却加载缓慢&#xff0c;用户还没看到效果就流失了&#xff1f;或者图片显示不完整&#xff0c;影响了整体的…...

从智能门铃到工业质检:拆解5个嵌入式AI落地案例,看模型压缩和硬件选型怎么选

从智能门铃到工业质检&#xff1a;5个嵌入式AI实战案例与选型策略 智能门铃的摄像头突然捕捉到一张陌生面孔&#xff0c;300毫秒内完成本地人脸比对并推送到主人手机——这背后是嵌入式AI在消费电子领域的典型应用。当算法工程师面对瑞芯微RK3588和地平线旭日X3两颗芯片的选型表…...