'pdf预览'’’

zhangwei

2025-08-15 7339b8a9ccf09e6262cb71ac6c9b724cdfa6fe22

'pdf预览'’’

 src/api/types.ts

@@ -24,6 +24,25 @@
  id: string;
};

type getUploadToken = {
  policy: string;
  message: string;
  DirPath: string;
  id: string;
  x_oss_signature_version: string;
  x_oss_credential: string;
  x_oss_date: string;
  signature: string;
  security_token: string;
  url: string;
};

export type getUploadTokenResult = {
  success: boolean;
  result: getUploadToken;
  code: string | number;
};

export type CaptchaResult = {
  success: boolean;
  result: captchaImg;

 src/api/upload/index.ts

@@ -6,11 +6,14 @@

import { http } from "@/utils/http";
import { baseUrlApi, uploadUrlApi } from "../util";
import type { Result } from "../types";
import type { Result, getUploadTokenResult } from "../types";

// èŽ·å–上传Token
export const getUploadToken = () => {
  return http.request<Result>("get", baseUrlApi("/api/upFile/token"));
  return http.request<getUploadTokenResult>(
    "get",
    baseUrlApi("/api/upFile/token")
  );
};

export const uploadFileAli11 = (data, key) => {

 src/views/system/component/pdfPreview.vue

New file
@@ -0,0 +1,31 @@
<template>
  <div
    v-loading="isLoading"
    class="pdf-container"
    element-loading-text="加载中..."
  >
    <iframe
      id="printIframe"
      :src="pdfSrc"
      frameborder="0"
      style="width: 100%; height: 100%"
      @load="iframeLoaded"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import pdfSrc from "./四川招标投标交易服务平台用户操作手册（代理机构）.pdf";
let isLoading = ref(true);
const iframeLoaded = () => {
  console.log("jjjjjj");

  isLoading.value = false;
};
</script>
<style>
.pdf-container {
  height: 600px;
}
</style>

 src/views/system/component/ËÄ´¨ÕбêͶ±ê½»Ò×·þÎñƽ̨Óû§²Ù×÷Êֲᣨ´úÀí»ú¹¹£©.pdf

Binary files differ

 src/views/system/dept/index.vue

@@ -230,12 +230,12 @@
                <el-button type="primary" :loading="loading" @click="onSearch">
                  æœç´¢
                </el-button>
                <!-- <el-button
                <el-button
                :icon="useRenderIcon(Refresh)"
                @click="resetForm(formRef)"
              >
                é‡ç½®
              </el-button> -->
                </el-button>
                <el-button type="primary" @click="openDialog()">
                  æ–°å¢ž
                </el-button>

 src/views/system/dept/uploadform.vue

@@ -30,8 +30,25 @@
  }),
  isChange: null
});

const gonggaoRules = reactive({
interface FormInlineType {
  // é¡¹ç›®æ ‡é¢˜
  projectName: string | null | undefined;
  // æŠ•æ ‡æŠ¥åå¼€å§‹æ—¶é—´ï¼ˆé€šå¸¸ä¸ºISO日期字符串格式）
  toubiaoStartDate: string | null | undefined;
  // æŠ•æ ‡æŠ¥åç»“束时间
  toubiaoEndDate: string | null | undefined;
  // å¼€æ ‡æ—¶é—´
  kaibiaoDate: string | null | undefined;
  // æ‹›æ ‡æ–‡ä»¶ï¼ˆå¯èƒ½æ˜¯æ–‡ä»¶è·¯å¾„、ID或文件对象）
  zhaobiaowenjian: string | null | undefined;
  // å˜æ›´æ–‡ä»¶
  biangengwenjian: string | null | undefined;
  // é™„件（文本描述或路径）
  fujian: string | null | undefined;
  // å¼€æ ‡åœ°ç‚¹
  kaibiaodidian: string | null | undefined;
}
const gonggaoRules = reactive<FormRules<FormInlineType>>({
  projectName: [{ required: true, message: "请输入标题", trigger: "change" }],
  toubiaoStartDate: [
    { required: true, message: "请选择投标报名开始时间", trigger: "change" }
@@ -150,6 +167,8 @@
  let res = await getUploadToken();
  if (res.code == 200) {
    let keyVal = generateTimestampWithRandom(res.result.DirPath, file.name);
    let upUrl = res.result.url;
    let upPath = res.result.DirPath;
    let formData = new FormData();
    formData.append("policy", res.result.policy);
    formData.append(
@@ -166,9 +185,7 @@
    formData.append("key", keyVal); // æ–‡ä»¶å
    formData.append("file", file.raw); // file å¿…须为最后一个表单域
    uploadFileAli(formData, res.result.url).then(res => {
      let path = res.result.url + "/" + res.result.DirPath + keyVal;
      console.log(path);

      let path = `${upUrl}"/"${upPath}${upPath};`;
      if (props.isChange) {
        newFormInline.value.biangengwenjian = path;
      } else {

 src/views/system/dept/utils/hook.tsx

@@ -23,6 +23,7 @@
// import { useUserStoreHook } from "@/store/modules/user";
import type { PaginationProps } from "@pureadmin/table";

import pdfPreview from "../../component/pdfPreview.vue";
// const nowRole = computed(() => {
//   return useUserStoreHook().nowRole;
// });
@@ -286,9 +287,22 @@
  }

  function resetForm(formEl) {
    if (!formEl) return;
    formEl.resetFields();
    onSearch();
    // if (!formEl) return;
    // formEl.resetFields();
    // onSearch();

    addDialog({
      title: `预览pdf`,
      props: {},
      width: "60%",
      draggable: true,
      fullscreen: deviceDetection(),
      fullscreenIcon: true,
      sureBtnLoading: true,
      closeOnClickModal: false,
      contentRenderer: () => h(pdfPreview, { ref: formRef, formInline: null })
      // jsx è¯­æ³• ï¼ˆæ³¨æ„åœ¨.vue文件启用jsx语法，需要在script开启lang="tsx"）
    });
  }
  const checkboxAsRadio = data => {
    if (data.length > 1) {