当前位置：首页 > VUE

vue实现预览

2026-03-26 18:56:07VUE

Vue 实现文件预览的方法

在 Vue 中实现文件预览功能通常涉及多种文件类型的处理，如图片、PDF、Office 文档等。以下是几种常见的实现方式：

图片预览

使用 <input type="file"> 结合 URL.createObjectURL 实现本地图片预览。

<template>
  <div>
    <input type="file" @change="previewImage" accept="image/*">
    <img v-if="imageUrl" :src="imageUrl" width="200">
  </div>
</template>

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

PDF 预览

使用 pdf.js 库实现 PDF 文件预览。

<template>
  <div>
    <input type="file" @change="previewPDF" accept=".pdf">
    <canvas id="pdf-canvas"></canvas>
  </div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist';

export default {
  methods: {
    async previewPDF(e) {
      const file = e.target.files[0];
      if (file) {
        const arrayBuffer = await file.arrayBuffer();
        const loadingTask = pdfjsLib.getDocument(arrayBuffer);
        loadingTask.promise.then(pdf => {
          pdf.getPage(1).then(page => {
            const canvas = document.getElementById('pdf-canvas');
            const viewport = page.getViewport({ scale: 1.0 });
            canvas.width = viewport.width;
            canvas.height = viewport.height;
            page.render({
              canvasContext: canvas.getContext('2d'),
              viewport
            });
          });
        });
      }
    }
  }
};
</script>

Office 文档预览

使用微软的 Office Online 服务或第三方库（如 mammoth.js 解析 Word 文档）。

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

<script>
import mammoth from 'mammoth';

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

通用文件预览服务

对于无法直接预览的文件类型（如 PPT、Excel），可以使用在线预览服务（如 Google Docs Viewer 或 Office Online）。

vue实现预览

<template>
  <div>
    <input type="file" @change="previewOnline" accept=".ppt,.pptx,.xls,.xlsx">
    <iframe v-if="previewUrl" :src="previewUrl" width="100%" height="500px"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewUrl: ''
    };
  },
  methods: {
    previewOnline(e) {
      const file = e.target.files[0];
      if (file) {
        this.previewUrl = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(URL.createObjectURL(file))}`;
      }
    }
  }
};
</script>