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

更新時(shí)間：2024年04月23日 16:22:31 作者：下雨會(huì)打傘的前端

這篇文章主要為大家詳細(xì)介紹了如何基于Vue3+TypeScript實(shí)現(xiàn)PDF預(yù)覽組件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

簡(jiǎn)介

在現(xiàn)代的 Web 應(yīng)用中，預(yù)覽 PDF 文件是一個(gè)常見需求。本文介紹了一個(gè)基于 Vue3 和 TypeScript 的 PDF 預(yù)覽組件，該組件支持分頁(yè)預(yù)覽、打印和下載功能。

技術(shù)棧

Vue3
TypeScript
Element Plus
unocss
vue-pdf-embed

功能特點(diǎn)

分頁(yè)預(yù)覽: 支持在不同的 PDF 頁(yè)面之間進(jìn)行切換。
打印: 提供直接在瀏覽器中打印 PDF 的功能。
下載: 用戶可以下載整個(gè) PDF 文檔。
顯示所有頁(yè): 提供一個(gè)選項(xiàng)，用戶可以選擇查看所有頁(yè)面。

組件代碼

以下是組件的核心代碼：

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

const pdfUrl = "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";

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) => {
	source.value = url;
	dialogVisible.value = true;
	loading.value = true;
};

const documentRender = () => {
	loading.value = false;
	pageCount.value = pdfRef.value.doc.numPages;
};

const showAllPagesChange = () => {
	currentPage.value = showAllPages.value ? undefined : 1;
};

const handleDownload = () => {
	pdfRef.value.download();
};

const handlePrint = () => {
	// 如果在打印時(shí)，打印頁(yè)面是本身的兩倍，在打印配置 頁(yè)面 設(shè)置 僅限頁(yè)碼為奇數(shù)的頁(yè)面 即可
	pdfRef.value.print();
};

defineExpose({
	open
});
</script>

<template>
	<div>
		<el-dialog v-model="dialogVisible" title="預(yù)覽" 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>共{{ pageCount }}頁(yè)</div>
				</div>
				<div flex="~ items-center">
					<el-checkbox v-model="showAllPages" @change="showAllPagesChange">展示所有</el-checkbox>
					<el-tooltip effect="dark" content="下載">
						<SvgIcon
							ml-2
							color="#000"
							cursor-pointer
							@click="handleDownload"
							:icon-style="{ width: '20px', height: '20px' }"
							name="download"
						/>
					</el-tooltip>
					<el-tooltip effect="dark" content="打印">
						<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>

總結(jié)

通過(guò)組合 Vue3、TypeScript 和其他現(xiàn)代前端技術(shù)，我們創(chuàng)建了一個(gè)功能豐富的 PDF 預(yù)覽組件。這個(gè)組件提供了用戶友好的分頁(yè)預(yù)覽、打印和下載功能，為開發(fā)者在 Web 應(yīng)用中集成 PDF 預(yù)覽提供了便捷的解決方案。

到此這篇關(guān)于Vue3+TypeScript實(shí)現(xiàn)PDF預(yù)覽組件的文章就介紹到這了,更多相關(guān)Vue3 TypeScript PDF預(yù)覽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: