@jzt-packages/components 1.0.0

package/src/JztFilePreview/components/pdfViewer.vue

@@ -0,0 +1,221 @@
+<template>
+  <div v-loading="loading" class="pdf-preview column-center">
+    <div
+      v-if="state.numPages > 1"
+      class="pageSize-tool flx-evenly-center cursor-pointer"
+    >
+      <span @click="lastPage">上一页</span>
+      <span class="ml10 mr10">{{ state.pageNum }}/{{ state.numPages }}</span>
+      <span @click="nextPage">下一页</span>
+    </div>
+    <el-scrollbar style="width: 100%; height: 100%">
+      <div
+        ref="wrapRef"
+        class="pdf-wrap"
+        @mousedown="onDragStart"
+        @mousemove="onDragMove"
+        @mouseup="onDragEnd"
+        @mouseleave="onDragEnd"
+        @wheel.prevent="onWheel"
+      >
+        <vue-pdf-embed
+          v-if="blobUrl"
+          id="printContent"
+          :source="blobUrl"
+          :scale="zoomState.scaleValue"
+          :style="scaleFun"
+          class="vue-pdf-embed"
+          :page="state.pageNum"
+          @loaded="handleLoaded"
+          @loading-failed="handleLoadingFailed"
+        />
+      </div>
+    </el-scrollbar>
+    <div class="page-tool flx-evenly-center cursor-pointer">
+      <span @click="useDownloadFile(blobUrl, pdfName)">
+        <el-tooltip effect="dark" content="下载" placement="top">
+          <i class="iconfont icon-xiazai"></i>
+        </el-tooltip>
+      </span>
+      <span @click="printFile({ printable: blobUrl, type: 'pdf' })">
+        <el-tooltip effect="dark" content="打印" placement="top">
+          <i class="iconfont icon-dayin"></i>
+        </el-tooltip>
+      </span>
+
+      <span @click="resetZoom">
+        <el-tooltip effect="dark" content="适应" placement="top">
+          <i class="iconfont icon-shiyingchuangkou"></i>
+        </el-tooltip>
+      </span>
+      <div class="flx-center">
+        <span @click="pageZoomOut">
+          <el-tooltip effect="dark" content="放大" placement="top">
+            <i class="iconfont icon-fangda"></i>
+          </el-tooltip>
+        </span>
+        <span class="ml10 mr10">{{ Math.round(zoomState.scaleValue * 100) }}%</span>
+        <span @click="pageZoomIn">
+          <el-tooltip effect="dark" content="缩小" placement="top">
+            <i class="iconfont icon-suoxiao"></i>
+          </el-tooltip>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { printFile, useDownloadFile } from "@jzt-spd/utils";
+import { computed, reactive, ref, watch, onBeforeUnmount } from "vue";
+import VuePdfEmbed from "vue-pdf-embed";
+import { usePdfDragZoom } from '../hooks/useImageMethod'
+
+const props = defineProps<{
+  pdfUrl: string;
+  pdfName: string;
+}>();
+
+const {
+  state: zoomState,
+  wrapRef,
+  scaleFun,
+  pageZoomOut,
+  pageZoomIn,
+  resetZoom,
+  onDragStart,
+  onDragMove,
+  onDragEnd,
+  onWheel
+} = usePdfDragZoom()
+
+const state = reactive({
+  pageNum: 1, //当前页面
+  numPages: 0, // 总页数
+});
+
+// 通过 web 服务器同源请求获取 PDF，cookie 自动携带
+const blobUrl = ref('')
+const loading = ref(true)
+let fetching = false
+
+const fetchPdfBlob = async (url: string) => {
+  if (fetching) return
+  fetching = true
+  try {
+    const response = await fetch(url, {
+      credentials: 'include'
+    })
+    if (!response.ok) throw new Error(`HTTP ${response.status}`)
+    // 校验返回内容是否为 PDF，避免 vite SPA fallback 返回 HTML
+    const contentType = response.headers.get('content-type') || ''
+    if (!contentType.includes('pdf') && !contentType.includes('octet-stream')) {
+      throw new Error(`Invalid content type: ${contentType}`)
+    }
+    const blob = await response.blob()
+    if (blobUrl.value) URL.revokeObjectURL(blobUrl.value)
+    blobUrl.value = URL.createObjectURL(new Blob([blob], { type: 'application/pdf' }))
+  } catch {
+    loading.value = false
+  } finally {
+    fetching = false
+  }
+}
+
+watch(
+  () => props.pdfUrl,
+  url => {
+    if (url) fetchPdfBlob(url)
+  },
+  { immediate: true }
+)
+
+onBeforeUnmount(() => {
+  if (blobUrl.value) URL.revokeObjectURL(blobUrl.value)
+})
+
+// 上一页
+function lastPage() {
+  if (state.pageNum > 1) {
+    state.pageNum -= 1;
+  }
+}
+// 下一页
+function nextPage() {
+  if (state.pageNum < state.numPages) {
+    state.pageNum += 1;
+  }
+}
+// pdf加载完成
+const handleLoaded = doc => {
+  state.numPages = doc.numPages || 0;
+  loading.value = false;
+};
+
+// pdf加载失败
+const handleLoadingFailed = () => {
+  loading.value = false;
+};
+
+defineExpose({
+  pageZoomOut,
+  pageZoomIn,
+})
+</script>
+
+<style lang="scss" scoped>
+.pdf-preview {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .el-scrollbar__view {
+    height: 100%;
+  }
+  .iconfont {
+    font-size: 22px;
+  }
+  .pdf-wrap {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    cursor: grab;
+    // .vue-pdf-embed {
+    //   box-sizing: border-box;
+    // }
+  }
+  .pageSize-tool {
+    position: absolute;
+    top: 0px;
+    left: 50%;
+    right: 50%;
+    transform: translateX(-50%);
+    width: 220px;
+    height: 30px;
+    opacity: 0.8;
+    border-radius: 8px;
+    background: #333333;
+    z-index: 10;
+    span {
+      color: white;
+      font-size: 14px;
+    }
+  }
+  .page-tool {
+    position: absolute;
+    bottom: 6px;
+    left: 50%;
+    right: 50%;
+    transform: translateX(-50%);
+    width: 310px;
+    height: 42px;
+    border-radius: 8px;
+    opacity: 0.8;
+    background: #333333;
+    z-index: 10;
+    span {
+      color: white;
+      padding: 0 5px;
+    }
+  }
+}
+</style>

package/src/JztFilePreview/hooks/useImageMethod.ts

@@ -0,0 +1,256 @@
+import { ref, reactive, computed } from 'vue'
+
+// 缩放范围常量（图片和 PDF 共用）
+export const minScale = 0.5
+export const maxScale = 4
+export const zoomFactor = 0.5
+
+/**
+ * 图片拖拽 + 滚轮缩放 + 旋转 composable
+ * 独立状态，每个图片预览实例互不干扰
+ */
+export const useImageDragZoom = () => {
+  const scaleValue = ref(1)
+  const offsetX = ref(0)
+  const offsetY = ref(0)
+  const rotateDeg = ref(0)
+  const targetEleRef = ref<HTMLElement | null>(null)
+  let dragMoveHandler = (e: MouseEvent) => {}
+  let dragUpHandler = () => {}
+
+  /**
+   * 从 ref 解析真实 DOM 元素
+   * targetEleRef 可能挂在原生元素上，也可能挂在 Vue 组件（如 el-image）上，
+   * 后者的 ref 值是组件实例，需要取其根 DOM 元素（$el）。
+   */
+  const getEl = (): HTMLElement | null => {
+    const raw = targetEleRef.value as any
+    if (!raw) return null
+    if (raw.nodeType === 1) return raw as HTMLElement // 原生 DOM 元素
+    if (raw.$el && raw.$el.nodeType === 1) return raw.$el as HTMLElement // Vue 组件根元素
+    return null
+  }
+
+  /**
+   * 应用变换样式（缩放 + 偏移 + 旋转）
+   */
+  const applyTransform = () => {
+    const el = getEl()
+    if (!el) return
+    el.style.transform = `rotate(${rotateDeg.value}deg)
+      scale(${scaleValue.value})
+      translate(${offsetX.value}px, ${offsetY.value}px)
+    `
+  }
+
+  /**
+   * 设置拖动事件监听器
+   */
+  const setupDragEvents = () => {
+    const el = getEl()
+    if (!el) return
+
+    let isDragging = false
+    let startX = 0
+    let startY = 0
+
+    // 清理旧监听器（防止重复绑定）
+    document.removeEventListener('mousemove', dragMoveHandler)
+    document.removeEventListener('mouseup', dragUpHandler)
+
+    // 新监听器
+    const moveHandler = (e: MouseEvent) => {
+      if (!isDragging) return
+      offsetX.value = e.clientX - startX
+      offsetY.value = e.clientY - startY
+      applyTransform()
+    }
+
+    const upHandler = () => {
+      isDragging = false
+      el.style.cursor = 'grab'
+    }
+
+    // 保存引用用于下次清理
+    dragMoveHandler = moveHandler
+    dragUpHandler = upHandler
+
+    el.addEventListener('mousedown', (e: MouseEvent) => {
+      e.preventDefault()
+      isDragging = true
+      startX = e.clientX - offsetX.value
+      startY = e.clientY - offsetY.value
+      el.style.cursor = 'grabbing'
+    })
+
+    document.addEventListener('mousemove', moveHandler)
+    document.addEventListener('mouseup', upHandler)
+  }
+
+  /**
+   * 设置滚轮缩放事件监听器
+   */
+  const setupWheelEvent = () => {
+    const el = getEl()
+    if (!el) return
+
+    el.addEventListener(
+      'wheel',
+      (e: WheelEvent) => {
+        e.preventDefault()
+
+        if (e.deltaY < 0) {
+          if (scaleValue.value < maxScale) scaleValue.value += zoomFactor
+        } else {
+          if (scaleValue.value > minScale) scaleValue.value -= zoomFactor
+        }
+
+        applyTransform()
+      },
+      { passive: false }
+    )
+  }
+
+  /**
+   * 初始化缩放、旋转、偏移等状态
+   */
+  const resetImageInfo = () => {
+    scaleValue.value = 1
+    offsetX.value = 0
+    offsetY.value = 0
+    rotateDeg.value = 0
+    applyTransform()
+  }
+
+  /**
+   * 旋转图片
+   */
+  const useRotateImg = () => {
+    const el = getEl()
+    if (el) {
+      rotateDeg.value += 90
+      el.style.transform = `rotate(${rotateDeg.value}deg)`
+      el.style.transition = 'transform 0.3s ease'
+    }
+  }
+
+  /**
+   * 放大
+   */
+  const pageZoomOut = () => {
+    if (scaleValue.value < maxScale) {
+      scaleValue.value += zoomFactor
+      applyTransform()
+    }
+  }
+
+  /**
+   * 缩小
+   */
+  const pageZoomIn = () => {
+    if (scaleValue.value > minScale) {
+      scaleValue.value -= zoomFactor
+      applyTransform()
+    }
+  }
+
+  return {
+    targetEleRef,
+    scaleValue,
+    setupDragEvents,
+    setupWheelEvent,
+    resetImageInfo,
+    useRotateImg,
+    pageZoomOut,
+    pageZoomIn
+  }
+}
+
+/**
+ * PDF 拖拽 + 滚轮缩放 composable
+ * 独立状态，每个 PDF 实例互不干扰
+ */
+export const usePdfDragZoom = () => {
+  const state = reactive({
+    scaleValue: 1,
+    isDragging: false,
+    startX: 0,
+    startY: 0,
+    offsetX: 0,
+    offsetY: 0
+  })
+  const wrapRef = ref<HTMLElement | null>(null)
+
+  // 缩放 + 拖拽偏移的 transform 样式
+  const scaleFun = computed(() => ({
+    width: '58%',
+    height: '100%',
+    transformOrigin: 'top center',
+    transform: `translate(${state.offsetX}px, ${state.offsetY}px) scale(${state.scaleValue})`
+  }))
+
+  // 放大
+  const pageZoomOut = () => {
+    if (state.scaleValue < maxScale) {
+      state.scaleValue += zoomFactor
+    }
+  }
+
+  // 缩小
+  const pageZoomIn = () => {
+    if (state.scaleValue > minScale) {
+      state.scaleValue -= zoomFactor
+    }
+  }
+
+  // 重置缩放和偏移
+  const resetZoom = () => {
+    state.scaleValue = 1
+    state.offsetX = 0
+    state.offsetY = 0
+  }
+
+  // 鼠标拖拽开始
+  const onDragStart = (e: MouseEvent) => {
+    if (state.scaleValue <= 1) return
+    state.isDragging = true
+    state.startX = e.clientX - state.offsetX
+    state.startY = e.clientY - state.offsetY
+    if (wrapRef.value) wrapRef.value.style.cursor = 'grabbing'
+  }
+
+  // 鼠标拖拽移动
+  const onDragMove = (e: MouseEvent) => {
+    if (!state.isDragging) return
+    state.offsetX = e.clientX - state.startX
+    state.offsetY = e.clientY - state.startY
+  }
+
+  // 鼠标拖拽结束
+  const onDragEnd = () => {
+    state.isDragging = false
+    if (wrapRef.value) wrapRef.value.style.cursor = 'grab'
+  }
+
+  // 鼠标滚轮缩放
+  const onWheel = (e: WheelEvent) => {
+    if (e.deltaY < 0) {
+      pageZoomOut()
+    } else {
+      pageZoomIn()
+    }
+  }
+
+  return {
+    state,
+    wrapRef,
+    scaleFun,
+    pageZoomOut,
+    pageZoomIn,
+    resetZoom,
+    onDragStart,
+    onDragMove,
+    onDragEnd,
+    onWheel
+  }
+}

