文档 在线预览功能实现

使用 Ant Design Vue 2 预览 Word、PDF 和 Excel 文件可以通过 <iframe> 标签实现，但需要注意以下几点：

• 文件 URL：确保 info.fileUrl 是一个有效的文件 URL。
• 浏览器支持：不同的浏览器对文件预览的支持程度不同，特别是对于 Office 文档（如 Word 和 Excel）。

　　在线文档查看器：对于更好的兼容性和用户体验，可以考虑使用在线文档查看器服务，如 Google Docs Viewer 或 Microsoft Office Online。

　　

示例代码

<template>
  <div>
    <iframe class="iframe" :src="fileUrl" frameborder="0"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        fileUrl: 'https://example.com/path/to/your/file.docx' // 替换为实际文件 URL
      }
    };
  },
  computed: {
    fileUrl() {
      // 使用在线文档查看器服务
      if (this.info.fileUrl.endsWith('.doc') || this.info.fileUrl.endsWith('.docx')) {
        return `https://view.officeapps.live.com/op/embed.aspx?src=${this.info.fileUrl}`;
      } else if (this.info.fileUrl.endsWith('.xls') || this.info.fileUrl.endsWith('.xlsx')) {
        return `https://view.officeapps.live.com/op/embed.aspx?src=${this.info.fileUrl}`;
      } else if (this.info.fileUrl.endsWith('.pdf')) {
        return this.info.fileUrl;
      } else {
        return '#';
      }
    }
  }
};
</script>

<style scoped>
.iframe {
  width: 100%;
  height: 600px; /* 根据需要调整高度 */
}
</style>

　　

<template><div><iframeclass="iframe":src="fileUrl"frameborder="0"></iframe></div></template><script>exportdefault{data(){return{info:{fileUrl:'https://example.com/path/to/your/file.docx'// 替换为实际文件 URL}};},computed:{fileUrl(){// 使用在线文档查看器服务if(this.info.fileUrl.endsWith('.doc')||this.info.fileUrl.endsWith('.docx')){return`https://view.officeapps.live.com/op/embed.aspx?src=${this.info.fileUrl}`;}elseif(this.info.fileUrl.endsWith('.xls')||this.info.fileUrl.endsWith('.xlsx')){return`https://view.officeapps.live.com/op/embed.aspx?src=${this.info.fileUrl}`;}elseif(this.info.fileUrl.endsWith('.pdf')){returnthis.info.fileUrl;}else{return'#';}}}};</script><stylescoped>.iframe{width:100%;height:600px;/* 根据需要调整高度 */}</style>