<template>
  <div>
    <vue-office-pdf
      :src="pdfSrc"
      style="width: 100%; height: 600px"
      @rendered="onRendered"
      @error="onError"
    />
  </div>
</template>

<script>
import { ref } from 'vue';
import VueOfficePdf from '@vue-office/pdf';

export default {
  components: {
    VueOfficePdf,
  },
  setup() {
    const pdfUrl = ref('');
    const pdfSrc = ref(null);

    const updatePdfSrc = () => {
      // 可以在这里添加一些验证逻辑，确保输入的URL是有效的PDF文件地址
      pdfSrc.value = pdfUrl.value;
    };

    const onRendered = () => {
      console.log('PDF rendered successfully');
    };

    const onError = error => {
      console.error('Error rendering PDF:', error);
    };

    return {
      pdfUrl,
      pdfSrc,
      updatePdfSrc,
      onRendered,
      onError,
    };
  },
};
</script>

<style scoped>
/* 你可以在这里添加自定义样式 */
</style>
