当前位置：首页 > VUE

vue预览文件实现

2026-02-19 13:17:21VUE

Vue 文件预览实现方法

在 Vue 项目中实现文件预览功能，可以通过多种方式实现，具体取决于文件类型（如图片、PDF、Word、Excel 等）。以下是常见的实现方法：

图片预览

对于图片文件，可以直接使用 <img> 标签或第三方库实现预览功能。

<template>
  <div>
    <input type="file" @change="previewImage" accept="image/*" />
    <img v-if="imageUrl" :src="imageUrl" alt="Preview" style="max-width: 300px; max-height: 300px;" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: null,
    };
  },
  methods: {
    previewImage(event) {
      const file = event.target.files[0];
      if (file) {
        this.imageUrl = URL.createObjectURL(file);
      }
    },
  },
};
</script>

PDF 预览

PDF 文件可以使用 pdf.js 或 vue-pdf 库实现预览。

安装 vue-pdf：

vue预览文件实现

npm install vue-pdf

示例代码：

<template>
  <div>
    <input type="file" @change="previewPdf" accept=".pdf" />
    <pdf v-if="pdfUrl" :src="pdfUrl" style="width: 100%; height: 500px;"></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf';

export default {
  components: { pdf },
  data() {
    return {
      pdfUrl: null,
    };
  },
  methods: {
    previewPdf(event) {
      const file = event.target.files[0];
      if (file) {
        this.pdfUrl = URL.createObjectURL(file);
      }
    },
  },
};
</script>

Office 文件预览

对于 Word、Excel 等 Office 文件，可以使用 Microsoft Office Online 的嵌入功能或第三方库如 mammoth.js（Word）或 sheetjs（Excel）。

安装 mammoth.js：

vue预览文件实现

npm install mammoth

示例代码（Word 预览）：

<template>
  <div>
    <input type="file" @change="previewWord" accept=".docx" />
    <div v-if="htmlContent" v-html="htmlContent"></div>
  </div>
</template>

<script>
import mammoth from 'mammoth';

export default {
  data() {
    return {
      htmlContent: null,
    };
  },
  methods: {
    previewWord(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          mammoth.extractRawText({ arrayBuffer: e.target.result })
            .then(result => {
              this.htmlContent = result.value;
            });
        };
        reader.readAsArrayBuffer(file);
      }
    },
  },
};
</script>

通用文件预览

对于无法直接预览的文件类型，可以调用第三方服务（如 Google Docs Viewer）或上传到服务器后返回预览链接。

示例代码（使用 Google Docs Viewer）：

<template>
  <div>
    <input type="file" @change="previewFile" />
    <iframe v-if="previewUrl" :src="previewUrl" style="width: 100%; height: 500px;"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewUrl: null,
    };
  },
  methods: {
    previewFile(event) {
      const file = event.target.files[0];
      if (file) {
        const url = URL.createObjectURL(file);
        this.previewUrl = `https://docs.google.com/viewer?url=${encodeURIComponent(url)}&embedded=true`;
      }
    },
  },
};
</script>