Vue3实现word预览

1. 安装依赖
pnpm install @vue-office/docx
2. 页面导入
// 导入依赖
import VueOfficeDocx from "@vue-office/docx";
// 导入样式文件
import "@vue-office/docx/lib/index.css";
3. 使用(这里使用是文件上传方式)可以直接是在线地址
<script setup>
import VueOfficeDocx from "@vue-office/docx";
import "@vue-office/docx/lib/index.css";
import { ref } from "vue";
// 也可以直接是在线地址
// let docxSrc = ref("https://github.com/vue-office/vue-office/raw/main/examples/public/test.docx");
let docxSrc = ref("");
let handleChange = (e) => {let files = e.target.files[0];let reader = new FileReader();reader.readAsArrayBuffer(files);reader.onload = function () {docxSrc.value = reader.result;};
};
</script><template><div><input type="file" @change="handleChange" /><VueOfficeDocx :src="docxSrc" /></div>
</template><style scoped></style>

这样就可以实现word文件预览了 是不是很简单

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

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

相关文章

【LeetCode:35. 搜索插入位置 + 二分】

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

Linux systemd 服务启动失败Main process exited, code=exited, status=203/EXEC

文章目录 问题描述解决思路及方法排除方向一&#xff1a;nohup排除方向二&#xff1a;使用绝对路径而不是相对路径 问题描述 命令&#xff1a; java -Xms1024m -Xmx1024m -jar /usr/local/java/bin/mashang/app.jar --server.port8532 ----spring.profiles.activetest是可以直…

网络安全名词解释操作系统

1. 名词解释 渗透测试常用专业术语 1. POC&#xff0c;EXP&#xff0c;Payload与Shellcode等 POC:全称“Proof of Concept”&#xff0c;中文“概念验证”&#xff0c;常指验证某个概念或理论是否可行的过程或实验&#xff08;代码&#xff09;。 EXP:全称“Exploit”&#x…

【Vue】重新理解Vue-Router中的两种路由模式

历史小剧场 唐代实在太高太强了&#xff0c;他们忽忘了民族界限&#xff0c;他们不懂害怕外国人&#xff0c;不懂提防外国人&#xff0c;大量使用外国人当兵作将&#xff0c;结果才弄得不可收拾。于是唐代的府兵一变而成为“藩镇”&#xff0c;军阀割据&#xff0c;胡族临制。-…

uni-app:踩坑路---scroll-view内使用fixed定位,无效的问题

前言&#xff1a; emmm&#xff0c;说起来这个问题整得还挺好笑的&#xff0c;本人在公司内&#xff0c;奋笔疾书写代码&#xff0c;愉快的提交测试的时候&#xff0c;测试跟我说&#xff0c;在苹果手机上你这个样式有bug&#xff0c;我倒是要看看&#xff0c;是什么bug。 安卓…

vscode 远程 Ubuntu 系统

1、在 Ubuntu 下检查 sshd 守护进程是否开启 ps -aux | grep sshd如果没有开启&#xff0c;请在 Ubuntu 下输入指令安装 sudo apt-get install openssh-server2、首先打开 Windows 下的 vscode&#xff0c;点击左下角图标打开远程窗口 3、打开远程窗口&#xff0c;选择“Con…

设计App的后端接口分类以及环境依赖包详情

目录 App的后端接口分类 1. 用户登录与注册 2. 设备初始化 3. 广告与推广 4. 应用配置与功能 5. 支付系统 6. 内容分发 7. 资源下载 8. 视频内容 9. 用户行为分析 10. 安全与合规 设计建议 基于Easyswoole&#xff0c;可以在系统中引入需要的一些常见依赖包&#…

《从C/C++到Java入门指南》- 18.面向对象编程基础

18.面向对象基础 前言 写到这里的时候&#xff0c;笔者的《Java从入门到精通》恰好到了&#xff0c;接下来的内容将会以这本书为主要资源进行学习。 类 成员变量 在 Java 中对象的属性称为成员变量&#xff0c;范围是整个类。 public class Book {private String name;pu…

【HZHY-AI300G智能盒试用连载体验】在华为IoTDA平台上建立设备

目录 华为IoTDA平台 注册IoTDA实例 创建产品 添加设备 本文首发于&#xff1a;【HZHY-AI300G智能盒试用连载体验】 智能工业互联网网关 - 北京合众恒跃科技有限公司 - 电子技术论坛 - 广受欢迎的专业电子论坛! 在上一篇博文中介绍了如何在HZHY-AI300G智能盒创建南向设备&a…

