文件预览像docx，.xlsx .xls .cad .swg .dwg .png .jpg，.html .text 等等，更多格式需要进行预览，怎么实现

Question

需求：文件预览像docx，.xlsx .xls .cad .swg .dwg .png .jpg，.html .text 等等，更多格式需要进行预览，

开发逻辑：接口提供服务器+服务器后面跟上文件路径，使用iframe中展示，

例如代码：

 <iframe :src="wordUrl" width="100%" height="500px"></iframe>
wordUrl ="https://view.officeapps.live.com/op/view.aspx?src=" + encodeURIComponent(data.fileVisitUrl);


"https://view.officeapps.live.com/op/view.aspx?src=" //是在线文档，将这个路径换做后端提供的服务器
 encodeURIComponent(data.fileVisitUrl)     //是文件路径

疑问：想要知道使用后端提供的服务器结合文件路径，是否可以实现任何文件格式进行预览，还需对文件格式进行区分吗

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

您想要解决的问题

您提问的目的是实现一个能够预览多种文件格式（如docx、xlsx、xls、cad、swg、dwg、png、jpg、html、text等）的系统。

问题出现原因

这个问题出现的原因是，不同的文件格式需要不同的预览方法，一些格式如office文档和图片可能已经有现成的解决方案，但其他格式如CAD文件可能需要特定的查看器或者转换工具。

问题解决方案

为了实现多种文件格式的预览，可以采用以下策略：

1. 使用通用的在线查看器：对于常见的文件格式，可以使用如Office的在线查看器（如您代码中提到的view.officeapps.live.com）来预览。

2. 转换文件格式：对于不支持直接预览的文件格式，可以考虑将文件转换为通用格式（如PDF），然后使用PDF查看器进行预览。

3. 集成特定格式的查看器：对于特定格式的文件，如CAD或SWG文件，可以集成特定的在线查看器或插件。

4. 使用第三方服务：利用第三方提供的API或服务来实现文件预览。

5. 前端展示逻辑：根据文件类型动态调整iframe的src属性，以指向正确的预览服务。

提供代码

以下是一个基本的示例代码，展示如何根据文件类型动态设置iframe的src属性：

<template>
  <iframe :src="previewUrl" width="100%" height="500px"></iframe>
</template>

<script>
export default {
  data() {
    return {
      fileVisitUrl: 'http://example.com/path/to/your/file.ext',
      previewUrl: ''
    };
  },
  created() {
    this.setPreviewUrl();
  },
  methods: {
    setPreviewUrl() {
      switch(this.getFileExtension(this.fileVisitUrl)) {
        case 'docx':
        case 'xlsx':
        case 'xls':
          this.previewUrl = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(this.fileVisitUrl)}`;
          break;
        case 'dwg':
        case 'swg':
        case 'cad':
          this.previewUrl = `https://your-online-cad-viewer.com?file=${encodeURIComponent(this.fileVisitUrl)}`;
          break;
        case 'png':
        case 'jpg':
        case 'jpeg':
          this.previewUrl = this.fileVisitUrl; // Direct image link
          break;
        case 'html':
        case 'text':
          this.previewUrl = `https://your-online-text-viewer.com?file=${encodeURIComponent(this.fileVisitUrl)}`;
          break;
        default:
          this.previewUrl = 'https://your-default-viewer.com?file=' + encodeURIComponent(this.fileVisitUrl);
      }
    },
    getFileExtension(url) {
      return url.split('.').pop().split('?')[0];
    }
  }
};
</script>

代码运行方式

• 将上述代码放入您的前端项目中。
• 确保您的后端提供了文件的访问URL。
• 替换https://your-online-cad-viewer.com、https://your-online-text-viewer.com和https://your-default-viewer.com为您实际使用的服务URL。

代码预期运行结果

• 当页面加载时，根据文件类型，iframe将加载相应的在线查看器或直接显示文件内容。

推荐相关链接

• Office在线查看器
• 在线PDF查看器
• 在线CAD查看器
• JavaScript文件类型检测

请注意，上述代码是一个示例，您需要根据实际情况调整和完善。