vue 在线预览word和excel

yarn add @vue-office/excel @vue-office/docx

 

<template><div><vue-office-docx:src="docx"style="height: 100%; margin: 0; padding: 0"@rendered="rendered"/></div>
</template><script>
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
//引入相关样式
import "@vue-office/docx/lib/index.css";export default {components: {VueOfficeDocx,},props: {docx: {type: String,default:"a.docx", //设置文档网络地址，可以是相对地址},},data() {return {};},methods: {rendered() {console.log("渲染完成");},},
};
</script>

 

<template><vue-office-excel:src="excel"@rendered="renderedHandler"@error="errorHandler"style="height: calc(100vh - 90px)"/>
</template><script>
//引入VueOfficeExcel组件
import VueOfficeExcel from "@vue-office/excel";
//引入相关样式
import "@vue-office/excel/lib/index.css";export default {components: {VueOfficeExcel,},props: {excel: {type: String,default:"a.xlsx", //设置文档地址},},data() {return {};},methods: {renderedHandler() {console.log("渲染完成");},errorHandler() {console.log("渲染失败");},},
};
</script>

也可以浏览器选择文件后直接预览，不需要文件是在线的

<template><div><div v-if="extension === 'docx' || extension === 'doc'"><vue-office-docx :src="docx" style="height: 500px; margin: 0; padding: 0" /></div><div v-if="extension === 'xlsx' || extension === 'xls'"><vue-office-excel :src="excel" style="height: 500px" /></div><div v-if="extension === 'pdf'"><iframe v-if="pdfSrc" :src="pdfSrc" width="100%" height="500"></iframe></div></div>
</template>
<script lang="ts" name="cl-file-viewer" setup>
import { ref, watch } from "vue";
import VueOfficeExcel from "@vue-office/excel";
import VueOfficeDocx from "@vue-office/docx";
import "@vue-office/excel/lib/index.css";
import "@vue-office/docx/lib/index.css";const props = defineProps({fileType: {type: String,default: "file"}, // 文件类型file: {type: Object,default: null} //文件流 或者文件地址
});// 获取文件扩展名
const extension = ref("");
const docx = ref("");
const excel = ref("");
const pdfSrc:any = ref(null);const readFile = async () => {// 获取选中的文件//@ts-ignoreconst file:any = props.fileType === "file" ? props.file : getFileStream(props.file);if (!file) {return;}// 获取文件扩展名extension.value = file.name.split(".").pop();// 根据文件扩展名进行处理switch (extension.value) {case "docx":case "doc":// 读取Word文件readWordFile(file);break;case "xlsx":case "xls":// 读取Excel文件readExcelFile(file);break;case "pdf":// 读取PDF文件readPdfFile(file);break;default:// 不支持的文件类型alert("Unsupported file type");}
};
const readWordFile = (file: any) => {docx.value = URL.createObjectURL(file);
};const readExcelFile = (file: any) => {excel.value = URL.createObjectURL(file);
};const readPdfFile = async (file: any) => {if (file) {// 判断传入的 file 参数是否为字符串类型if (props.file instanceof String) {// 如果是字符串类型，则将其赋值给 pdfSrc.valuepdfSrc.value = props.file;} else {// 如果不是字符串类型，则使用 URL.createObjectURL 方法创建一个指向该文件的 URL，并将其赋值给 pdfSrc.valuepdfSrc.value = URL.createObjectURL(file);}}
};// url地址转发为文件流
const getFileStream = (url: string) => {return new Promise((resolve, reject) => {// 创建一个XMLHttpRequest对象const xhr = new XMLHttpRequest();// 设置请求方法为GET，并传入请求的URLxhr.open("GET", url);// 设置响应类型为blob，以便能够处理二进制数据xhr.responseType = "blob";// 当请求加载完成时，调用resolve方法并将响应数据作为参数传入xhr.onload = () => resolve(xhr.response);// 当请求发生错误时，调用reject方法并将错误信息作为参数传入xhr.onerror = (err) => reject(err);});
};// 初始化
watch(() => props.file,(newValue, oldValue) => {if (newValue && newValue != oldValue) {nextTick(() => {readFile();});}},{ immediate: true }
);
</script>

参考链接

https://blog.csdn.net/qq_42038623/article/details/131600935

人工智能学习网站

https://chat.xutongbao.top