yarn add @vue-office/excel @vue-office/docx
javascript
<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>
javascript
<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>
也可以浏览器选择文件后直接预览,不需要文件是在线的
javascript
<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-ignore
const 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.value
pdfSrc.value = props.file;
} else {
// 如果不是字符串类型,则使用 URL.createObjectURL 方法创建一个指向该文件的 URL,并将其赋值给 pdfSrc.value
pdfSrc.value = URL.createObjectURL(file);
}
}
};
// url地址转发为文件流
const getFileStream = (url: string) => {
return new Promise((resolve, reject) => {
// 创建一个XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 设置请求方法为GET,并传入请求的URL
xhr.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
人工智能学习网站