Vue vue-office 预览docx、excel、pdf文件

在Vue中预览.docx, .pdf 和 .xlsx 文件，可以使用第三方库，例如 vue-office 或 vue-pdf 来实现。以下是使用 vue-pdf 来预览PDF文件的示例代码：

首先，安装 vue-pdf：

npm install vue-pdf

然后，在Vue组件中使用它来预览PDF文件：

<template>
  <div>
    <vue-pdf :src="pdfSrc"></vue-pdf>
  </div>
</template>
 
<script>
import pdf from 'vue-pdf'
 
export default {
  components: {
    'vue-pdf': pdf
  },
  data() {
    return {
      pdfSrc: 'path/to/your/pdf/file.pdf'
    }
  }
}
</script>

对于.docx和.xlsx文件，可以使用Google Docs Viewer或其他在线服务来实现预览，只需要将文件的URL传递给iframe。

<template>
  <div>
    <iframe :src="docxSrc" width="100%" height="600"></iframe>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      docxSrc: 'https://docs.google.com/gview?url=path/to/your/docx/file.docx&embedded=true'
    }
  }
}
</script>

请确保你的文件URL是可访问的，并且对于Google Docs预览链接，服务可能需要API密钥或其他身份验证方法，具体取决于文件的访问权限。