快捷導(dǎo)航

Vue3+TypeScript實(shí)現(xiàn)Docx/Excel預(yù)覽組件

更新時(shí)間：2024年04月26日 09:19:34 作者：下雨會(huì)打傘的前端

這篇文章主要為大家詳細(xì)介紹了如何使用Vue3+TypeScript實(shí)現(xiàn)Docx/Excel預(yù)覽組件,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考下

簡(jiǎn)介

在現(xiàn)代的 Web 應(yīng)用中，預(yù)覽文檔和表格是一個(gè)常見(jiàn)的需求。本文將介紹如何使用 Vue3 和 TypeScript 開(kāi)發(fā)一個(gè)高度可定制的文檔和表格預(yù)覽組件。

技術(shù)棧

TypeScript

Element Plus

unocss

vue-office

PDF文檔預(yù)覽

使用 Vue3 + TypeScript 實(shí)現(xiàn) PDF 預(yù)覽組件

Docx 預(yù)覽組件

功能特點(diǎn)

支持的文件格式: 僅支持預(yù)覽 Docx 類型的文件。
自定義選項(xiàng): 提供豐富的渲染選項(xiàng)，如頁(yè)面寬度、高度、字體等。
通知提示: 在不支持的文件類型時(shí)，會(huì)彈出通知提示。

組件實(shí)現(xiàn)

// types
export interface RenderOptions {
	className?: string; // 默認(rèn)和文檔樣式類的類名/前綴
	inWrapper?: boolean; // 啟用在文檔內(nèi)容周圍的包裝器渲染
	ignoreWidth?: boolean; // 禁用頁(yè)面寬度渲染
	ignoreHeight?: boolean; // 禁用頁(yè)面高度渲染
	ignoreFonts?: boolean; // 禁用字體渲染
	breakPages?: boolean; // 啟用分頁(yè)在頁(yè)面斷點(diǎn)上
	ignoreLastRenderedPageBreak?: boolean; // 禁用在lastRenderedPageBreak元素上的分頁(yè)
	experimental?: boolean; // 啟用實(shí)驗(yàn)性功能（制表符計(jì)算）
	trimXmlDeclaration?: boolean; // 如果為true，將從解析之前的xml文檔中移除xml聲明
	useBase64URL?: boolean; // 如果為true，圖像、字體等將轉(zhuǎn)換為base 64 URL，否則使用URL.createObjectURL
	useMathMLPolyfill?: boolean; // 包括MathML填充，適用于chrome、edge等
	showChanges?: boolean; // 啟用文檔更改的實(shí)驗(yàn)性渲染（插入/刪除）
	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; // 組件高度 ==> 非必傳（默認(rèn)為 150px）
	customOptions?: RenderOptions; // 配置參數(shù) ==> 非必傳（默認(rèn)為 {}）
}
// 接收父組件參數(shù)并設(shè)置默認(rèn)值
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: "目前僅支持預(yù)覽 Docx 類型的文件",
					type: "warning"
				});
			}
		});
};

defineExpose({
	open
});
</script>

<template>
	<div>
		<el-dialog v-model="show" align-center title="預(yù)覽" width="80%">
			<VueOfficeDocx v-loading="loading" :options="customOptions" :style="customStyle" :src="docx" @rendered="renderedCallback" />
		</el-dialog>
	</div>
</template>

<style lang="scss" scoped></style>

Excel預(yù)覽組件

功能特點(diǎn)

支持的文件格式: 僅支持預(yù)覽 Excel 類型的文件。
自定義選項(xiàng): 提供豐富的渲染選項(xiàng)，如最小渲染列數(shù)、行數(shù)等。
通知提示: 在不支持的文件類型時(shí)，會(huì)彈出通知提示。

// types
export interface ExcelRenderOptions {
	minColLength: number; // excel最少渲染多少列
	minRowLength: number; // excel最少渲染多少行
	widthOffset: number; // 在默認(rèn)渲染的列表寬度上再加10px寬
	heightOffset: number; // 在默認(rèn)渲染的列表高度上再加10px高
	beforeTransformData: (workbookData: any) => any; // 修改workbookData的函數(shù)類型定義
	transformData?: (workbookData: any) => any; // 修改workbookData的函數(shù)類型定義
}

<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; // 組件高度 ==> 非必傳（默認(rèn)為 150px）
	customOptions?: Partial<ExcelRenderOptions>; // 配置參數(shù) ==> 非必傳（默認(rèn)為 {}）
}
// 接收父組件參數(shù)并設(shè)置默認(rèn)值
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: "目前僅支持預(yù)覽 Excel 類型的文件",
					type: "warning"
				});
			}
		});
};

defineExpose({
	open
});
</script>

<template>
	<div>
		<el-dialog v-model="show" align-center title="預(yù)覽" width="80%">
			<VueOfficeExcel
				v-loading="loading"
				:options="customOptions"
				:style="customStyle"
				:src="docx"
				@rendered="renderedCallback"
			/>
		</el-dialog>
	</div>
</template>

<style lang="scss" scoped></style>