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

一、打印pdf组件

javascript 复制代码
<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">关闭</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();
  }
};
// 在关闭时释放资源
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>

二、 使用方法

javascript 复制代码
 <PdfMergePrinter
        ref="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
}

三、兼容浏览器遇到的各种坑

1.360会阻止非用户触发window.print()

最开始使用的方案是pdf-lib + printJs ,直接弹出打印窗口。但是在360浏览器中有时不会弹出打印窗口。经过排查发现pdf已经拼接并渲染完成,问题处在window.print()上。360有时会把非用户自发行为触发的打印行为当作广告屏蔽掉。

2. 360会阻止window.open

window.print()不行便尝试了window.open()。在新窗口中打开拼接pdf,让用户手动触发打印行为。你猜怎么着?window.open()也会被拦截。真的想对360说句谢谢。

最终决定的方案:弹出iframe弹窗,让用户触发打印。

相关推荐
xptwop1 小时前
05-ES6
前端·javascript·es6
Heo1 小时前
调用通义千问大模型实现流式对话
前端·javascript·后端
前端小巷子2 小时前
深入 npm 模块安装机制
前端·javascript·面试
软件工程小施同学2 小时前
计算机学报 2025年 区块链论文 录用汇总 附pdf下载
pdf·区块链
深职第一突破口喜羊羊3 小时前
记一次electron开发插件市场遇到的问题
javascript·electron
cypking3 小时前
electron中IPC 渲染进程与主进程通信方法解析
前端·javascript·electron
西陵3 小时前
Nx带来极致的前端开发体验——借助playground开发提效
前端·javascript·架构
江城开朗的豌豆4 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
float_六七4 小时前
JavaScript:现代Web开发的核心动力
开发语言·前端·javascript
zhaoyang03014 小时前
vue3笔记(2)自用
前端·javascript·笔记