cloudfile-ui/src/components/Pdf2Word/Pdf2Word.vue

<template>
  <!-- <el-dialog v-model="isOpen" title="文字识别" width="55%"> -->
  <div class="container">
    <div v-if="thisStep === 'start'" class="up_box">
      <div class="left_box">
        <div class="upimg_box boder_box">
          <!-- <el-upload
            v-if="!showImg"
            class="avatar-uploader"
            :drag="true"
            :action="actionUrl"
            :headers="headersObj"
            accept=".pdf, .PDF"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeUp"
          >
            <img src="@/assets/images/Frame427319159.png" class="avatar" />
            <span>将文件拖入框内/点击按钮上传文件</span>
          </el-upload> -->
          <el-upload
            v-if="!showImg"
            class="avatar-uploader"
            :drag="true"
            :http-request="test"
            accept=".pdf, .PDF"
            :show-file-list="false"
            :before-upload="beforeUp"
          >
            <img src="@/assets/images/pdf2word.png" class="avatar" />
            <span>将文件拖入框内/点击按钮上传文件</span>
          </el-upload>
          <div v-else class="img_show">
            <img :src="toRaw(showImg)" class="avatar" />
          </div>
        </div>
        <div class="sunmit_btn">
          <el-upload
            class="avatar-uploader"
            :http-request="test"
            accept=".pdf, .PDF"
            :show-file-list="false"
            :before-upload="beforeUp"
          >
            <span>选择本地文件</span>
          </el-upload>
        </div>
      </div>
      <div class="right_box">
        <div class="upimg_box boder_box">
          <el-upload
            disabled
            class="avatar-uploader"
            :action="actionUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img @click="addlibraryImg" src="@/assets/images/cloudp2w.png" class="avatar" />
            <span>点击按钮选择文件</span>
          </el-upload>
        </div>
        <div class="sunmit_btn hand" @click="addlibraryImg">添加文库文件</div>
      </div>
      <!-- <el-button @click="test">测试</el-button> -->
    </div>
    <div v-if="thisStep === 'loading'" class="load-box">
      <div class="light_box">
        <img :src="toRaw(showImg)" class="avatar" />
        <div class="light"></div>
      </div>
      <div class="text_box">
        <span>请耐心等待扫描完成</span>
        <Loading :small="true"></Loading>
      </div>
    </div>
    <div v-if="thisStep === 'end'" class="end_box">
      <div class="left_box">
        <div class="boder_box">
          <div class="title">原始图片</div>
          <div class="upimg_box">
            <div class="img_show">
              <img :src="toRaw(showImg)" class="avatar" />
            </div>
          </div>
        </div>

        <div class="sunmit_btn">
          <!-- <el-upload
                  class="avatar-uploader"
                  action="http://192.168.1.28:8080/api/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeUp"
                > -->
          <span @click="reClick" class="hand">重新选择</span>
          <!-- </el-upload> -->
        </div>
      </div>
      <div class="right_box">
        <div class="boder_box">
          <div class="title" >识别结果</div>
          <div class="upimg_box">
            <el-scrollbar>
              <div class="text_box">
                {{ textData }}
              </div>
            </el-scrollbar>
          </div>
        </div>
        <div class="sunmit_btn copy-qb hand" @click="copyQbUrl()">复制结果</div>
      </div>
    </div>
  </div>
  <!-- </el-dialog> -->
  <PicTree
    :openFile="openFile"
    @close="openFile = false"
    :fileUserTreeData="treeData"
    @fileChangeMsg="fileChangeMsg"
  ></PicTree>
  <div
    v-loading.fullscreen="loadingPreview"
    v-if="loadingPreview"
    class="lodingBox"
  ></div>
</template>

<script setup>
import { onMounted, ref, toRaw, watch, inject } from "vue";
import { ElMessage } from "element-plus";
import Clipboard from "clipboard";
import Loading from "@/components/Loading/Loading.vue";
import PicTree from "@/components/PicTree/PicTree.vue"; //选择文件发送的列表
import { picTree, pdfTree } from "@/api/search/search.js";
import { ocrRemark, preview } from "@/api/common/common.js";
import { getInfo } from "@/api/biz/info.js";
import Cookies from "js-cookie";
import axios from "axios";
const textData = ref(""); //解析出来的文字
const showImg = ref(); //上传的图片
const isOpen = ref(props.openFile);
const thisStep = ref("start"); //解析进度 start,loading,end,
const openFile = ref(false); //控制tree显示
const treeData = ref(); //树节点数据
const actionUrl = ref(
  `${window.location.origin}${
    import.meta.env.VITE_APP_BASE_API
  }/biz/info/pdf2word`
);
const headersObj = ref({
  Authorization: Cookies.get("Admin-Token"),
});
// const actionUrl = ref(`${window.location.origin}/upload`);
const loadingPreview = ref(false);
const addFolderAdd = inject("addFolderAdd");

