VUE实现txt、pdf、word文件预览

要在Vue中实现txt、pdf、word文件的预览，可以使用不同的技术来处理不同类型的文件。

对于txt文件，可以直接将其内容显示在页面上。可以通过以下步骤来实现：

1. 在Vue组件中加入一个文件选择的input元素：

<input type="file" ref="fileInput" @change="previewFile">

2. 在Vue组件的methods中定义处理文件选择的方法：

methods: {
  previewFile(event) {
    const file = event.target.files[0];
    const reader = new FileReader();

    // 读取文件内容
    reader.onload = (e) => {
      this.fileContent = e.target.result;
    };

    // 开始读取文件
    reader.readAsText(file);
  }
}

3. 在Vue组件的data中定义一个变量`fileContent`，用来存储文件内容：

data() {
  return {
    fileContent: ''
  };
}

4. 在Vue组件的模板中展示文件内容：

<div v-if="fileContent">
  <pre>{{ fileContent }}</pre>
</div>

对于pdf和word文件，可以使用第三方库来实现文件的预览。常用的库包括`pdf.js`和`mammoth.js`。以下是使用这两个库的示例代码：

1. 安装pdf.js和mammoth.js库：

npm install pdfjs-dist mammoth

2. 在Vue组件中引入pdf.js和mammoth.js库：

import pdfjsLib from 'pdfjs-dist';
import * as mammoth from 'mammoth';

3. 在Vue组件的methods中定义处理文件选择的方法：

methods: {
  previewFile(event) {
    const file = event.target.files[0];

    if (file.type === 'application/pdf') {
      this.previewPDF(file);
    } else if (file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
      this.previewWord(file);
    }
  },
  
  previewPDF(file) {
    const reader = new FileReader();

    reader.onload = (e) => {
      const pdfData = new Uint8Array(e.target.result);

      pdfjsLib.getDocument({ data: pdfData }).promise.then((pdf) => {
        pdf.getPage(1).then((page) => {
          const viewport = page.getViewport({ scale: 1 });
          const canvas = document.createElement('canvas');
          const context = canvas.getContext('2d');

          canvas.width = viewport.width;
          canvas.height = viewport.height;

          page.render({ canvasContext: context, viewport }).promise.then(() => {
            this.fileContent = canvas.toDataURL();
          });
        });
      });
    };

    reader.readAsArrayBuffer(file);
  },

  previewWord(file) {
    const reader = new FileReader();

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

      mammoth.extractRawText({ arrayBuffer: arrayBuffer }).then((result) => {
        this.fileContent = result.value;
      });
    };

    reader.readAsArrayBuffer(file);
  }
}

4. 在Vue组件的data中定义一个变量`fileContent`，用来存储文件内容：

data() {
  return {
    fileContent: ''
  };
}

5. 在Vue组件的模板中展示文件内容：

<div v-if="fileContent">
  <pre>{{ fileContent }}</pre>
</div>

通过以上步骤，你可以在Vue中实现txt、pdf、word文件的预览功能。根据文件类型的不同，选择不同的处理方法来显示文件内容。