我要评论简介
在现代的 web 应用中，预览文档和表格是一个常见的需求。本文将介绍如何使用 vue3 和 typescript 开发一个高度可定制的文档和表格预览组件。
技术栈
vue3
typescript
element plus
unocss
pdf文档预览
使用 vue3 + typescript 实现 pdf 预览组件
docx 预览组件
功能特点
- 支持的文件格式: 仅支持预览
docx类型的文件。 - 自定义选项: 提供丰富的渲染选项，如页面宽度、高度、字体等。
- 通知提示: 在不支持的文件类型时，会弹出通知提示。
组件实现
// types
export interface renderoptions {
classname?: string; // 默认和文档样式类的类名/前缀
inwrapper?: boolean; // 启用在文档内容周围的包装器渲染
ignorewidth?: boolean; // 禁用页面宽度渲染
ignoreheight?: boolean; // 禁用页面高度渲染
ignorefonts?: boolean; // 禁用字体渲染
breakpages?: boolean; // 启用分页在页面断点上
ignorelastrenderedpagebreak?: boolean; // 禁用在lastrenderedpagebreak元素上的分页
experimental?: boolean; // 启用实验性功能（制表符计算）
trimxmldeclaration?: boolean; // 如果为true，将从解析之前的xml文档中移除xml声明
usebase64url?: boolean; // 如果为true，图像、字体等将转换为base 64 url，否则使用url.createobjecturl
usemathmlpolyfill?: boolean; // 包括mathml填充，适用于chrome、edge等
showchanges?: boolean; // 启用文档更改的实验性渲染（插入/删除）
debug?: boolean; // 启用额外的日志记录
}<script setup lang="ts">
import { ref, computed } from "vue";
import vueofficedocx from "@vue-office/docx";
import "@vue-office/docx/lib/index.css";
import { elnotification } from "element-plus";
import { renderoptions } from "./types";
interface docxprops {
height?: string; // 组件高度 ==> 非必传（默认为 150px）
customoptions?: renderoptions; // 配置参数 ==> 非必传（默认为 {}）
}
// 接收父组件参数并设置默认值
const props = withdefaults(defineprops<docxprops>(), {
height: "80vh"
});
const show = ref(false);
const loading = ref(true);
const docx = ref();
const url = ref("http://static.shanhuxueyuan.com/test.docx");
const customstyle = computed(() => {
return {
height: props.height
};
});
const renderedcallback = () => {
loading.value = false;
};
const open = async (src?: string) => {
show.value = true;
if (src) {
url.value = src;
}
fetch(url.value)
.then(response => response.blob())
.then(res => {
if (res.type == "application/vnd.openxmlformats-officedocument.wordprocessingml.document") {
docx.value = res;
} else {
elnotification({
title: "提示",
message: "目前仅支持预览 docx 类型的文件",
type: "warning"
});
}
});
};
defineexpose({
open
});
</script>
<template>
<div>
<el-dialog v-model="show" align-center title="预览" width="80%">
<vueofficedocx v-loading="loading" :options="customoptions" :style="customstyle" :src="docx" @rendered="renderedcallback" />
</el-dialog>
</div>
</template>
<style lang="scss" scoped></style>
excel预览组件
功能特点
- 支持的文件格式: 仅支持预览
excel类型的文件。 - 自定义选项: 提供丰富的渲染选项，如最小渲染列数、行数等。
- 通知提示: 在不支持的文件类型时，会弹出通知提示。
// types
export interface excelrenderoptions {
mincollength: number; // excel最少渲染多少列
minrowlength: number; // excel最少渲染多少行
widthoffset: number; // 在默认渲染的列表宽度上再加10px宽
heightoffset: number; // 在默认渲染的列表高度上再加10px高
beforetransformdata: (workbookdata: any) => any; // 修改workbookdata的函数类型定义
transformdata?: (workbookdata: any) => any; // 修改workbookdata的函数类型定义
}
<script setup lang="ts">
import { ref, computed } from "vue";
import vueofficeexcel from "@vue-office/excel";
import "@vue-office/excel/lib/index.css";
import { elnotification } from "element-plus";
import { type excelrenderoptions } from "./types";
interface docxprops {
height?: string; // 组件高度 ==> 非必传（默认为 150px）
customoptions?: partial<excelrenderoptions>; // 配置参数 ==> 非必传（默认为 {}）
}
// 接收父组件参数并设置默认值
const props = withdefaults(defineprops<docxprops>(), {
height: "80vh"
});
const show = ref(false);
const loading = ref(true);
const docx = ref();
const url = ref("http://static.shanhuxueyuan.com/demo/excel.xlsx");
const customstyle = computed(() => {
return {
height: props.height
};
});
const renderedcallback = () => {
loading.value = false;
};
const open = async (src?: string) => {
show.value = true;
if (src) {
url.value = src;
}
fetch(url.value)
.then(response => response.blob())
.then(res => {
if (res.type == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
docx.value = res;
} else {
elnotification({
title: "提示",
message: "目前仅支持预览 excel 类型的文件",
type: "warning"
});
}
});
};
defineexpose({
open
});
</script>
<template>
<div>
<el-dialog v-model="show" align-center title="预览" width="80%">
<vueofficeexcel
v-loading="loading"
:options="customoptions"
:style="customstyle"
:src="docx"
@rendered="renderedcallback"
/>
</el-dialog>
</div>
</template>
<style lang="scss" scoped></style>
总结
通过使用 vue3 和 typescript，我们可以轻松地开发出高度可定制的文档和表格预览组件。这些组件不仅提供了丰富的功能，还支持多种自定义选项，以满足不同项目的需求。
以上就是vue3+typescript实现docx/excel预览组件的详细内容，更多关于vue3 typescript预览组件的资料请关注代码网其它相关文章！
发表评论