關(guān)于一些文件的在線預(yù)覽，最簡易的實(shí)現(xiàn)方式是什么呢？

寫在前面

• .png, .jpg, .jpeg等圖片格式 直接預(yù)覽http/https地址即可
• .pdf文件直接預(yù)覽http/https地址即可
• .doc, .docx, .xls, .xlsx等類型文件，需要在預(yù)覽地址之前拼接上https://view.officeapps.live.com/op/view.aspx?src=
• .ofd等類型文件，需要在預(yù)覽地址之前拼接上https://ofd.xdocin.com/view?src=

1.HTML5 - embed標(biāo)簽

1.1 注意??

embed標(biāo)簽定義嵌入的內(nèi)容，這個(gè)標(biāo)簽是自閉合的，也就是說如果瀏覽器不支持PDF的嵌入，那么這個(gè)標(biāo)簽的內(nèi)容什么都看不到。

1.2 使用方式

【HTML embed標(biāo)簽】

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

2. HTML - iframe標(biāo)簽

2.1 注意??

iframe方法是嵌入PDF的最簡單方法之一。但是，如果iframe瀏覽器不支持PDF呈現(xiàn)，則可能無法提供足夠的后備內(nèi)容

2.2 使用方式

【HTML iframe標(biāo)簽】

<iframe :src="iframeSrc" width="100%" height="100%">
　　該瀏覽器無法支持PDF，請點(diǎn)擊查看：
　　<a :href="iframeSrc">下載 PDF</a>
</iframe>

3. HTML - object

3.1 注意??

與embed不同，object如果瀏覽器不支持PDF嵌入，則該元素可提示內(nèi)容。所有瀏覽器都支持object元素，但是，每個(gè)瀏覽器中的實(shí)現(xiàn)方式通常存在差異。如果您使用該object元素，請務(wù)必在瀏覽器和操作系統(tǒng)中徹底測試您的頁面。

3.2 使用方式

【HTML object標(biāo)簽】

<object :data="iframeSrc" type="application/pdf" width="100%" height="100%">
    該瀏覽器不支持PDF.請點(diǎn)擊查看:
    <a :href="iframeSrc">下載 PDF</a>.</p>
</object>

4. 更多預(yù)覽方式

【vue-pdf】

5. 代碼示例

  <!-- 預(yù)覽彈窗 -->
  <a-modal
    class="preview-modal"
    :class="[isImage ? '' :'preview-file']"
    v-model:visible="visible"
    title="預(yù)覽"
    :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"; // 圖片格式,單獨(dú)預(yù)覽
    const microsoftFileType = " .doc, .docx, .xls, .xlsx"; // 微軟文件格式,單獨(dú)預(yù)覽
  	 // 預(yù)覽相關(guān)信息數(shù)據(jù)
    const annexConfig = reactive({
      updateData: {},
      headers: { Authorization: localStorage.getItem("token") },
      action: '',
      accept: "", // 需要支持的文件格式
      fileList: [], // 文件列表
      visible: false, // 是否預(yù)覽
      isImage: false, // 是否為圖片格式預(yù)覽
      iframeSrc: "" // 預(yù)覽地址
    });
    
    /**
     * 預(yù)覽附件
     */
    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辦公文件預(yù)覽之前需要先拼接上
      const OFDPREFIX = "https://ofd.xdocin.com/view?src="; // ofd文件預(yù)覽前綴

      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. 遇到的問題?。。。。。。。?/h2>

在預(yù)覽word和excel文件的時(shí)候，因?yàn)槭褂玫氖?code>https://view.officeapps.live.com/op/view.aspx?src=文件地址這種方式。
這種方式可以預(yù)覽的前提是:

1. 文件地址外網(wǎng)可以訪問
2. 文件地址返回頭的header是對應(yīng)的文件格式?。。。。。。?/li>

文章來源地址http://www.zghlxwxcb.cn/news/detail-486458.html

到了這里，關(guān)于vue - - - - - 在線預(yù)覽常見文件格式 .doc, .docx, .xls, .xlsx,.pdf的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！