Newer
Older
smart-metering-front / src / components / filePreview / filePreview.vue
<!-- 文件预览组件 -->
<script lang="ts" setup name="FilePreview">
import VuePdfEmbed from 'vue-pdf-embed'
import * as pdfjsLib from 'pdfjs-dist'
import { ElLoading } from 'element-plus'
import { getBase64, getObjectURL } from '@/utils/download'
import { getStream } from '@/api/business/subpackage/inform'
// 打印文件url
const props = defineProps({
  pdfUrl: {
    type: String,
    default: '',
  },
})

/**
 * 初始化
 */
function init() {
  // const loading = ElLoading.service({
  //   lock: true,
  //   text: '加载中...',
  //   background: 'rgba(255, 255, 255, 0.6)',
  // })
  // getStream({ id: props.id, pdf: true }).then((res) => {
  //   const base64 = getBase64(res.data).then((res) => {
  //     pdfUrl.value = res as string
  //   })
  //   pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
  //   loading.close()
  // })
}

onMounted(() => {
  init()
})

watch(() => props.pdfUrl, (val) => {
  console.log('预览的文件名', val)
}, { immediate: true })
</script>

<template>
  <!-- pdf预览 -->
  <vue-pdf-embed ref="pdf" :source="props.pdfUrl" class="vue-pdf-embed" />
</template>

<style lang="scss" scoped>
// 样式
</style>