VUE根据文件路径 实现pdf、word文件预览

要根据文件路径在Vue中实现pdf和word文件的预览，你可以使用一些第三方库来处理不同类型的文件。

对于PDF文件，可以使用`vue-pdf`库来实现预览功能。以下是一个示例代码：

1. 安装`vue-pdf`库：

npm install vue-pdf

2. 在Vue组件中引入并使用`vue-pdf`库：

<template>
  <div>
    <pdf :src="pdfPath" :page="1"></pdf>
  </div>
</template>

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

export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfPath: '/path/to/your/file.pdf'
    };
  }
};
</script>

通过设置`pdfPath`变量来指定PDF文件的路径，然后使用`<pdf>`组件来展示PDF文件的预览。

对于Word文件，可以使用`mammoth.js`库来提取Word文档的原始内容并在页面上展示。以下是一个示例代码：

1. 安装`mammoth.js`库：

npm install mammoth

2. 在Vue组件中引入并使用`mammoth.js`库：

<template>
  <div>
    <div v-html="wordContent"></div>
  </div>
</template>

<script>
import * as mammoth from 'mammoth';

export default {
  data() {
    return {
      wordPath: '/path/to/your/file.docx',
      wordContent: ''
    };
  },
  mounted() {
    this.previewWord();
  },
  methods: {
    previewWord() {
      axios.get(this.wordPath, { responseType: 'arraybuffer' })
        .then(response => {
          const arrayBuffer = response.data;

          mammoth.extractRawText({ arrayBuffer })
            .then(result => {
              this.wordContent = result.value;
            })
            .catch(error => {
              console.error(error);
            });
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

通过设置`wordPath`变量来指定Word文件的路径，然后使用`mammoth.js`库提取文档的原始内容，并使用`v-html`指令将内容展示在页面上。

以上是根据文件路径在Vue中实现pdf和word文件预览的示例代码。你可以根据实际需求进行修改和扩展。请确保你已经安装了相关的第三方库，并根据具体文件路径进行相应的处理和展示。