vue - - - - - Online preview of common file formats .doc, .docx, .xls, .xlsx, .pdf, .ofd

Regarding the online preview of some files, what is the easiest way to implement it?

written in front

• .png, .jpg, .jpeg直接预览http/https地址Wait for the image format
• .pdffile 直接预览http/https地址_
• .doc, .docx, .xls, .xlsxand other types of files need to be spliced ​​before previewing the addresshttps://view.officeapps.live.com/op/view.aspx?src=
• .ofdand other types of files need to be spliced ​​before previewing the addresshttps://ofd.xdocin.com/view?src=

1. HTML5 - embedtags

1.1 Note⚠️

embedThe tag defines the embedded content. This tag is 自闭合yes, that is to say, if the browser does not support PDF embedding, then the content of this tag will not be visible .

1.2 How to use

[HTML embedtags]

Attributes	value	describe
height	pixels	Specifies the height of the embedded content.
width	pixels	Specifies the width of the embedded content.
src	URL	Specifies the URL of the embedded content.
type	MIME_type	Specifies the MIME type of embedded content. Note: MIME = Multipurpose Internet Mail Extensions.

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

---

2. HTML- iframetags

2.1 Note⚠️

iframemethod is one of the easiest ways to embed a PDF. However, if iframethe browser does not support PDF rendering, it may not provide sufficient fallback content

2.2 How to use

[HTML iframetags]

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

---

3. HTML - object

3.1 Note⚠️

Unlike embed, objectthis element hints at content if the browser does not support PDF embedding. Elements are supported by all browsers object, however, there are often differences in how they are implemented in each browser. If you use this objectelement, be sure to test your pages thoroughly across browsers and operating systems.

3.2 How to use

[HTML objecttags]

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

4. More ways to preview

[vue-pdf]

5. Code example

  <!-- 预览弹窗 -->
  <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. Problems encountered! ! ! ! ! ! ! !

When previewing word and excel files, because https://view.officeapps.live.com/op/view.aspx?src=文件地址this method is used.
The premise that this method can be previewed is:

1. The file address can be accessed from the external network
2. The header of the file address return header is the corresponding file format! ! ! ! ! ! !