Vue实现在线预览打印PDF：web-print-pdf技术深度解析

Vue前端界面 → web-print-pdf npm包 → Electron打印专家

<template>
  <div class="preview">
    <div class="content">
      <!-- 左侧：PDF预览区域 -->
      <div class="left">
        <PDFPreview 
          :pdfUrl="pdfComputedUrl"
          :loading="renderComputedProgress.renderPdfLoading"
          :progress="renderComputedProgress"
        />
      </div>
      
      <!-- 右侧：打印配置面板 -->
      <div class="right">
        <PrintConfigPanel 
          :form="state.form"
          @config-change="handleConfigChange"
        />
      </div>
    </div>
  </div>
</template>

const _renderPdfDoc = async () => {
  // 1. 重置状态
  state.pdfUrl = null;
  state.renderProgress = { startTime: Date.now() };
  
  // 2. 获取纸张配置
  const paper = state.papers?.find(one => one.value === state.form.paperFormat);
  
  if (paper && paper.width && paper.height) {
    try {
      // 3. 加载源PDF
      if (!sourcePdf.value) {
        sourcePdf.value = await fetch(paramsPdfUrl.value.pdfUrl)
          .then(res => res?.arrayBuffer());
      }
      
      // 4. 创建新PDF文档
      const newPdfDoc = await PDFDocument.create();
      const pdfDoc = await PDFDocument.load(sourcePdf.value, {
        parseSpeed: Infinity,
      });
      
      // 5. 逐页处理
      const pageCount = pdfDoc.getPageCount();
      for (let j = 0; j < pageCount; j++) {
        // 更新进度
        state.renderProgress = {
          ...state.renderProgress,
          page: j + 1,
          totalPages: pageCount,
          updateTime: Date.now(),
        };
        
        // 添加页面并应用配置
        const page = newPdfDoc.addPage([newPaperWidth, newPaperHeight]);
        const [embeddedPage] = await newPdfDoc.embedPdf(sourcePdf.value, [j]);
        
        // 应用缩放和旋转配置
        applyPageTransform(page, embeddedPage, paper, state.form);
      }
      
      // 6. 生成预览URL
      const pdfBytes = await newPdfDoc.save();
      const blob = new Blob([pdfBytes], { type: "application/pdf" });
      state.pdfUrl = URL.createObjectURL(blob);
      
    } catch (err) {
      console.error(err);
      state.pdfUrl = paramsPdfUrl.value.pdfUrl; // 降级到原始PDF
    }
  }
};

const applyPageTransform = (page, embeddedPage, paper, config) => {
  const { width, height } = embeddedPage.size();
  const [oldPageWidth, oldPageHeight] = [width, height];
  
  // 计算缩放比例
  const scale_x = paper.width / oldPageWidth;
  const scale_y = paper.height / oldPageHeight;
  let zoom = Math.min(scale_x, scale_y);
  
  // 横向模式处理
  if (config.landscape) {
    const scale_x = paper.width / oldPageHeight;
    const scale_y = paper.height / oldPageWidth;
    zoom = Math.min(scale_x, scale_y);
  }
  
  // 🎯 关键：根据缩放模式调整（与Chrome打印预览逻辑一致）
  if (config.scaleMode === "shrink" && zoom > 1) {
    zoom = 1; // shrink模式不放大，保持原始大小
  }
  
  // 计算居中位置
  const x = paper.width / 2 - (oldPageWidth * zoom) / 2;
  const y = paper.height / 2 - (oldPageHeight * zoom) / 2;
  
  // 应用变换
  page.drawPage(embeddedPage, {
    x,
    y,
    xScale: zoom,
    yScale: zoom,
    rotate: config.landscape ? degrees(-90) : undefined,
  });
};

// 财务报表：使用shrink模式，确保内容完整
const financialReport = {
  scaleMode: 'shrink',
  paperFormat: 'A4',
  landscape: false
};

// 照片打印：使用fit模式，最大化利用纸张
const photoPrint = {
  scaleMode: 'fit',
  paperFormat: '6x4',
  landscape: true
};

// 技术图纸：使用noscale模式，保持精确尺寸
const technicalDrawing = {
  scaleMode: 'noscale',
  paperFormat: 'A3',
  landscape: true
};

