vue 实现文件预览（支持pdf,xls、xlsx,doc、docx,jpg、jepg、png）

这篇文章距离上次修改已过230天，其中的内容可能已经有所变动。

在Vue中实现文件预览，可以使用vue-pdf组件来显示PDF文件，使用SheetJS来读取和解析Excel文件，以及使用vue-docx-preview来预览Word文档。对于图片，可以直接使用<img>标签。

以下是一个简单的例子，展示如何在Vue组件中实现这些功能：

<template>
  <div>
    <div v-if="isPdf">
      <pdf
        :src="fileUrl"
      ></pdf>
    </div>
    <div v-else-if="isExcel">
      <button @click="readExcel">预览Excel</button>
      <div v-if="excelData">
        <!-- 这里可以根据excelData渲染表格等 -->
        {{ excelData }}
      </div>
    </div>
    <div v-else-if="isWord">
      <vue-docx-preview :src="fileUrl"></vue-docx-preview>
    </div>
    <div v-else-if="isImage">
      <img :src="fileUrl" alt="Image preview">
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
import VueDocxPreview from 'vue-docx-preview'
import XLSX from 'xlsx'

export default {
  components: {
    pdf,
    VueDocxPreview
  },
  props: {
    fileUrl: String
  },
  data() {
    return {
      excelData: null
    }
  },
  computed: {
    isPdf() {
      return this.fileUrl.endsWith('.pdf');
    },
    isExcel() {
      return this.fileUrl.endsWith('.xlsx') || this.fileUrl.endsWith('.xls');
    },
    isWord() {
      return this.fileUrl.endsWith('.docx') || this.fileUrl.endsWith('.doc');
    },
    isImage() {
      return (
        this.fileUrl.endsWith('.jpg') ||
        this.fileUrl.endsWith('.jpeg') ||
        this.fileUrl.endsWith('.png')
      );
    }
  },
  methods: {
    readExcel() {
      fetch(this.fileUrl)
        .then(response => response.arrayBuffer())
        .then(data => {
          const workbook = XLSX.read(data, { type: 'buffer' });
          const firstSheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[firstSheetName];
          this.excelData = XLSX.utils.sheet_to_json(worksheet);
        });
    }
  }
}
</script>

在这个例子中，我们使用了几个计算属性isPdf, isExcel, isWord, isImage来确定文件类型，并根据文件类型渲染对应的组件或标签。对于Excel文件，我们使用fetch获取文件，然后使用xlsx库读取并转换数据。对于Word文档，我们使用了vue-docx-preview组件。

请确保在使用这些组件之前已经通过npm或yarn安装它们：

npm install vue-pdf
npm install vue-docx-preview
npm install xlsx

注意：实际应用中可能需要处理更多的边界情况和错误处理，并且可能需要额外的样式和功能来更完善的用户体验。

vue 实现文件预览（支持pdf,xls、xlsx,doc、docx,jpg、jepg、png）

评论已关闭

推荐阅读