vue预览 pdf、word、xls、ppt、txt、csv文件方法

在Vue中预览PDF、Word、Excel、PowerPoint、文本和CSV文件，可以使用PDF.js来预览PDF文件，以及使用iframe来预览Word、Excel、PowerPoint和CSV文件。以下是实现这些功能的示例代码：

1. 预览PDF文件：

<template>
  <div>
    <iframe :src="pdfUrl" style="width: 100%; height: 500px;"></iframe>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      pdfUrl: '',
    };
  },
  created() {
    this.pdfUrl = 'https://docs.google.com/gview?url=' + encodeURIComponent(this.pdfFileUrl) + '&embedded=true';
  }
};
</script>

2. 预览Word、Excel、PowerPoint和CSV文件：

<template>
  <div>
    <iframe :src="fileUrl" style="width: 100%; height: 500px;"></iframe>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      fileUrl: '',
    };
  },
  created() {
    this.fileUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(this.fileUrl);
  }
};
</script>

3. 预览TXT文件：

<template>
  <div>
    <iframe :src="txtUrl" style="width: 100%; height: 500px;"></iframe>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      txtUrl: '',
    };
  },
  created() {
    this.txtUrl = 'https://raw.githack.com/filename.txt';
  }
};
</script>

4. 预览CSV文件：

<template>
  <div>
    <iframe :src="csvUrl" style="width: 100%; height: 500px;"></iframe>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      csvUrl: '',
    };
  },
  created() {
    this.csvUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(this.csvFileUrl);
  }
};
</script>

注意：

• 对于PDF.js，确保已经在项目中正确引入并初始化PDF.js。
• 对于Office文档，需要登录微软账户，并且可能受文件大小和权限的限制。
• 对于TXT和CSV文件，可以使用一些在线服务来预览，如GitHack。
• 对于安全性和性能考虑，应该实现文件的访问控制和文件来源的验证。