vue3封装一个组件，实现pdf，png和kpg同时展示

在Vue3中，你可以创建一个自定义组件来展示PDF、PNG和JPEG等图片或文件。这个组件通常会接受文件路径或者URL作为props，并利用HTML5的一些特性以及第三方库，如`vue-file-loader`、`html2canvas`或`jspdf`来处理转换。

首先，安装必要的依赖：

npm install vue-file-loader html2canvas jspdf

然后，创建一个名为`ImageViewer.vue`的组件：

<template>
  <div :id="containerId" class="image-viewer">
    <img v-if="srcType === 'image'"
      :src="src"
      alt="File Preview"
      @error="onError"
    />
    <object v-if="srcType === 'pdf'" type="application/pdf" data="{{ src }}">
      <p>你的浏览器不支持PDF查看。</p>
    </object>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  name: "ImageViewer",
  props: {
    src: {
      required: true,
      type: String,
    },
    format: {
      // 预设格式，默认图片
      default: "image",
      type: String,
    },
  },
  setup(props) {
    const containerId = `viewer-${Math.random().toString(36).substring(7)}`;
    
    const srcType = (props.format.toLowerCase() === "pdf") ? "application/pdf" : "image";

    const onError = (event) => {
      console.error("Error loading file:", event);
    };

    return {
      containerId,
      srcType,
      onError,
    };
  },
  mounted() {
    if (this.srcType === "image") {
      this.$nextTick(() => {
        // 使用html2canvas将内容转为 canvas
        html2canvas(this.$refs.containerId)
          .then((canvas) => {
            const imgElement = document.createElement('img');
            imgElement.src = canvas.toDataURL();
            this.$refs.containerId.appendChild(imgElement);
          })
          .catch(this.onError);
      });
    }
  },
};
</script>

<style scoped>
.image-viewer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px; /* 根据需要调整高度 */
}
</style>

在这个组件中，我们通过条件渲染展示了`<img>`标签用于图片，`<object>`标签用于PDF。对于非图片格式，我们尝试使用`html2canvas`将其转换为HTML元素可以显示的内容。