Vue3使用vue-office插件实现word预览功能

2024-04-18 0 437

首先, 我们先来创建一个Vue3项目

npm init vue@latest
pnpm i
npm run dev

运行起来之后, 我们将App.vue中的代码全部删除掉

Vue3使用vue-office插件实现word预览功能

现在, 页面干净了, 我们需要安装vue-office插件

npm install @vue-office/docx vue-demi

Vue3使用vue-office插件实现word预览功能

安装完成之后, 我们就可以在页面中进行使用了

需要我们将组件和样式进行引入

//引入VueOfficeDocx组件
import VueOfficeDocx from \’@vue-office/docx\’
//引入相关样式
import \’@vue-office/docx/lib/index.css\’

随后, 我们赋值一个响应式数据, 用于我们的word展示

import {ref} from \’vue\’
const docx = ref(\’http://test.xxxxx.com/test.docx\’)

剩下的就是在页面中进行使用了

Vue3使用vue-office插件实现word预览功能

绑定一个自定义事件, 在渲染完成之后, 就会执行

我们看一下整体代码

Vue3使用vue-office插件实现word预览功能

那么页面呈现应该是什么样的呢?

Vue3使用vue-office插件实现word预览功能

这样就完了吗? 其实并不然, 我们开发中还会遇到另一种情况, 就是通过文件上传的方式, 获取文件的ArrayBuffer或者blob来预览文档

这个时候, 我们应该怎么处理呢?

其实很简单, 开发中如何读取文件内容, 就可以应用到这里

Vue3使用vue-office插件实现word预览功能

我们可以给input绑定一个change事件, 当我们选择了文件, change就会触发返回给我们一个event对象, 我们通过event对象中的属性就可以拿到我们的file对象了

const files = event.target.files[0];

获取到了之后, 我们需要使用FileReader身上的实例方法来读取我们的文件内容

Vue3使用vue-office插件实现word预览功能

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

Vue3使用vue-office插件实现word预览功能

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

Vue3使用vue-office插件实现word预览功能

到此这篇关于Vue3使用vue-office插件实现word预览的文章就介绍到这了,更多相关Vue3 word预览内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • Vue3实现word转成pdf代码的方法
  • vue使用Office Web实现线上文件预览
  • vue实现在线预览office文件的示例代码
  • nodejs(officegen)+vue(axios)在客户端导出word文档的方法

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript Vue3使用vue-office插件实现word预览功能 https://www.u-9.cn/biancheng/javascript/186705.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务