package/src/JztFilePreview/index.scss

@@ -0,0 +1,171 @@
+.is-fullscreen .dialog-content {
+  // height: calc(100vh - 90px);
+  height: 100%;
+}
+
+.el-dialog__body {
+  height: calc(100vh - 100px);
+}
+
+.dialog-content {
+  overflow: hidden;
+  height: calc(75vh - 20px);
+  // height: 100%;
+  margin: -5px;
+
+  .left-list {
+    height: 100%;
+
+    .el-scrollbar {
+      height: calc(100% - 40px);
+    }
+
+    .footer {
+      height: 40px;
+      text-align: center;
+      font-size: 14px;
+      line-height: 40px;
+      font-weight: 600;
+      color: #333333;
+    }
+  }
+
+  .thumbnail {
+    flex-wrap: wrap;
+    width: 350px;
+    height: 100%;
+    overflow: hidden;
+
+    &.single {
+      width: 180px;
+    }
+    .thumbnail-item {
+      margin: 10px;
+      width: 150px;
+
+      .thumbnail-box {
+        width: 150px;
+        height: 92px;
+        border-radius: 4px;
+        border: 2px solid transparent;
+        background: #f6f7f9;
+        box-sizing: border-box;
+        &.active-item {
+          border: 2px solid var(--el-color-primary);
+        }
+        &.pdf-box {
+          padding: 18px;
+        }
+      }
+      .thumbnail-image {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+      .fileName {
+        width: 150px;
+        height: 22px;
+        text-align: left;
+        font-size: 14px;
+        line-height: 22px;
+      }
+    }
+  }
+  .preview {
+    position: relative;
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .fileName {
+      font-size: 16px;
+      line-height: 26px;
+      font-weight: 600;
+    }
+
+    .preview-item {
+      flex: 1;
+      height: 100%;
+      background-color: #f6f7f9;
+      overflow: hidden;
+      padding: 10px;
+      .preview-image {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        pointer-events: auto;
+        touch-action: none;
+        user-select: none;
+        cursor: grab;
+        will-change: transform;
+        transform-origin: center;
+      }
+      .circle {
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        opacity: 0.8;
+        border: 1px solid #bbbfc2;
+        background: #ffffffcc;
+      }
+
+      .previous {
+        position: absolute;
+        left: 24px;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 10;
+        cursor: pointer;
+      }
+      .next {
+        position: absolute;
+        right: 24px;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 10;
+        cursor: pointer;
+      }
+    }
+
+    .page-tool {
+      position: absolute;
+      bottom: 16px;
+      left: 50%;
+      right: 50%;
+      transform: translateX(-50%);
+      width: 378px;
+      height: 42px;
+      border-radius: 8px;
+      opacity: 0.8;
+      background: #333333;
+      z-index: 10;
+      span {
+        color: #fff;
+        padding: 0 5px;
+      }
+    }
+  }
+}
+
+// @media print {
+//   @page {
+//     size: A4; /* 或其他你需要的页面大小 */
+//     margin: 10mm; /* 设置合适的边距 */
+//   }
+// }
+
+// @media print {
+//   @page {
+//     size: auto;
+//     margin: 0;
+//   }
+//   body {
+//     margin: 0;
+//     padding: 0;
+//     img {
+//       width: 100%;
+//       height: 100%;
+//       object-fit: contain;
+//     }
+//   }
+// }

package/src/JztFilePreview/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <!-- <span class="ml10">请上传 .xls , .xlsx 标准格式文件，文件最大为 {{ parameter.fileSize }}M</span>  -->
+  <jzt-dialog
+    v-model="dialogVisible"
+    :title="title"
+    width="75%"
+    :cancel-text="false"
+    :confirm-text="false"
+    :show-footer="false"
+    @close="closeDialog"
+  >
+    <previewFile ref="previewFileRef" :showList="showList" :showHeader="showHeader">
+      <template v-if="slots.leftContent" #leftContent>
+        <slot name="leftContent"></slot>
+      </template>
+    </previewFile>
+  </jzt-dialog>
+</template>
+
+<script setup lang="ts" name="JztFilePreview">
+import { ref, nextTick, useSlots } from 'vue'
+import { FileItemProps } from './interface/index'
+import JztDialog from '../JztDialog/index.vue'
+import previewFile from './previewFile.vue'
+
+export interface FilePreview {
+  title?: string
+  showList?: boolean
+  showHeader?: boolean
+}
+const props = withDefaults(defineProps<FilePreview>(), {
+  title: '证照预览',
+  showList: true, // 是否展示左边的缩略图列表
+  showHeader: true // 是否展示头部
+})
+const slots = useSlots()
+const dialogVisible = ref(false)
+const previewFileRef = ref()
+
+/**
+ * @description 打开预览弹框
+ * @param file 文件
+ * @param number  点击打开的是第几个文件
+ * */
+const openDialog = (list: string, curIndex: number = 0) => {
+  dialogVisible.value = true
+  nextTick(() => {
+    previewFileRef.value.setFileInfo(list, curIndex)
+  })
+}
+
+// 关闭弹框
+const closeDialog = () => {
+  dialogVisible.value = false
+  previewFileRef.value.closePreview()
+}
+
+defineExpose({
+  openDialog
+})
+</script>
+<style lang="scss" scoped>
+@use './index';
+
+.iconfont {
+  font-size: 22px;
+}
+</style>