当前位置：首页 > news >正文

【Vue3/Typescript】合并多个pdf并预览打印，兼容低版本浏览器

news 2025/5/5 2:49:39

一、打印pdf组件

<template><div><slot :is-loading="isLoading"><el-button type="primary">批量打印</el-button></slot><el-dialogv-model="pdfVisible"title="PDF预览"width="90%"top="5vh"destroy-on-close><div v-loading="pdfLoading" class="pdf-container"><iframe ref="pdfIframe" :src="pdfViewerUrl" class="pdf-viewer"></iframe></div><template #footer><el-button @click="pdfVisible = false">关闭</el-button><!-- <el-button type="primary" @click="handlePrint">立即打印</el-button> --></template></el-dialog></div>
</template><script setup lang="ts">
defineOptions({name: "PdfMergePrinter",
});import { ref, onMounted, watch } from "vue";
import { PDFDocument } from "pdf-lib";
import { ElMessage } from "element-plus";const emit = defineEmits(["printSuccess", "closeLoading"]);const pdfVisible = ref(false);
const pdfViewerUrl = ref("");
const pdfLoading = ref(false);
const pdfIframe = ref<HTMLIFrameElement>();const isLoading = ref(false);
const abortController = ref<AbortController | null>(null);// PDF合并处理
const mergePDFs = async (urls: string[]) => {const mergedPdf = await PDFDocument.create();for (const url of urls) {try {const response = await fetch(url, {signal: abortController.value?.signal,});if (!response.ok)throw new Error(`HTTP error! status: ${response.status}`);const arrayBuffer = await response.arrayBuffer();const pdf = await PDFDocument.load(arrayBuffer);const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());copiedPages.forEach((page) => mergedPdf.addPage(page));} catch (error) {throw new Error(`合并PDF失败: ${error instanceof Error ? error.message : String(error)}`);}}return await mergedPdf.save();
};const printWithDialog = (mergedPdf: Uint8Array) => {return new Promise<void>((resolve, reject) => {try {// 生成PDF URLconst pdfBlob = new Blob([mergedPdf], { type: "application/pdf" });pdfViewerUrl.value = URL.createObjectURL(pdfBlob);setTimeout(() => {pdfVisible.value = true;}, 500);// 显示弹窗} catch (error) {reject(error);}});
};const handlePrint = () => {const iframeWindow = pdfIframe.value?.contentWindow as any;if (iframeWindow?.PDFViewerApplication) {iframeWindow.PDFViewerApplication.triggerPrint();} else {window.print();}
};
// 在关闭时释放资源
watch(pdfVisible, (val) => {console.log(val);if (!val && pdfViewerUrl.value) {emit("closeLoading");emit("printSuccess");URL.revokeObjectURL(pdfViewerUrl.value);}
});// 主打印流程
const startPrint = async (pdfUrls: any) => {try {isLoading.value = true;abortController.value = new AbortController();// 合并PDFconst mergedPdf = await mergePDFs(pdfUrls);await printWithDialog(mergedPdf);} catch (error) {ElMessage.error(error instanceof Error ? error.message : "未知错误");abortController.value?.abort();} finally {isLoading.value = false;abortController.value = null;console.log("打印:startPrint finally");emit("closeLoading");}
};defineExpose({startPrint,
});
</script>

二、使用方法

 <PdfMergePrinterref="printPageRef"@printSuccess="printSuccess"@closeLoading="closePringLoading"><!-- 自定义触发按钮 --><template #default="{ isLoading }"><el-button :loading="isLoading" type="warning" @click="printFn()" >批量打印</el-button></template></PdfMergePrinter>const printFn = useDebounceFn(() => print(), 300);
const print = () => {//pdf的url数组const pdfUrls = ["https://this.is.pdfurl1.pdf","https://this.is.pdfurl2.pdf"]printPageRef.value.startPrint(pdfUrls);
};
const printSuccess=()=>{
//预览弹窗关闭时调用
}
const closePringLoading=()=>{
//关闭全局loading
}