vue - - - - - 在线预览常见文件格式 .doc, .docx, .xls, .xlsx,.pdf,.ofd

关于一些文件的在线预览，最简易的实现方式是什么呢？

写在前面

• .png, .jpg, .jpeg等图片格式 直接预览http/https地址即可
• .pdf文件直接预览http/https地址即可
• .doc, .docx, .xls, .xlsx等类型文件，需要在预览地址之前拼接上https://view.officeapps.live.com/op/view.aspx?src=
• .ofd等类型文件，需要在预览地址之前拼接上https://ofd.xdocin.com/view?src=

1.HTML5 - embed标签

1.1 注意⚠️

embed标签定义嵌入的内容，这个标签是自闭合的，也就是说如果浏览器不支持PDF的嵌入，那么这个标签的内容什么都看不到。

1.2 使用方式

【HTML embed标签】

属性	值	描述
height	pixels	规定嵌入内容的高度。
width	pixels	规定嵌入内容的宽度。
src	URL	规定被嵌入内容的 URL。
type	MIME_type	规定嵌入内容的 MIME 类型。注：MIME = Multipurpose Internet Mail Extensions。

<embed :src="iframeSrc" width="100%" height="100%" />

---

2. HTML - iframe标签

2.1 注意⚠️

iframe方法是嵌入PDF的最简单方法之一。但是，如果iframe浏览器不支持PDF呈现，则可能无法提供足够的后备内容

2.2 使用方式

【HTML iframe标签】

<iframe :src="iframeSrc" width="100%" height="100%">
　　该浏览器无法支持PDF，请点击查看：
　　<a :href="iframeSrc">下载 PDF</a>
</iframe>

---

3. HTML - object

3.1 注意⚠️

与embed不同，object如果浏览器不支持PDF嵌入，则该元素可提示内容。所有浏览器都支持object元素，但是，每个浏览器中的实现方式通常存在差异。如果您使用该object元素，请务必在浏览器和操作系统中彻底测试您的页面。

3.2 使用方式

【HTML object标签】

<object :data="iframeSrc" type="application/pdf" width="100%" height="100%">
    该浏览器不支持PDF.请点击查看:
    <a :href="iframeSrc">下载 PDF</a>.</p>
</object>

4. 更多预览方式

【vue-pdf】

扫描二维码关注公众号，回复： 16495407 查看本文章

5. 代码示例

  <!-- 预览弹窗 -->
  <a-modal
    class="preview-modal"
    :class="[isImage ? '' :'preview-file']"
    v-model:visible="visible"
    title="预览"
    :width="isImage?'500px':'80%'"
    :afterClose="afterClose"
    :destroyOnClose="true"
    :footer="null"
  >
    <img v-if="isImage" :src="iframeSrc" alt />
    <embed v-else :src="iframeSrc" type="application/pdf" width="100%" height="100%" />
  </a-modal>


  <script>
    const imageFileType = " .png, .jpg, .jpeg"; // 图片格式,单独预览
    const microsoftFileType = " .doc, .docx, .xls, .xlsx"; // 微软文件格式,单独预览
  	 // 预览相关信息数据
    const annexConfig = reactive({
      
      
      updateData: {
      
      },
      headers: {
      
       Authorization: localStorage.getItem("token") },
      action: '',
      accept: "", // 需要支持的文件格式
      fileList: [], // 文件列表
      visible: false, // 是否预览
      isImage: false, // 是否为图片格式预览
      iframeSrc: "" // 预览地址
    });
    
    /**
     * 预览附件
     */
    const PreviewAnnex = file => {
      
      
      const previewName = file.name || file.fileName;
      let index = previewName.indexOf(".");
      const type = previewName.slice(index);
      const PREFIX = "https://view.officeapps.live.com/op/view.aspx?src="; // word、excel 等Microsoft办公文件预览之前需要先拼接上
      const OFDPREFIX = "https://ofd.xdocin.com/view?src="; // ofd文件预览前缀

      const previewPath = file.fileUrl;

      let path = "";
      if (imageFileType.includes(type)) {
      
      
        // 图片格式
        path = `${ 
        previewPath}`;
        annexConfig.isImage = true;
      } else if (microsoftFileType.includes(type)) {
      
      
        // 微软文件格式
        path = `${ 
        PREFIX}${ 
        encodeURIComponent(previewPath)}`;
        annexConfig.isImage = false;
      } else if (type == "ofd") {
      
      
        // ofd格式
        path = `${ 
        OFDPREFIX}${ 
        encodeURIComponent(previewPath)}`;
        annexConfig.isImage = false;
      } else {
      
      
        // pdf文件格式
        path = `${ 
        previewPath}`;
        annexConfig.isImage = false;
      }

      annexConfig.visible = true;
      annexConfig.iframeSrc = path;
    };
  </script>

6. 遇到的问题！！！！！！！！

在预览word和excel文件的时候，因为使用的是https://view.officeapps.live.com/op/view.aspx?src=文件地址这种方式。
这种方式可以预览的前提是:

1. 文件地址外网可以访问
2. 文件地址返回头的header是对应的文件格式！！！！！！！