const props = defineProps({
  openFile: {
    type: Boolean,
    default: false,
  },
});
watch(
  () => props.openFile,
  (newValue) => {
    // console.log(111);
    isOpen.value = newValue;
  }
);

const test = function (file) {
  // console.log("file", file);
  const url = `${window.location.origin}${
    import.meta.env.VITE_APP_BASE_API
  }/biz/info/pdf2word`;
  return axios({
    method: "post",
    url: url,
    responseType: "blob",
    data: file,
    headers: {
      Authorization: Cookies.get("Admin-Token"),
      "Content-Type": "multipart/form-data",
    },
  }).then(function (res) {
    // console.log("testres", res);
    if (res.headers["content-disposition"] !== undefined) {
      let blob = new Blob([res.data], {
        type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      });
      let fileName = decodeURI(res.headers["content-disposition"]);
      if (fileName) {
        fileName = fileName.substring(fileName.indexOf("=") + 1);
        fileName = fileName.substring(0, fileName.lastIndexOf("."));
        // alert(fileName)
      }
      const elink = document.createElement("a");
      // console.log("fileName", fileName);
      elink.download = fileName.replace(new RegExp('"', "g"), "") + ".docx";
      elink.style.display = "none";
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href);
      document.body.removeChild(elink);
      loadingPreview.value = false;
    }
  });
};
const fileId2Word = function (fileId) {
  // console.log("fileId", fileId);
  const url = `${window.location.origin}${
    import.meta.env.VITE_APP_BASE_API
  }/biz/info/pdf2word/${fileId}`;
  return axios({
    method: "get",
    url: url,
    responseType: "blob",
    headers: {
      Authorization: Cookies.get("Admin-Token"),
      "Content-Type": "multipart/form-data",
    },
  }).then(function (res) {
    // console.log("testres", res);
    if (res.headers["content-disposition"] !== undefined) {
      let blob = new Blob([res.data], {
        type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      });
      let fileName = decodeURI(res.headers["content-disposition"]);
      if (fileName) {
        fileName = fileName.substring(fileName.indexOf("=") + 1);
        fileName = fileName.substring(0, fileName.lastIndexOf("."));
        // alert(fileName)
      }
      const elink = document.createElement("a");
      // console.log("fileName", fileName);
      elink.download = fileName.replace(new RegExp('"', "g"), "") + ".docx";
      elink.style.display = "none";
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href);
      document.body.removeChild(elink);
      loadingPreview.value = false;
    }
  });
};

onMounted(async () => {});

const handleAvatarSuccess = (msg, file) => {
  // console.log('re', msg)
  const flieData = toRaw(file);
  // console.log('file', flieData)
  // setTimeout(() => {
  //   downLoadfile(flieData.raw,file);
  // }, 500);
  const blob = new Blob([msg]); //excel,pdf等
  const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象
  const a = document.createElement("a"); //创建a标签
  a.style.display = "none";
  a.href = href; // 指定下载链接
  a.download = file.name + ".docx"; //指定下载文件名
  a.click(); //触发下载
  URL.revokeObjectURL(a.href); //释放URL对象
  ElMessage({ message: "转换成功，已下载到本地", type: "success" });
  loadingPreview.value = false;
};
//文件上传前的钩子
const beforeUp = (raw) => {
  // console.log('raw',raw);
  // showImg.value = URL.createObjectURL(raw);
  loadingPreview.value = true;
  // thisStep.value = "loading";
};
// 复制功能调用的方法
const copyQbUrl = () => {
  let clipboard = new Clipboard(".copy-qb", {
    text: () => {
      return textData.value;
    },
  });
  clipboard.on("success", () => {
    // console.log('success');
    ElMessage({ message: "复制成功", type: "success" });
    clipboard.destroy();
  });
  clipboard.on("error", () => {
    // console.log('err');
    clipboard.destroy();
  });
};
// 选取文库图片
const addlibraryImg = async () => {
  const res = await pdfTree();
  // console.log("res", res);
  treeData.value = res;
  openFile.value = true;
};
//确定选中图片
const fileChangeMsg = async (val) => {
  // console.log("val", toRaw(val));
  loadingPreview.value = true;
  fileId2Word(val.remark);
  // const res = await getInfo(val.id)
  // const data = toRaw(val)
  // const imgRes = await preview(data.id)
  // thisStep.value = 'loading'
  // showImg.value = URL.createObjectURL(imgRes)
  // const res = await ocrRemark(data.remark)
  // thisStep.value = 'end'
  // textData.value = res.msg
  // console.log("res", res);
  // console.log("imgRes", imgRes);
};
const reClick = () => {
  thisStep.value = "start";
  textData.value = null;
  showImg.value = null;
};
// 文件下载
const downLoadfile = (res, file) => {
  // console.log('downLoadfileres',res);
  var reader = new FileReader();
  reader.onloadend = function (event) {
    //event 就是你要的返回内容
    //因为返回的报错格式是字符串，手动转换成对象，转换成功表示请求失败
    //转换失败就意味着你拿到的result是文件流，那么直接手动下载就好
    try {
      let data = JSON.parse(event.target.result);
    } catch (err) {
      const time = Date.now();
      // console.log('time',time);
      const link = document.createElement("a"); // 创建a标签
      let blob = new Blob([res]);
      link.style.display = "none";
      link.href = URL.createObjectURL(blob); // 创建下载的链接
      // link.setAttribute("download", clickRow.value.fileName); // 给下载后的文件命名
      link.setAttribute("download", file.name + ".docx"); // 给下载后的文件命名
      document.body.appendChild(link);
      link.click(); // 点击下载
      document.body.removeChild(link); //  完成移除元素
      window.URL.revokeObjectURL(link.href); // 释放blob对象
    }
  };
  // console.log('downLoadfileres',res);
  reader.readAsText(res);
};
</script>

