Vue3+TypeScript implements PDF preview component

<script setup lang="ts">
import { ref } from "vue";
import VuePdfEmbed from "vue-pdf-embed";

const pdfUrl = "/mozilla//ba2edeae/web/";

const dialogVisible = ref(false);
const loading = ref(false);
const pdfRef = ref();
const source = ref("");
const currentPage = ref<number | undefined>(1);
const pageCount = ref(1);
const showAllPages = ref(false);

const open = (url: string = pdfUrl) => {
	 = url;
	 = true;
	 = true;
};

const documentRender = () => {
	 = false;
	 = ;
};

const showAllPagesChange = () => {
	 =  ? undefined : 1;
};

const handleDownload = () => {
	();
};

const handlePrint = () => {
	// If the print page is twice as high as the print page when printing, the print configuration page settings are only available for pages with odd page numbers.	();
};

defineExpose({
	open
});
</script>

<template>
	<div>
		<el-dialog v-model="dialogVisible" title="Preview" width="80%" align-center destroy-on-close>
			<div flex="~ justify-between items-center">
				<div>
					<el-pagination
						v-if="!showAllPages"
						v-model:current-page="currentPage"
						layout="prev, pager, next"
						:page-size="1"
						:total="pageCount"
						hide-on-single-page
					/>
					<div v-else>common{{ pageCount }}Page</div>
				</div>
				<div flex="~ items-center">
					<el-checkbox v-model="showAllPages" @change="showAllPagesChange">Show all</el-checkbox>
					<el-tooltip effect="dark" content="download">
						<SvgIcon
							ml-2
							color="#000"
							cursor-pointer
							@click="handleDownload"
							:icon-style="{ width: '20px', height: '20px' }"
							name="download"
						/>
					</el-tooltip>
					<el-tooltip effect="dark" content="Print">
						<SvgIcon
							ml-2
							color="#000"
							cursor-pointer
							@click="handlePrint"
							:icon-style="{ width: '20px', height: '20px' }"
							name="printing"
						/>
					</el-tooltip>
				</div>
			</div>
			<el-scrollbar mt-3 height="75vh" v-loading="loading">
				<vue-pdf-embed ref="pdfRef" container overflow-auto :source="source" :page="currentPage" @rendered="documentRender" />
			</el-scrollbar>
		</el-dialog>
	</div>
</template>

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