Vue3实现word预览

1. 安装依赖
javascript 复制代码
pnpm install @vue-office/docx
2. 页面导入
javascript 复制代码
// 导入依赖
import VueOfficeDocx from "@vue-office/docx";
// 导入样式文件
import "@vue-office/docx/lib/index.css";
3. 使用(这里使用是文件上传方式)可以直接是在线地址
javascript 复制代码
<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文件预览了 是不是很简单

相关推荐
90后的晨仔5 分钟前
Vue3项目全面部署指南:从构建到上线
前端·vue.js
小于小于091213 分钟前
npx 与 npm 区别
前端·npm·node.js
重生之我要当java大帝16 分钟前
java微服务-尚医通-数据字典-5
vue.js·微服务·云原生·架构
望获linux31 分钟前
【实时Linux实战系列】实时 Linux 在边缘计算网关中的应用
java·linux·服务器·前端·数据库·操作系统
qq_2529241933 分钟前
PHP 8.0+ 现代Web开发实战指南 引
android·前端·php
Jeled33 分钟前
Android 本地存储方案深度解析:SharedPreferences、DataStore、MMKV 全面对比
android·前端·缓存·kotlin·android studio·android jetpack
Mintopia34 分钟前
🎨 AIGC 内容过滤技术:当创作的洪流遇上理性的堤坝
前端·javascript·aigc
Mintopia41 分钟前
⚙️ Next.js 缓存与队列:当数据与请求跳起“低延迟之舞”
前端·全栈·next.js
Shi_haoliu1 小时前
Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容(Demo版)
前端·javascript·vue.js·node.js·html·excel·office
计算机毕业设计木哥1 小时前
计算机毕业设计选题推荐:基于SpringBoot和Vue的爱心公益网站
java·开发语言·vue.js·spring boot·后端·课程设计