vue实现本地预览word(docx)、excel(xlsx)、pdf文件

要在Vue应用中实现本地预览Word（.docx）、Excel（.xlsx）和PDF文件，你可以使用一些现有的库和插件。以下是一种常见的方法，使用`vue-pdf`、`xlsx`和`mammoth.js`库来实现此功能：

1. 首先，安装所需的库：

npm install vue-pdf xlsx mammoth

2. 创建一个Vue组件，并导入所需的库：

<template>
  <div>
    <div v-if="fileType === 'pdf'">
      <pdf :src="fileUrl" />
    </div>
    <div v-else-if="fileType === 'xlsx'">
      <div>{{ excelData }}</div>
    </div>
    <div v-else-if="fileType === 'docx'">
      <div v-html="wordContent"></div>
    </div>
  </div>
</template>

<script>
import { read, utils } from 'xlsx';
import mammoth from 'mammoth';
import { pdf } from 'vue-pdf';

export default {
  components: {
    pdf,
  },
  data() {
    return {
      fileType: '',
      fileUrl: '',
      excelData: [],
      wordContent: '',
    };
  },
  mounted() {
    this.loadFile();
  },
  methods: {
    loadFile() {
      const file = 'path/to/your/file';
      const extension = file.split('.').pop();

      if (extension === 'pdf') {
        this.fileType = 'pdf';
        this.fileUrl = file;
      } else if (extension === 'xlsx') {
        this.fileType = 'xlsx';
        this.loadExcelFile(file);
      } else if (extension === 'docx') {
        this.fileType = 'docx';
        this.loadWordFile(file);
      }
    },
    loadExcelFile(file) {
      const reader = new FileReader();

      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = read(data, { type: 'array' });
        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
        this.excelData = utils.sheet_to_json(worksheet, { header: 1 });
      };

      reader.readAsArrayBuffer(file);
    },
    loadWordFile(file) {
      const reader = new FileReader();

      reader.onload = (e) => {
        const arrayBuffer = e.target.result;
        const options = {};

        mammoth.extractRawText({ arrayBuffer }, options)
          .then((result) => {
            this.wordContent = result.value;
          })
          .catch((error) => {
            console.error(error);
          });
      };

      reader.readAsArrayBuffer(file);
    },
  },
};
</script>

在上面的代码中，你需要将`path/to/your/file`替换为实际文件的路径。根据文件的扩展名，组件将显示不同的预览方式。

请注意，该示例仅提供了一种基本实现方法。你可以根据自己的需求进行修改和调整。

希望这可以帮助到你！如果你有其他问题，请随时提问。