Vue实现预览文件(Word/Excel/PDF)功能的示例代码

下面是Vue实现预览不同类型文件的示例代码的完整攻略：

1. 准备工作

在Vue的项目中，要实现文件预览功能，需要安装和引用一些第三方库：
- file-saver库，用于在前端将文件保存到本地；
- axios库，用于发送请求到后端获取文件数据；
- jszip库，用于解压缩zip文件；
- pdf.js库，用于预览PDF文件。

可以使用npm来安装这些库：

npm install file-saver axios jszip pdfjs-dist

2. 实现Word和Excel文件预览

对于Word和Excel文件，我们可以使用第三方库officegen来将文件内容转化为HTML格式，然后通过Vue中的v-html指令将HTML代码渲染为页面元素，实现预览功能。

下面是示例代码：

<template>
  <div>
    <template v-if="fileType === 'docx' || fileType === 'xlsx'">
      <div v-html="fileContent" />
    </template>
    <template v-else>
      <h1>暂不支持该文件类型</h1>
    </template>
  </div>
</template>

<script>
import axios from 'axios';
import officegen from 'officegen';

export default {
  name: 'FilePreview',
  data() {
    return {
      fileType: '',
      fileContent: '',
    };
  },
  mounted() {
    this.getFileContent();
  },
  methods: {
    async getFileContent() {
      const fileId = this.$route.params.id; // 从路由参数中获取文件id
      const fileInfo = await axios.get(`/api/file/${fileId}`); // 发送请求获取文件信息和内容
      if (fileInfo.data.type !== 'docx' && fileInfo.data.type !== 'xlsx') {
        this.fileType = 'unknown';
        return;
      }
      this.fileType = fileInfo.data.type;
      const xml = officegen(fileInfo.data.type);
      xml.generate(fileInfo.data.content); // 将内容写入文件
      this.fileContent = xml.getContent();
    },
  },
};
</script>

在上面的代码中，getFileContent方法会通过axios库发送请求到后端获取文件信息和内容，其中fileId是通过路由参数获取的。如果文件类型不是docx或xlsx，页面会显示“暂不支持该文件类型”的提示。如果文件类型是docx或xlsx，会使用officegen将内容转换为HTML格式，然后通过v-html指令渲染为页面元素。

3. 实现PDF文件预览

对于PDF文件，我们可以使用pdf.js库来实现预览功能。

下面是示例代码：

<template>
  <div ref="pdfViewer" />
</template>

<script>
import axios from 'axios';
import pdfjsLib from 'pdfjs-dist';

export default {
  name: 'FilePreview',
  data() {
    return {
      pdfUrl: '',
    };
  },
  mounted() {
    this.getPdfUrl();
  },
  methods: {
    async getPdfUrl() {
      const fileId = this.$route.params.id; // 从路由参数中获取文件id
      const fileInfo = await axios.get(`/api/file/${fileId}`); // 发送请求获取文件信息和内容
      if (fileInfo.data.type !== 'pdf') {
        this.$router.push('/404'); // 如果文件类型不是pdf，跳转到404页面
        return;
      }
      this.pdfUrl = URL.createObjectURL(new Blob([fileInfo.data.content], { type: 'application/pdf' })); // 将文件内容转化为Blob对象
      const pdfViewer = this.$refs.pdfViewer;
      pdfjsLib.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
      pdfjsLib.getDocument(this.pdfUrl).promise.then((pdf) => {
        pdf.getPage(1).then((page) => {
          const viewport = page.getViewport({
            scale: 1.0,
          });
          const canvas = document.createElement('canvas');
          const context = canvas.getContext('2d');
          canvas.height = viewport.height;
          canvas.width = viewport.width;

          const renderContext = {
            canvasContext: context,
            viewport,
          };
          page.render(renderContext).promise.then(() => {
            pdfViewer.appendChild(canvas);
          });
        });
      });
    },
  },
};
</script>

在上面的代码中，getPdfUrl方法会通过axios库发送请求到后端获取文件信息和内容，其中fileId是通过路由参数获取的。如果文件类型不是pdf，会跳转到404页面。如果文件类型是pdf，会将内容转化为Blob对象，并使用pdf.js库渲染为页面元素。