<style lang="scss" scoped>
.lodingBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vh;
  height: 100vh;
  z-index: 10000000;
}
.container {
  width: 100%;
  height: 87vh;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;

  .up_box {
    display: flex;
    width: 100%;
    justify-content: center;
  }
  .left_box {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 48px;
    .boder_box {
      width: 100%;
      border: 1px solid #c1cce3;
    }
    .title {
      width: 100%;
      height: 40px;
      background: #ebeff6;
      line-height: 40px;
      font-size: 16px;
      font-weight: 400;
      text-align: center;
    }
    .img_show {
      width: 100%;
      height: calc(100% - 40px);
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 100%;
        max-height: 100%;
        // opacity: 0;
        // object-fit:cover; // 保持原比例缩小
        object-fit: contain; // 保持原比例缩小
      }
    }
    .upimg_box {
      width: 100%;
      height: 500px;

      display: flex;
      align-items: center;
      justify-content: center;
    }
    .sunmit_btn {
      margin-top: 24px;
      width: 120px;
      height: 32px;
      background: #2e6bc8;
      border-radius: 4px 4px 4px 4px;
      color: #fff;
      font-size: 14px;
      line-height: 32px;
      font-weight: 400;
      text-align: center;
    }
  }
  .right_box {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .boder_box {
      width: 100%;
      border: 1px solid #c1cce3;
    }
    .title {
      width: 100%;
      height: 40px;
      background: #ebeff6;
      line-height: 40px;
      font-size: 16px;
      font-weight: 400;
      text-align: center;
    }
    .upimg_box {
      width: 100%;
      height: 500px;
      // border: 1px solid #c1cce3;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .sunmit_btn {
      margin-top: 24px;
      width: 120px;
      height: 32px;
      background: #2e6bc8;
      border-radius: 4px 4px 4px 4px;
      color: #fff;
      font-size: 14px;
      line-height: 32px;
      font-weight: 400;
      text-align: center;
    }
    .text_box {
      padding: 16px;
      font-size: 14px;
      font-weight: 500;
      color: #000000;
      line-height: 22px;
    }
  }
  .load-box {
    display: flex;
    align-items: center;
    // justify-content: center;
    flex-direction: column;
    .text_box {
      width: 100%;
      margin-top: 20px;
      color: #06286c;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        margin-right: 15px;
      }
    }
    .light_box {
      width: 500px;
      height: 500px;
      background-image: url("@/assets/images/light_boder.png");
      background-repeat: no-repeat;
      background-size: contain;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 15px;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain; // 保持原比例缩小
      }
      .light {
        width: calc(100% - 30px);
        height: 1px;
        position: absolute;
        top: 0;
        left: 15px;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 255, 255, 0.7);
        box-shadow: 0px 2px 10px 5px rgba(0, 255, 255, 0.3);
        animation: move 2s infinite linear;
      }
      @keyframes move {
        from {
          top: 0px;
        }

        /*网格移动到显示区域的外面*/
        to {
          top: 100%;
        }
      }
    }
  }
  .end_box {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}
:deep(.el-dialog__header) {
  background-color: #eceff7;
  margin-right: 0px;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
::v-deep .avatar-uploader .el-upload {
  display: flex;
  flex-direction: column;
  img {
    width: 220;
    height: 220px;
    margin-bottom: 16px;
  }
  span {
    font-size: 12px;
    font-weight: 400;
    color: #06286c;
  }
}
::v-deep .sunmit_btn .avatar-uploader .el-upload {
  span {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
  }
}
::v-deep .avatar-uploader .el-upload .el-upload-dragger {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.hand{
  cursor: pointer;
}
</style>