Vue3借助vue-office插件实现word预览

现在, 页面干净了, 我们需要安装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身上的实例方法来读取我们的文件内容

想必大家知道后面怎么做了吧, 我们来实现一下吧

这样, 我们的代码就写完了, 我们看看效果

黑客&网络安全如何学习

今天只要你给我的文章点赞，我私藏的网安学习资料一样免费共享给你们，来看看有哪些东西。

1.学习路线图

攻击和防守要学的东西也不少，具体要学的东西我都写在了上面的路线图，如果你能学完它们，你去就业和接私活完全没有问题。

2.视频教程

网上虽然也有很多的学习资源，但基本上都残缺不全的，这是我自己录的网安视频教程，上面路线图的每一个知识点，我都有配套的视频讲解。

内容涵盖了网络安全法学习、网络安全运营等保测评、渗透测试基础、漏洞详解、计算机基础知识等，都是网络安全入门必知必会的学习内容。

（都打包成一块的了，不能一一展开，总共300多集）

因篇幅有限，仅展示部分资料，需要点击下方链接即可前往获取

CSDN大礼包：《黑客&网络安全入门&进阶学习资源包》免费分享

后话

---

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。