Vue实现预览docx/xlsx/pdf等类型文件功能

下面是Vue实现预览docx/xlsx/pdf等类型文件功能的完整攻略：

1. 了解预览原理

在实现文件预览之前，我们需要了解一下预览的原理。简单来说，我们需要将文件上传到服务器，然后使用第三方库将文件转换为可预览的格式（如PDF），最后在前端展示。

2. 使用第三方库进行文件转换

实现文件预览的第一步是文件转换。这里我们可以使用一些第三方库来处理文件转换的过程。以下是两个示例：

2.1 使用LibreOffice进行文件转换

LibreOffice是一个功能强大的开源office套件，可以使用其来将Microsoft Office类文件（如docx、xlsx等）转换为PDF格式。在Node.js环境下，我们可以使用libreoffice-convert模块来执行转换过程：

const fs = require('fs');
const path = require('path');
const libre = require('libreoffice-convert');

const inputPath = path.join(__dirname, 'test.docx');
const outputPath = path.join(__dirname, 'test.pdf');

const file = fs.readFileSync(inputPath);
libre.convert(file, '.pdf', undefined, (err, result) => {
  if (err) {
    console.log(`Error converting file: ${err}`);
  }

  fs.writeFileSync(outputPath, result);
});

2.2 使用pdf.js进行文件预览

pdf.js是Mozilla开发的一个用于在浏览器中预览PDF文件的JavaScript库。我们可以使用以下代码将PDF文件展示在页面中：

<!-- index.html -->
<canvas id="pdf-viewer"></canvas>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script>
  // 加载PDF并渲染
  const loadingTask = pdfjsLib.getDocument('/path/to/file.pdf');
  loadingTask.promise.then((pdf) => {
    const canvas = document.getElementById('pdf-viewer');
    pdf.getPage(1).then((page) => {
      const viewport = page.getViewport({scale: 1.5});
      const canvasContext = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      const renderContext = {
        canvasContext: canvasContext,
        viewport: viewport
      };
      page.render(renderContext);
    });
  });
</script>

3. 前后端联动实现文件预览

前面我们已经了解了预览原理，并尝试了使用第三方库实现文件转换/展示的功能。接下来，我们需要将上传的文件发送到服务器，并让服务器完成转换过程。

3.1 上传文件

Vue中可以使用v-on指令将文件上传到服务器，以下是上传文件的示例：

<template>
  <div>
    <label>请选择要上传的文件：</label>
    <input type="file" v-on:change="uploadFile" accept=".docx,.xlsx,.pdf">
  </div>
</template>

<script>
export default {
  methods: {
    uploadFile(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('file', file);

      axios.post('/upload', formData).then((response) => {
        console.log('上传成功！');
        console.log(response.data);
      });
    }
  }
}
</script>

3.2 服务器端文件转换

在服务器端，我们需要处理上传的文件并将其转换为预览的格式。这里以Express框架为例，使用libreoffice-convert模块将docx/xlsx文件转为PDF格式，并将其保存在public目录下：

const express = require('express');
const multer = require('multer');
const fs = require('fs');
const path = require('path');
const libre = require('libreoffice-convert');

const app = express();

// 配置文件上传中间件
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'public');
  },
  filename: function (req, file, cb) {
    cb(null, `${file.originalname.slice(0, -5)}.pdf`);
  }
});
const upload = multer({ storage: storage });

// 处理文件上传请求
app.post('/upload', upload.single('file'), function (req, res, next) {
  const filePath = path.join(__dirname, 'public', req.file.filename);
  const input = fs.readFileSync(req.file.path);
  libre.convert(input, '.pdf', undefined, (err, result) => {
    if (err) {
      return res.status(500).send('文件转换失败！');
    }

    fs.writeFileSync(filePath, result);
    return res.status(200).json({
      url: '/public/' + req.file.filename
    });
  });
});

app.listen(3000, function () {
  console.log('服务已启动，监听端口3000！');
});

3.3 客户端预览

最后一步，我们需要在客户端展示预览文件。这里我们可以使用前面介绍的pdf.js库展示转换后的PDF文件：

<template>
  <div>
    <img v-if="fileType === 'png' || fileType === 'jpg';" :src="previewUrl">
    <canvas v-else-if="fileType === 'pdf';" id="pdf-viewer"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewUrl: ''
    }
  },
  methods: {
    previewFile() {
      axios.post('/preview', {url: this.fileUrl}).then((response) => {
        console.log('预览成功！');
        console.log(response.data);
        this.previewUrl = response.data.url;
      });
    }
  },
  computed: {
    fileType() {
      const fileExt = this.fileUrl.split('.').pop().toLowerCase();
      if (['jpg', 'jpeg', 'png'].includes(fileExt)) {
        return 'image';
      } else if (['pdf'].includes(fileExt)) {
        return 'pdf';
      } else {
        return '';
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.fileType === 'pdf') {
        const loadingTask = pdfjsLib.getDocument(this.fileUrl);
        loadingTask.promise.then((pdf) => {
          const canvas = document.getElementById('pdf-viewer');
          pdf.getPage(1).then((page) => {
            const viewport = page.getViewport({scale: 1.5});
            const canvasContext = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            const renderContext = {
              canvasContext: canvasContext,
              viewport: viewport
            };
            page.render(renderContext);
          });
        });
      }
    });
  }
}
</script>

以上就是Vue实现预览docx/xlsx/pdf等类型文件功能的完整攻略。