快捷導航

Vue3+Typescript合并多個pdf并預覽打印

更新時間：2025年04月29日 09:54:32 作者：芭拉拉小魔仙

這篇文章主要為大家詳細介紹了Vue3如何結(jié)合Typescript實現(xiàn)合并多個pdf并預覽打印,同時可以兼容低版本瀏覽器,感興趣的小伙伴可以跟隨小編一起學習一下

一、打印pdf組件

<template>
  <div>
    <slot :is-loading="isLoading"
      ><el-button type="primary">批量打印</el-button>
    </slot>
    <el-dialog
      v-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">關(guān)閉</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 URL
      const 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();
  }
};
// 在關(guān)閉時釋放資源
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();

    // 合并PDF
    const 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>

二、使用方法

 <PdfMergePrinter
        ref="printPageRef"
        @printSuccess="printSuccess"
        @closeLoading="closePringLoading"
      >
        <!-- 自定義觸發(fā)按鈕 -->
        <template #default="{ isLoading }">
          <el-button :loading="isLoading" type="warning" @click="printFn()" >
            批量打印
          </el-button>
        </template>
      </PdfMergePrinter>

const printFn = useDebounceFn(() => print(), 300);
const print = () => {
	//pdf的url數(shù)組
	const pdfUrls = [
	"https://this.is.pdfurl1.pdf",
	"https://this.is.pdfurl2.pdf"
	]
	 printPageRef.value.startPrint(pdfUrls);
};
const printSuccess=()=>{
//預覽彈窗關(guān)閉時調(diào)用
}
const closePringLoading=()=>{
//關(guān)閉全局loading
}

三、兼容瀏覽器遇到的各種坑

1.360會阻止非用戶觸發(fā)window.print()

最開始使用的方案是pdf-lib + printJs ,直接彈出打印窗口。但是在360瀏覽器中有時不會彈出打印窗口。經(jīng)過排查發(fā)現(xiàn)pdf已經(jīng)拼接并渲染完成，問題處在window.print()上。360有時會把非用戶自發(fā)行為觸發(fā)的打印行為當作廣告屏蔽掉。

2. 360會阻止window.open

window.print()不行便嘗試了window.open()。在新窗口中打開拼接pdf，讓用戶手動觸發(fā)打印行為。你猜怎么著？window.open()也會被攔截。真的想對360說句謝謝。

最終決定的方案：彈出iframe彈窗，讓用戶觸發(fā)打印。

到此這篇關(guān)于Vue3+Typescript合并多個pdf并預覽打印的文章就介紹到這了,更多相關(guān)vue合并多個pdf內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: