Vue3实现word预览

一城烟雨_2024-07-20 9:16

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文件预览了是不是很简单