Newer
Older
xc-business-system / src / components / filePreview / filePreviewUrl.vue
<!-- 文件预览组件(通过文件名获取文件url) -->
<script lang="ts" setup name="FilePreview">
import VuePdfEmbed from 'vue-pdf-embed'
// import * as pdfjsLib from 'pdfjs-dist'
import { ElLoading } from 'element-plus'
import { getPhotoUrl } from '@/api/file'
// 打印文件url
const props = defineProps({
  printFileName: {
    type: String,
  },
})
const pdfUrl = ref('')

/**
 * 初始化
 */
function init() {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(255, 255, 255, 0.6)',
  })
  getPhotoUrl(props.printFileName!).then((res: any) => {
    console.log('文件名称', props.printFileName)
    pdfUrl.value = res.data
    console.log('pdfurl', pdfUrl.value)

    // pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
    // proxy.$refs.pdf.print()
    // download(url, row.printFileName as string)
    loading.close()
  })
}

watch(() => props.printFileName, (newVal) => {
  console.log('newVal', newVal)

  if (newVal) {
    init()
  }
}, { immediate: true })

onMounted(() => {
  // init()
})
</script>

<template>
  <div class="pdf-container">
    <vue-pdf-embed
      ref="pdf"
      :source="{
        cMapUrl,
        cMapPacked: true,
        url: pdfUrl,
      }"
      :scale="1"
    />
  </div>
</template>

<style lang="scss" scoped>
.pdf-container {
  width: 100%;
  font-family: Arial, sans-serif; /* 设置字体 */
}
</style>