const renderComputedProgress = computed(() => {
  const { page = 1, totalPages = 1 } = state.renderProgress;
  const isFinish = page === totalPages;
  const wasteTime = (state.renderProgress.updateTime - state.renderProgress.startTime) / 1000;
  
  // 智能显示进度条：超过2秒才显示
  const showTopProgress = !isFinish && wasteTime > 2;
  
  return {
    progressText: isEnglish.value
      ? `Loading progress ${page}/${totalPages}`
      : `加载进度 ${page}/${totalPages}`,
    percent: ((page / totalPages) * 100).toFixed(0),
    showTopProgress,
    renderPdfLoading: state.renderPdfLoading && !showTopProgress,
  };
});

const getPapers = async (printerName) => {
  try {
    state.paperLoading = true;
    const papers = await getPrinterPaper({ printerName });
    state.papers = papers.map(paper => ({
      label: paper.name,
      value: paper.name,
      width: paper.width,
      height: paper.height,
    }));
  } finally {
    state.paperLoading = false;
  }
};

const scaleModeOptions = computed(() => [
  {
    label: "将页面缩小至可打印区域 (如果需要) (默认)",
    value: "shrink",
  },
  {
    label: "使用原始页面大小",
    value: "noscale",
  },
  {
    label: "调整页面至可打印区域",
    value: "fit",
  },
]);

const pageRangesNormalized = computed(() => {
  let pageRanges = null;
  if (+state.pageRangeType === 1) {
    // 全部页面
  } else if (+state.pageRangeType === 2) {
    // 自定义页面范围
    pageRanges = state.pageRangesInputs?.filter(item => item.from && item.to);
  }
  return { pageRanges, pageRangesLength: pageRanges?.length };
});

const handlePrint = async () => {
  const printOptions = {
    ...(props.pdfParams?.printOptions || {}),
    ...JSON.parse(JSON.stringify(state.form)),
  };
  
  state.printLoading = true;
  try {
    await printPreviewFile({
      pdfFilePath: props.pdfParams.pdfFilePath,
      printOptions,
    });
    message.success("打印成功！");
  } catch (err) {
    message.error(err?.message || "打印失败");
  } finally {
    state.printLoading = false;
  }
};

// 监听配置变化，自动重新渲染PDF
watch(
  () => JSON.stringify(pageRangesNormalized.value.pageRanges),
  (v1, v2) => {
    if (v1 !== v2) {
      state.form.pageRanges = pageRangesNormalized.value.pageRanges;
      renderPdfDoc(); // 重新渲染PDF
    }
  }
);

// 监听其他配置变化
watch(
  () => [
    state.form.paperFormat,
    state.form.scaleMode,
    state.form.landscape,
    state.form.colorful,
  ],
  () => renderPdfDoc(),
  { deep: true }
);

const getPageHeight = debounce(() => {
  const height = +getComputedStyle(
    document.getElementById("_printPreview")
  )?.height?.replace("px", "");
  state.clientHeight = height - 20 + "px";
}, 500);

onMounted(() => {
  getPageHeight();
  window.addEventListener("resize", getPageHeight);
});

const _renderPdfDoc = async () => {
  const currentRenderPdfDocTimestamp = state.renderPdfDocTimestamp;
  
  // 检查是否被中断
  const checkIsBreak = () => {
    return currentRenderPdfDocTimestamp !== state.renderPdfDocTimestamp;
  };
  
  // 在关键节点检查中断
  if (checkIsBreak()) return;
  
  // ... 渲染逻辑
};

onUnmounted(() => {
  window.removeEventListener("resize", getPageHeight);
  
  // 释放PDF URL
  if (state.pdfUrl && state.pdfUrl.startsWith('blob:')) {
    URL.revokeObjectURL(state.pdfUrl);
  }
});

// 财务报表预览打印
const financialReportPreview = {
  paperFormat: 'A4',
  scaleMode: 'fit',
  landscape: false,
  copies: 2,
  duplexMode: 'duplex',
  pageRanges: [{ from: 1, to: 10 }]
};

// 订单详情预览打印
const orderPrintPreview = {
  paperFormat: 'A5',
  scaleMode: 'shrink',
  landscape: false,
  copies: 1,
  colorful: false, // 黑白打印节省成本
};

// 教学资料预览打印
const educationPrintPreview = {
  paperFormat: 'A4',
  scaleMode: 'fit',
  landscape: true, // 横向打印
  copies: 30,
  duplexMode: 'duplexlong',
};