foucui 1.0.1

package/components/QiuBadge/utils/pdfFromElement.ts

@@ -0,0 +1,348 @@
+import html2canvas from 'html2canvas'
+import { jsPDF } from 'jspdf'
+import { qiuLoading } from '../../QiuLoading'
+
+type LoadingInstance = ReturnType<typeof qiuLoading.service>
+
+export type PaperKind = 'a4' | 'a3' | 'custom'
+export type PaperOrientation = 'portrait' | 'landscape'
+export interface PaperSpec {
+  size: PaperKind
+  orientation?: PaperOrientation
+  widthMm?: number
+  heightMm?: number
+}
+
+interface PdfProgressState {
+  phase: 'render' | 'compose' | 'save'
+  current: number
+  total: number
+  percent: number
+  text: string
+}
+
+interface PdfBuildOptions {
+  onProgress?: (state: PdfProgressState) => void
+}
+
+function normalizePaperSpec(paper: PaperKind | PaperSpec): PaperSpec {
+  if (typeof paper === 'string') {
+    return { size: paper, orientation: 'portrait' }
+  }
+  return {
+    size: paper.size,
+    orientation: paper.orientation ?? 'portrait',
+    widthMm: Number(paper.widthMm || 0) || undefined,
+    heightMm: Number(paper.heightMm || 0) || undefined,
+  }
+}
+
+function createJsPdfDocument(spec: PaperSpec): jsPDF {
+  const isCustom = spec.size === 'custom'
+  return new jsPDF({
+    unit: 'mm',
+    format: isCustom ? [Math.max(1, Number(spec.widthMm || 0)), Math.max(1, Number(spec.heightMm || 0))] : spec.size === 'a4' ? 'a4' : 'a3',
+    orientation: isCustom ? 'p' : spec.orientation === 'landscape' ? 'l' : 'p',
+    compress: true,
+  })
+}
+
+function cssPageSize(spec: PaperSpec): string {
+  if (spec.size === 'custom') {
+    return `${Math.max(1, Number(spec.widthMm || 0))}mm ${Math.max(1, Number(spec.heightMm || 0))}mm`
+  }
+  return `${spec.size.toUpperCase()} ${spec.orientation}`
+}
+
+/**
+ * 将 DOM 区域导出为多页 PDF（按纸张高度纵向切片），供证件/桌面贴整版预览下载。
+ */
+export async function downloadPdfFromHtmlElement(
+  element: HTMLElement,
+  filename: string,
+  paper: PaperKind | PaperSpec
+): Promise<void> {
+  const loading = createPdfLoading()
+  const spec = normalizePaperSpec(paper)
+  try {
+    updatePdfLoading(loading, {
+      phase: 'render',
+      current: 0,
+      total: 1,
+      percent: 5,
+      text: '正在渲染第 1 / 1 页 5%',
+    })
+    const pdf = createJsPdfDocument(spec)
+    const pageW = pdf.internal.pageSize.getWidth()
+    const pageH = pdf.internal.pageSize.getHeight()
+    const margin = 8
+    const usableW = pageW - 2 * margin
+    const usableH = pageH - 2 * margin
+
+    const canvas = await html2canvas(element, {
+      scale: 2,
+      useCORS: true,
+      logging: false,
+      backgroundColor: '#ffffff',
+      scrollX: 0,
+      scrollY: -window.scrollY,
+      windowWidth: element.scrollWidth,
+      windowHeight: element.scrollHeight,
+    })
+
+    updatePdfLoading(loading, {
+      phase: 'compose',
+      current: 1,
+      total: 1,
+      percent: 75,
+      text: '正在写入 PDF 75%',
+    })
+
+    const imgW = canvas.width
+    const imgH = canvas.height
+    const ratio = usableW / imgW
+    const sliceSourceH = usableH / ratio
+
+    let srcY = 0
+    let first = true
+    while (srcY < imgH - 0.5) {
+      if (!first) pdf.addPage()
+      first = false
+      const sliceH = Math.min(sliceSourceH, imgH - srcY)
+      const sliceCanvas = document.createElement('canvas')
+      sliceCanvas.width = imgW
+      sliceCanvas.height = Math.ceil(sliceH)
+      const ctx = sliceCanvas.getContext('2d')
+      if (!ctx) break
+      ctx.drawImage(canvas, 0, srcY, imgW, sliceH, 0, 0, imgW, sliceH)
+      const data = sliceCanvas.toDataURL('image/png', 0.92)
+      const displayH = sliceH * ratio
+      pdf.addImage(data, 'PNG', margin, margin, usableW, displayH)
+      srcY += sliceH
+    }
+
+    updatePdfLoading(loading, {
+      phase: 'save',
+      current: 1,
+      total: 1,
+      percent: 100,
+      text: '正在下载 PDF 100%',
+    })
+    pdf.save(filename)
+  } finally {
+    closePdfLoading(loading)
+  }
+}
+
+export async function downloadPdfPagesFromElements(
+  pages: HTMLElement[],
+  filename: string,
+  paper: PaperKind | PaperSpec
+): Promise<void> {
+  if (!pages.length) return
+  const loading = createPdfLoading()
+  try {
+    const pdf = await buildPdfFromElements(pages, paper, {
+      onProgress: (state) => updatePdfLoading(loading, state),
+    })
+    updatePdfLoading(loading, {
+      phase: 'save',
+      current: pages.length,
+      total: pages.length,
+      percent: 100,
+      text: '正在下载 PDF 100%',
+    })
+    pdf.save(filename)
+  } finally {
+    closePdfLoading(loading)
+  }
+}
+
+export async function printPdfPagesFromElements(
+  pages: HTMLElement[],
+  title: string,
+  paper: PaperKind | PaperSpec
+): Promise<void> {
+  if (!pages.length) return
+  const loading = qiuLoading.service({
+    fullscreen: true,
+    text: '正在准备打印预览',
+  })
+  const spec = normalizePaperSpec(paper)
+  const styleHtml = Array.from(document.querySelectorAll('style'))
+    .map((node) => node.outerHTML)
+    .join('\n')
+  const linkHtml = Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
+    .map((node) => node.outerHTML)
+    .join('\n')
+  const pageSize = cssPageSize(spec)
+  const bodyHtml = pages
+    .map((page) => `<section class="print-page">${page.outerHTML}</section>`)
+    .join('\n')
+  const iframe = document.createElement('iframe')
+  iframe.setAttribute('aria-hidden', 'true')
+  iframe.style.position = 'fixed'
+  iframe.style.left = '-10000px'
+  iframe.style.top = '0'
+  iframe.style.width = '1px'
+  iframe.style.height = '1px'
+  iframe.style.border = '0'
+  iframe.style.opacity = '0'
+  iframe.style.pointerEvents = 'none'
+  document.body.appendChild(iframe)
+
+  const doc = iframe.contentDocument
+  const win = iframe.contentWindow
+  if (!doc || !win) {
+    iframe.remove()
+    loading.close()
+    throw new Error('打印环境初始化失败')
+  }
+  iframe.title = title
+  iframe.srcdoc = `<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>${escapeHtml(title)}</title>
+  ${linkHtml}
+  ${styleHtml}
+  <style>
+    @page { size: ${pageSize}; margin: 0; }
+    html, body {
+      margin: 0;
+      padding: 0;
+      background: #fff;
+    }
+    body {
+      -webkit-print-color-adjust: exact;
+      print-color-adjust: exact;
+    }
+    .print-page {
+      break-after: page;
+      page-break-after: always;
+    }
+    .print-page:last-child {
+      break-after: auto;
+      page-break-after: auto;
+    }
+    .pdf-page {
+      margin: 0 !important;
+      box-shadow: none !important;
+    }
+  </style>
+</head>
+<body>
+${bodyHtml}
+</body>
+</html>`
+  try {
+    await waitForPrintWindow(win)
+    loading.close()
+    win.focus()
+    await new Promise((resolve) => window.setTimeout(resolve, 180))
+    win.print()
+  } finally {
+    window.setTimeout(() => loading.close(), 120)
+  }
+
+  win.addEventListener(
+    'afterprint',
+    () => {
+      window.setTimeout(() => {
+        iframe.remove()
+      }, 300)
+    },
+    { once: true }
+  )
+  window.setTimeout(() => {
+    iframe.remove()
+  }, 4000)
+}
+
+async function buildPdfFromElements(
+  pages: HTMLElement[],
+  paper: PaperKind | PaperSpec,
+  options: PdfBuildOptions = {}
+): Promise<jsPDF> {
+  const spec = normalizePaperSpec(paper)
+  const pdf = createJsPdfDocument(spec)
+  const pageW = pdf.internal.pageSize.getWidth()
+  const pageH = pdf.internal.pageSize.getHeight()
+
+  for (let i = 0; i < pages.length; i++) {
+    if (i > 0) pdf.addPage()
+    options.onProgress?.({
+      phase: 'render',
+      current: i + 1,
+      total: pages.length,
+      percent: Math.min(95, Math.round(((i + 1) / pages.length) * 90)),
+      text: `正在渲染第 ${i + 1} / ${pages.length} 页`,
+    })
+    const canvas = await html2canvas(pages[i], {
+      scale: 2,
+      useCORS: true,
+      logging: false,
+      backgroundColor: '#ffffff',
+      scrollX: 0,
+      scrollY: -window.scrollY,
+      windowWidth: pages[i].scrollWidth,
+      windowHeight: pages[i].scrollHeight,
+    })
+    const data = canvas.toDataURL('image/png', 0.92)
+    pdf.addImage(data, 'PNG', 0, 0, pageW, pageH)
+  }
+
+  return pdf
+}
+
+function createPdfLoading(): LoadingInstance {
+  return qiuLoading.service({
+    fullscreen: true,
+    text: '正在生成 PDF 0%',
+  })
+}
+
+function updatePdfLoading(loading: LoadingInstance, state: PdfProgressState): void {
+  void state
+  /* QiuLoading has no setText API; close and reopen with updated text would flicker — keep initial text */
+}
+
+function closePdfLoading(loading: LoadingInstance): void {
+  window.setTimeout(() => loading.close(), 120)
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
+async function waitForPrintWindow(win: Window): Promise<void> {
+  await new Promise<void>((resolve) => {
+    if (win.document.readyState === 'complete') {
+      resolve()
+      return
+    }
+    win.addEventListener('load', () => resolve(), { once: true })
+    setTimeout(() => resolve(), 1200)
+  })
+  const images = Array.from(win.document.images)
+  await Promise.all(
+    images.map(
+      (img) =>
+        new Promise<void>((resolve) => {
+          if (img.complete) {
+            resolve()
+            return
+          }
+          img.addEventListener('load', () => resolve(), { once: true })
+          img.addEventListener('error', () => resolve(), { once: true })
+          setTimeout(() => resolve(), 1200)
+        })
+    )
+  )
+}

package/components/QiuBadge/views/BadgeLibraryView.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="page-container badge-library-page">
+    <div class="page-head">
+      <h2 class="page-h2">证件图片库</h2>
+      <p class="page-desc">管理模板编辑中上传的图片，可删除不再使用的文件；删除后已保存模板里若仍引用该地址将无法显示。</p>
+    </div>
+
+    <BadgeLibraryPanel />
+  </div>
+</template>
+
+<script setup lang="ts">
+import BadgeLibraryPanel from '../components/BadgeLibraryPanel.vue'
+</script>
+
+<style scoped>
+.page-head {
+  margin-bottom: 16px;
+}
+.page-h2 {
+  margin: 0 0 8px;
+  font-size: 20px;
+  font-weight: 600;
+  color: #303133;
+}
+.page-desc {
+  margin: 0;
+  font-size: 14px;
+  color: #909399;
+  line-height: 1.5;
+}
+</style>