vue中预览docx、xlsx、pptx、pdf

在Vue中预览docx、xlsx、pptx和pdf文件，可以使用以下几种方法：

1. 使用第三方库如react-pdf预览PDF文件，docx-preview预览docx文件。
2. 将文件转换为可在线查看的格式，如将docx转换为HTML，然后在Vue应用中使用Webview或Iframe进行预览。
3. 使用编码器如FileSaver.js保存文件到本地，然后通过本地应用程序（如Microsoft Office、LibreOffice或Google Docs Viewer）打开进行预览。

以下是一个简单的例子，使用编码器保存文件到本地，并提供下载链接供用户下载：

<template>
  <div>
    <button v-for="file in files" :key="file.type" @click="previewFile(file.url, file.type)">
      预览{{ file.type }}文件
    </button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      files: [
        { type: 'docx', url: 'path/to/your/file.docx' },
        { type: 'xlsx', url: 'path/to/your/file.xlsx' },
        { type: 'pptx', url: 'path/to/your/file.pptx' },
        { type: 'pdf', url: 'path/to/your/file.pdf' },
      ],
    };
  },
  methods: {
    previewFile(url, type) {
      fetch(url)
        .then((response) => response.blob())
        .then((blob) => {
          // 使用FileSaver.js保存文件
          saveAs(blob, `${Date.now()}.${type}`);
        });
    },
  },
};
</script>

在这个例子中，我们定义了一个previewFile方法，它通过HTTP GET请求获取文件，然后将其转换为Blob对象，并使用FileSaver.js库保存到本地。用户点击按钮时，会下载对应的文件。对于pdf文件，可以使用react-pdf库进行预览。

注意：FileSaver.js是一个第三方库，需要单独安装。

npm install file-saver

然后在Vue组件中引入：

import { saveAs } from 'file-saver';

对于在线查看Office文档，可以使用如Google Docs Viewer、Microsoft Office Online等服务提供的API，通过iframe嵌入在线文档进行预览。但这种方法需要确保文件公开可访问，并且可能受到服务条款的限制。