Vue3实现word预览
1. 安装依赖
pnpm install @vue-office/docx2. 页面导入
// 导入依赖
import VueOfficeDocx from "@vue-office/docx";
// 导入样式文件
import "@vue-office/docx/lib/index.css";3. 使用（这里使用是文件上传方式）可以直接是在线地址
<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文件预览了 是不是很简单
原文地址：https://blog.csdn.net/w1314_1314/article/details/140551850
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！