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

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

Linux中《基础IO》详细介绍

目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改&#xff0c;实现简单cat命令 输出信息到显示器&#xff0c;你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...