AI_Engineering/ais_search_zj/web/src/components/pdf2/PDFViewer.vue

<template>
<div style="width: 100%; height: 100%; position: relative;">
  <iframe v-if="type === 'pdf'" :src="src" width="100%" height="100%" style="position: relative;border: medium none;">

  </iframe>

  <div class="close-icon" @click=" emits('close')">
    <CloseOutlined />
  </div>
</div>
</template>
<script setup>
import { CloseOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
const emits = defineEmits(['close'])
const props = defineProps({
  src: String,
})
const type = ref('pdf')

watch(props.src, v => {
  if(v) {
    if(v.endsWith('.pdf')) {
      type.value = 'pdf'
    } else if(v.endsWith('.txt')) {
      type.value = 'txt'
    }
  }
})


const src = computed(() => {
  return `/lib/pdfjs/web/viewer.html?file=${props.src}&t=`+ new Date().getTime();
  // return `/lib/pdfjs/web/viewer.html?file=http://121.40.148.47:8530/doc/knowledge_base/download_doc/国土资源部 国家发展和改革委员会+财政部+住房和城乡建设部农业部+中国人民银行+国家林业局+中国银行业监督管理委员会关于扩大国有土地有偿使用范围的意见%28279-283%29.pdf`
})

</script>

<style scoped lang="scss">
.close-icon {
  position: absolute;

  top: 8px;
  right: 12px;
  cursor: pointer;
}
</style>