Vue3借助vue-office插件实现word预览-程序员宅基地
技术标签： 前端 vue.js word javascript ecmascript
之前我也介绍过这个插件, 那时候是使用Vue2实现的预览, 今天, 我们创建一个Vue3项目来实现一下word预览
在文末, 大家可以点击阅读原文查看做好的demo
首先, 我们先来创建一个Vue3项目
npm init vue@latest
pnpm i
npm run dev运行起来之后, 我们将App.vue中的代码全部删除掉
现在, 页面干净了, 我们需要安装vue-office插件
pnpm install @vue-office/docx vue-demi
安装完成之后, 我们就可以在页面中进行使用了
需要我们将组件和样式进行引入
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'随后, 我们赋值一个响应式数据, 用于我们的word展示
import {ref} from 'vue'
const docx = ref('http://static.shanhuxueyuan.com/test6.docx')剩下的就是在页面中进行使用了
绑定一个自定义事件, 在渲染完成之后, 就会执行
我们看一下整体代码
那么页面呈现应该是什么样的呢?
这样就完了吗? 其实并不然, 我们开发中还会遇到另一种情况, 就是通过文件上传的方式, 获取文件的ArrayBuffer或者blob来预览文档
这个时候, 我们应该怎么处理呢?
其实很简单, 开发中如何读取文件内容, 就可以应用到这里
我们可以给input绑定一个change事件, 当我们选择了文件, change就会触发返回给我们一个event对象, 我们通过event对象中的属性就可以拿到我们的file对象了
const files = event.target.files[0];获取到了之后, 我们需要使用FileReader身上的实例方法来读取我们的文件内容
想必大家知道后面怎么做了吧, 我们来实现一下吧
这样, 我们的代码就写完了, 我们看看效果
最后
如果你觉得这篇内容对你挺有启发，我想邀请你帮我个小忙：
点个「喜欢」或「在看」，让更多的人也能看到这篇内容
我组建了个氛围非常好的前端群，里面有很多前端小伙伴，欢迎加我微信「sherlocked_93」拉你加群，一起交流和学习
关注公众号「前端下午茶」，持续为你推送精选好文，也可以加我为好友，随时聊骚。
点个喜欢支持我吧，在看就更好了
智能推荐
Struts2的过滤器FilterDispatcher_struts2应用web.xml的filterdispacher问题-程序员宅基地
文章浏览阅读1.4k次。测试环境及其前置知识Struts2.0.14 Spring2.5.6 Eclipse3.4 Filter的相关知识，尤其要知道Filter的执行顺序是按照web.xml中配置的filter-mapping顺序执行的。 web.xml定义文件 CharacterEncoding org.springframewor_struts2应用web.xml的filterdispacher问题
Unity 实现Image中Fill Amount的平滑增减效果（进度条为例）_unity fillamount-程序员宅基地
文章浏览阅读1.9w次，点赞14次，收藏32次。在游戏开发过程中，难免会遇到进度条的制作。这里我新建个场景从头做个简化版的。1、准备工作。在Unity中创建一个简单的UI界面。就像这样：其中imgBG和imgFillAmount的尺寸要相同。修改imgFillAmount的属性：（将Image Type改成Filled，记得要在Source Image中加入Sprite）可以看到FillAmount属性是个从0到1的值，拖动就可..._unity fillamount
linux服务器，卸载tensorflow CPU 安装PGU版_linux conda环境下卸载tensorflow-程序员宅基地
文章浏览阅读793次。linux 服务器，卸载tensorflow CPU 安装PGU版写在前面之前用的和学习的都是pytorch框架，现在要运行一个keras的代码，得安装tensorflow和keras，按一个教程，直接在pycharm里setting，点那个+很快就装好了tensorflow和keras，运行了几次发现运行特别慢，用nvidia-smi查看，发现根本没有用pgu跑，一番查找，最后发现安装的tensorflow本身是按CPU跑的，要用GPU跑，得安装tensorflow-gpu。以下主要参考了https_linux conda环境下卸载tensorflow
JMeter之修改Sampler响应数据的编码格式_sampler自定义数据编码-程序员宅基地
文章浏览阅读1.2w次。问题：JMeter的sampler响应数据中有中文时，会解析出错。 JMeter的Sampler中的响应数据默认的编码格式是：ISO-8859-1。来自文件：jmeter.properties中的语句如下：当默认这种编码格式时，如果响应数据中有中文，就会解析出错，如下图所示：要解决以上问题，有2种方案。方案一：1、 修改jme_sampler自定义数据编码
VMware使用vmdk文件安装Android_vmdk安卓-程序员宅基地
文章浏览阅读5k次。VMDK文件是VMware的虚拟磁盘文件，比用iso镜像安装要方便、迅速。大部分流程是和iso安装一样的，唯一不同的是选择虚拟机硬盘时，不能选择新建虚拟机磁盘，而是选择现有磁盘，然后找到之前下载的VMDK文件。PS：注意Android选择的系统类型是FreeBSD。..._vmdk安卓
Dataframe中的多条件筛选_dataframe筛选多条件-程序员宅基地
文章浏览阅读3.8k次，点赞2次，收藏6次。Dataframe中多条件column筛选:df[(df.c1==1) & (df.c2==1)]注意小括号的使用，df.c1 = df[‘列名’]_dataframe筛选多条件
随便推点
用XAMPP搭建PHP服务器，配置部署多个项目的过程（附blocked port error解决方法）_xampp的phperror-程序员宅基地
文章浏览阅读1k次，点赞23次，收藏23次。安装完成XAMPP后，浏览器输入localhost或127.0.0.1，若远程服务器，替换对应IP地址即可。因浏览网页服务默认的port都是80，因此只需输入网址即可，不用输入“:80”了,XAMPP默认指向的文件地址是安装目录下的htdocs文件夹。_xampp的phperror
基于 golang, grpc, gin 和 redis, kafka, MySQL, etcd 和 vue3 的简单分布式信息管理系统-程序员宅基地
文章浏览阅读873次，点赞11次，收藏14次。基于 golang, grpc, gin 和 redis, kafka, MySQL, etcd 和 vue3 的简单分布式信息管理系统含完整前后端，微服务：分布式信息管理系统模板，后台管理系统模板，数据库管理系统模板。实现 grpc 微服务远程过程调用，redis 缓存，etcd 服务发现，负载均衡。令牌签验，非对称加密。通过 Web 应用完成对数据库的增删改查(CRUD)，文件流的上传和下载。前后端分离
app inventor入门详细教程（音乐播放器）01-程序员宅基地
文章浏览阅读1.6w次，点赞22次，收藏189次。App inventor 介绍简介App Inventor是由Google公司开发的一款在线开放的Android编程工具软件，通过图形化积木式的拖放组件来完成Apps开发App Inventor在2012年1月移交给麻省理工学院MIT的行动学习中心，并由MIT发布使用，目前已经发布了第2版本特点开发环境搭建简单。采用浏览器+云服务模式，无需复杂软件安装开发过程简单。手机App的界面设计和行为开发都可以通过可视化的拖放拼接组件来完成，无需关注复杂的语法规则组件模块丰富。App Invent_app inventor
Discuz X 3.4 系列漏洞梳理_discuz! x3.4漏洞-程序员宅基地
文章浏览阅读2.2w次，点赞7次，收藏23次。分析了目前已经公开的Dz3.4系列漏洞，作为学习和记录。Discuz!X ≤3.4 任意文件删除漏洞1、简述漏洞原因：之前存在的任意文件删除漏洞修复不完全导致可以绕过。漏洞修复时间：2017年9月29日官方对gitee上的代码进行了修复2、复现环境因为官方提供的下载是最新的源码，漏洞修复时间是17年9月29日，通过git找一个修复前的版本签出就可。git checkout 1a912ddb4a62364d1736fa4578b42ecc62c5d0be通过安装向导安装完._discuz! x3.4漏洞
C语言常见程序讲解，适合初学者快速入门！_简单的c语言代码解析-程序员宅基地
文章浏览阅读936次。之前发了很多有关C/C++项目的文章。但是对于C语言的学习，需要自己亲自敲一些代码才能够学好C语言。在这里讲解一下简单的C语言程序（代码），希望自己能够在自己的电脑上敲几遍。a与b的算术运算描述：输出a和b的初始化值的简单算术运算。代码：输出结果：分析：printf函数是将双引号中的内容输出到弹出框中，其中因为a和b的数据类型都是int型，所以运算结果都要用%d的形式输..._简单的c语言代码解析
python中kmeans求到类中心的平均距离_k-means算法python实现-程序员宅基地
文章浏览阅读3.8k次。1.k-means算法的思想k-means算法是一种非监督学习方式，没有目标值，是一种聚类算法，因此要把数据划分成k个类别，那么一般k是知道的。那么假设k=3，聚类过程如下：随机在数据当中抽取三个样本，当做三个类别的中心点(k1，k2，k3)；计算其余点(除3个中心点之外的点)到这三个中心点的距离，每一个样本应该有三个距离(a，b，c)，然后选出与自己距离最近的中心点作为自己的标记，形成三个簇群；..._kmeans 计算类内平均距离