react中的context就是vue中的provide/inject吗?

在学习中我发现React 中的 Context 和 Vue 中的 Provide/Inject 类似&#xff0c;下面是讲解与区分。 React Context 作用 在组件树中共享数据&#xff0c;而无需通过逐层传递 props。 使用方法 创建 Context&#xff1a; const MyContext React.createContext(defaultVal…

前端特效动画魔法书:文字渐入效果实现,可做引导页面

前端特效动画魔法书&#xff1a;文字渐入效果实现&#xff0c;可做引导页面 简介 在网页设计的世界中&#xff0c;动画是吸引用户眼球的魔法。Anime.js&#xff0c;一个轻量级且功能强大的JavaScript动画库&#xff0c;是实现这一魔法的完美工具。本文将作为你的技术文档&…

【3D编程技巧】如何用四元数旋转矢量在相机空间进行光照计算

这里介绍一个小TIPS&#xff0c;很久没有这么有成就感了。我以前在学3D数学的时候&#xff0c;书上就有一句话&#xff0c;说你把矢量这些东西用久了&#xff0c;就应该形成一种“直觉”&#xff0c;仿佛这些东西就是你的左右手一样。而这次&#xff0c;我居然真的用“直觉”来…

【开源库学习】libodb库学习(三)

4 查询数据库 如果我们不知道我们正在寻找的对象的标识符&#xff0c;我们可以使用查询在数据库中搜索符合特定条件的对象。ODB查询功能是可选的&#xff0c;我们需要使用--generate-query ODB编译器选项显式请求生成必要的数据库支持代码。 ODB提供了一个灵活的查询API&#x…

Android 14 适配之— BluetoothAdapter、JobScheduler、 Tiles

1. BluetoothAdapter 改动&#xff1a; 在 BluetoothAdapter 中必须加入 BLUETOOTH_CONNECT 权限 Android 14&#xff08;API 级别 34&#xff09;或更高版本为目标的App&#xff0c;在调用函数 BluetoothAdapter getProfileConnectionState() 时&#xff0c;需要 BLUETOOTH_…

JAVA零基础小白自学日志——第二十天

文章目录 1.为什么我们需要抽象类2.抽象类3.我们一起来抽象&#xff08;有病&#xff0c;象也没招你&#xff09;[1].抽象方法[2].为什么我们先说抽象方法呢&#xff1f;[3].需要明确的 4.关于Object的题外话 今日提要&#xff1a;抽象类 你以为这几天看的内容都是多态&#xf…

复现Android中GridView的bug并解决

几年前的一个bug&#xff0c;GridView的item高度不一致。如下图&#xff1a; 复现bug的代码&#xff1a; import android.os.Bundle; import android.widget.BaseAdapter; import android.widget.GridView; import androidx.appcompat.app.AppCompatActivity; import java.uti…

麻省理工学院 - MIT - 线性代数学习笔记

学习视频地址 文章目录 1.01方程组的几何解释2.02矩阵消元3.03乘法和逆矩阵乘法逆 4.04矩阵A的LU分解5.05转置&#xff0c;置换&#xff0c;向量空间置换转置向量空间 6.06列空间和零空间7.07求解Ax0&#xff1a;主变量&#xff0c;特解 1.01方程组的几何解释 对于二元方程组&…

Scratch自制:《袁坤》游戏攻略

大家好&#xff01;我也是很久没有动静了&#xff0c;这次我又来了&#xff0c;并且还带来了一个用Scratch制作的游戏&#xff0c;大家还记得我很久以前用C制作的《袁坤》吗&#xff1f;&#xff08;详见C自制游戏《袁坤》1.2版本发布&#xff01;-CSDN博客&#xff09;这次它又…

种类并查集

最近玩的太嗨了&#xff0c;都忘了自己还有三篇博客还在拖更&#xff0c;也是今天一更到底好吧&#xff0c;边更新边写题&#xff0c;让看官老爷有更多的样题去联系 引入—— 在学这个之前&#xff0c;我相信各位应该已经接触过了并查集了吧&#xff0c;嗯&#xff1f;什么&a…

Kubernetes 1.24 版弃用 Dockershim 后如何迁移到 containerd 和 CRI-O

在本系列的上一篇文章中&#xff0c;我们讨论了什么是 CRI 和 OCI&#xff0c;Docker、containerd、CRI-O 之间的区别以及它们的架构等。最近&#xff0c;我们得知 Docker 即将从 kubernetes 中弃用&#xff01;&#xff08;查看 kubernetes 官方的这篇文章&#xff09;那么让我…