FileManagerUI/src/components/pdfview/index.vue

<template>
  <div style="width: 100%;height:100%;position:absolute;text-align: center">
    <el-watermark :font="font" :content="watertext" style="width: 100%;height:100%;position:absolute">

      <el-image :src="props.src" v-if="ismobile && ispic"></el-image>
      <PicShow :src="props.src" v-if="ispic && !ismobile" />


      <iframe v-loading style="width:100%;height:100%;border:none" v-if="!ispic " :src="`${currentPdf}`" />
      <!--      <div style="height: 100%;overflow-y: auto" v-if="!usepdf">-->
      <!--        &lt;!&ndash; <div v-for="page in pages" :key="page" style="width: 100%;">-->
      <!--          <VuePDF :pdf="pdf" fit-parent :watermark-text="watermarkText" :watermark-options="watermarkOptions" :page="page">-->
      <!--            <div v-loading="true"></div>-->
      <!--          </VuePDF>-->
      <!--        </div> &ndash;&gt;-->
      <!--      </div>-->
    </el-watermark>
  </div>
</template>
<script lang="ts" setup>
import {ref, onMounted, watchEffect} from 'vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// import { VuePDF, usePDF } from '@tato30/vue-pdf'
import { propTypes } from '@/utils/propTypes';
import moment from 'moment';
import useUserStore from '@/store/modules/user';
import  PicShow from "./picShow.vue"

const route = useRoute()
const userStore = useUserStore();

document.oncontextmenu = function(){
  return false;
}

const { watermark } = toRefs<any>();

const usepdf=ref(true);

const props = defineProps({
  src: propTypes.string.def(''),
  size:propTypes.number.def(0),
  ispic:propTypes.bool.def(false),
  isprint:propTypes.number.def(0),
});
const content = ref(["text"])

const font = ref({
  color: 'rgba(0, 0, 0, .15)',
})

const watertext = ref();
const ispic = ref(false);
const ismobile = ref(false);


const currentPdf = ref(props.src)
watchEffect(() => {
  ispic.value = props.ispic;
  ismobile.value = route.fullPath.indexOf("h5")!=-1;
  if(props.size>1024*1024*3){
    usepdf.value = false;
  }else{
    usepdf.value = true;
  }
  if (usepdf.value) {
    // if(props.size>1024*1024*20){
    // }else{
      currentPdf.value = `https://filesystem.njdnyjs.com/preview/?url=${encodeURIComponent(props.src)}&isprint=${props.isprint}`
    // }
    // currentPdf.value = `/preview/onlinePreview?url=${encodeURIComponent(base64.encode(props.src))}&watermarkTxt=${encodeURIComponent(watertext.value)}`;
    // currentPdf.value = `/preview/web/viewer.html?file=${encodeURIComponent(props.src)}`
    // currentPdf.value = `https://filesystem.njdnyjs.com/preview?url=${encodeURIComponent(props.src)}`
    // http://localhost:8083/preview/?url=https%3A%2F%2Fraw.githubusercontent.com%2Fmozilla%2Fpdf.js%2Fba2edeae%2Fweb%2Fcompressed.tracemonkey-pldi-09.pdf
  } else {
    currentPdf.value = props.src+"#toolbar=1";
  }
  //http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(base64Encode(url))


  // currentPdf.value = props.src.replaceAll("https://njdnyjsfilesystem.s3.cn-east-1.qiniucs.com","http://sdrqczwd3.hd-bkt.clouddn.com");
})


onMounted(()=>{
  proxy?.getConfigKey("sys.file.preview.watermark").then(res => {
    if(res.data){
      watertext.value = res.data.replaceAll("{username}",userStore.nickname).replaceAll("{time}",moment().format("yyyy-MM-DD HH:mm:ss"))
    }
  })
})


// const { pdf, pages } = usePDF(currentPdf)
</script>

<style lang="scss" >
</style>