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

vue 使用vue-office预览word、excel,pdf同理

在此,我只使用了docx和excel, pdf我直接使用的iframe进行的展示就不作赘述了

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

如果是vue2.6版本或以下还需要额外安装 @vue/composition-api

npm install @vue/composition-api/
<template><div><inputid="file"ref="files"type="file"@change="changeHandle"multiple="multiple"/><!-- accept=".doc,.docx,.pdf,.ai,.psd,.xlsx,.xls" --><!-- <vue-office-docx :src="src" @rendered="renderingCompleted" /> --><vue-office-excelstyle="flex: 1; height: 0"v-show="src":src="src"@rendered="renderingCompleted"/></div>
</template><script>
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
//引入相关样式
import '@vue-office/docx/lib/index.css'
import VueOfficeExcel from "@vue-office/excel";
import '@vue-office/excel/lib/index.css'
export default {data() {return {src: "",};},components: {VueOfficeDocx,VueOfficeExcel,},mounted() {//赋值文档路径 此目录可以是http地址,也可以是本地文件//   const src = ref("./src/assets/docx/test.docx");},methods: {// 获取文件 这里是使用的 vue3.0 语法changeHandle(event) {console.log(event.target.files[0]);const file = event.target.files[0];let fileReader = new FileReader();fileReader.readAsArrayBuffer(file);fileReader.onload = () => {this.src = fileReader.result;};// const blob = new Blob([file], { type: "application/pdf;charset=utf-8" });// const blob = new Blob([file], { type: file.type });// this.src = window.URL.createObjectURL(blob); //这里是通过blob拿到urlconsole.log("src--", this.src);},renderingCompleted() {console.log("渲染完成");},},
};
</script><style>
</style>

参考:
1、vue + vue-office 实现多种文件(docx、excel、pdf)的预览
2、vue 预览word、excel、pdf文档 vue-office(VueOfficeDocx、VueOfficeExcel、VueOfficePdf)
3、vue 实现 word/excel/ppt/pdf 等文件格式预览操作
4、npm官网解释vue-office

相关文章:

vue 使用vue-office预览word、excel,pdf同理

在此&#xff0c;我只使用了docx和excel&#xff0c; pdf我直接使用的iframe进行的展示就不作赘述了 //docx文档预览组件 npm install vue-office/docx//excel文档预览组件 npm install vue-office/excel//pdf文档预览组件 npm install vue-office/pdf如果是vue2.6版本或以下还…...

【Spring Boot 源码学习】RedisAutoConfiguration 详解

Spring Boot 源码学习系列 RedisAutoConfiguration 详解 引言往期内容主要内容1. Spring Data Redis2. RedisAutoConfiguration2.1 加载自动配置组件2.2 过滤自动配置组件2.2.1 涉及注解2.2.2 redisTemplate 方法2.2.3 stringRedisTemplate 方法 总结 引言 上篇博文&#xff0…...

Linux中如何进行粘贴复制

因为CTRLC在Linux中具有特定的含义:终止当前操作 xshell提供了CTRLinsert(复制)/shiftinsert(粘贴) 上述快捷键在Windows中依旧支持,...

多输入多输出 | Matlab实现k-means-LSTM(k均值聚类结合长短期记忆神经网络)多输入多输出组合预测

多输入多输出 | Matlab实现k-means-LSTM&#xff08;k均值聚类结合长短期记忆神经网络&#xff09;多输入多输出组合预测 目录 多输入多输出 | Matlab实现k-means-LSTM&#xff08;k均值聚类结合长短期记忆神经网络&#xff09;多输入多输出组合预测预测效果基本描述程序设计参…...

学习笔记3——JVM基础知识

学习笔记系列开头惯例发布一些寻亲消息 链接&#xff1a;https://baobeihuijia.com/bbhj/contents/3/196593.html JVM&#xff08;Write Once&#xff0c;Run Anywhere&#xff09; 以下是一些学习时有用到的资料&#xff0c;只学习了JVM的基础知识&#xff0c;对JVM整体进…...

图像处理:图片二值化学习,以及代码中如何实现

目录 1、了解下图片二值化的含义 2、进行图像二值化处理的方法 3、如何选择合适的阈值进行二值化 4、实现图片二值化&#xff08;代码&#xff09; &#xff08;1&#xff09;是使用C和OpenCV库实现&#xff1a; &#xff08;2&#xff09;纯C代码实现&#xff0c;不要借…...

如果你点击RabbitMQ Service - start了,但http://localhost:15672/#/还是访问不了,那么请看这篇博客!

RabbitMQ 服务启动失败问题小结&#xff08;Windows环境&#xff09;_rabbitmq启动不了-CSDN博客...

Shell 脚本学习 day01

release node v1 初始版本 #定义备份目录#当前时间#检查备份目录是否存在&#xff0c;不存在需要创建# 查找并备份 .xxx 文件# 提取文件名&#xff08;不包含路径部分&#xff09;# 构建备份文件名# 将查出来的.xxx文件拷贝到备份目录#!/bin/bash # context 备份根目录下所有.…...

esp32 rust linux

官方文档&#xff1a;https://esp-rs.github.io/book/introduction.html 安装 rust curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh 工具 risc&#xff1a; rustup toolchain install nightly --component rust-src # nightly 支持 riscv或使用安装工具同时…...

一文了解Elasticsearch

数据分类 数据按数据结构分类主要有三种&#xff1a;结构化数据、半结构化数据和非结构化数据。 结构化数据 结构化数据具有明确定义数据模型和格式的数据类型。 特点&#xff1a; 数据具有固定的结构和模式。 数据项明确定义数据类型和长度。 适合用于数据查询、过滤和分…...

一篇文章认识【性能测试】

一、 性能测试术语解释 1. 响应时间 响应时间即从应用系统发出请求开始&#xff0c;到客户端接收到最后一个字节数据为止所消耗的时间。响应时间按软件的特点再可以细分&#xff0c;如对于一个 C/S 软件的响应时间可以细分为网络传输时间、应用服务器处理时间、数据库服务器…...

linux环境mysql安装配置踩坑

背景&#xff1a; 最近公司项目希望改造工作流ACTIVITI5.x的源码框架支持大数据量&#xff08;历史表单表数据达到10亿&#xff09;&#xff0c; 方案暂定为 1.使用动态数据源 2.将工作流归档历史数据数据保存到一个库中这里定义为读库&#xff0c; 3.在办办件的数据单独一个库…...

相关性网络图 | 热图中添加显著性

一边学习&#xff0c;一边总结&#xff0c;一边分享&#xff01; 本期教程 写在前面 此图是一位同学看到后&#xff0c;想出的一期教程。 最近&#xff0c;自己的事情比较多&#xff0c;会无暇顾及社群和公众号教程。 1 安装和加载相关的R包 library(ggraph) library(tidy…...

cocosCreator 之 微信小游戏授权设置和调用wxAPI获取用户信息

版本&#xff1a; 3.8.0 语言&#xff1a; TypeScript 环境&#xff1a; Mac 官方文档&#xff1a; 微信官方文档 - 开放能力 微信 API 小游戏环境 在cocosCreator的3.x版本项目开发中&#xff0c;TypeScript最终会被转换为JavaScript语言。 JavaScript的运行时调用的API…...

element ui el-table表格纵向横向滚动条去除并隐藏空白占位列

需求 当table内容列过多时&#xff0c;可通过height属性设置table高度以固定table高度、固定表头&#xff0c;使table内容可以滚动 现在需求是右侧滚动条不好看&#xff0c;需要去除滚动条&#xff0c;并隐藏滚动条所占列的位置 // ----------修改elementui表格的默认样式-…...

防止python进程重复执行

前言 通过保存的进程pid查询上次执行的进程是否退出,决定是否启动新的python进程 代码 pidOption.py import os import psutil pidPath = "saveFile.pid"#写入进程号 def writePid():pid = str(os.getpid())f = open(pidPath, w)f.write(pid...

LV.12 D13 C工程与寄存器封装 学习笔记

一、C语言工程简介 把模板在linux解压出来 代码写在interface.c就可以了。 map.lds是链接脚本文件&#xff08;负责代码的排布&#xff09; include中是头文件&#xff0c;src中是写好的源代码 start.s是启动代码&#xff0c;在interface.c之前运行&#xff0c;把cpu和栈做一…...

Java SE 学习笔记(十九)—— XML、设计模式

目录 1 XML1.1 XML 概述1.2 XML 语法规则1.3 XML 文档约束&#xff08;了解&#xff09;1.3.1 DTD 约束1.3.2 schema 约束 2 XML 解析2.1 XML 解析概述2.2 Dom4J 解析 XML 文件2.3 XML 解析案例 3 XML 检索4 设计模式4.1 工厂模式4.2 装饰模式 1 XML 在有些业务场景下&#xff…...

grafana InfluxDB returned error: error reading influxDB 400错误解决

问题&#xff1a; 如图提示错误解决 确认自己的docker容器是否配置了以下3个字段 DOCKER_INFLUXDB_INIT_USERNAMExxx DOCKER_INFLUXDB_INIT_PASSWORDyyy DOCKER_INFLUXDB_INIT_ADMIN_TOKENzzz 如果有&#xff0c;在grafana中需要添加header配置Header: Authorization , Value…...

【LeetCode:150. 逆波兰表达式求值 | 栈】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

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

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