当前位置: 首页 > 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…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

C#学习第29天:表达式树(Expression Trees)

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

消防一体化安全管控平台:构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

WEB3全栈开发——面试专业技能点P7前端与链上集成

一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染&#xff08;SSR&#xff09;与静态网站生成&#xff08;SSG&#xff09; 框架&#xff0c;由 Vercel 开发。它简化了构建生产级 React 应用的过程&#xff0c;并内置了很多特性&#xff1a; ✅ 文件系…...

客户案例 | 短视频点播企业海外视频加速与成本优化:MediaPackage+Cloudfront 技术重构实践

01技术背景与业务挑战 某短视频点播企业深耕国内用户市场&#xff0c;但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大&#xff0c;传统架构已较难满足当前企业发展的需求&#xff0c;企业面临着三重挑战&#xff1a; ① 业务&#xff1a;国内用户访问海外服…...