在线预览office文件

前言✨

网页在线预览PDF、Word、Excel等文件的实现方式有很多种，但无一例外都是比较“重”的，在两年前我有使用过国内第三方office文件解析的网站，后来由于厂太小倒闭了，再后来找到了百度等国内中大型厂的，但是收费，遂不了了之，后来发现了微软提供了官方解析接口，大喜。

Office Web Viewer：www.microsoft.com/en-us/micro…

优点🌹

1.无需为 Web 转换 Office 文件（例如 PDF、HTML）。

2.任何人都可以从您的网站或博客查看 Office 文件，即使他们没有 Office。

3.它会密切关注您的网站或博客，因为读者不需要下载文件，他们会留在浏览器中。

4.一个链接适用于计算机、平板电脑和手机。

5.对于开发者来说极其方便，无需额外插件一个网址即可且免费。

举个官方栗子👌

1.在 Microsoft Build 会议上，有很多 PowerPoint 演示文稿。如果您想观看其中一个演示文稿的视频，您还可以使用 Office Web 查看器查看随附的 PowerPoint 幻灯片。view.officeapps.live.com/op/view.asp…

2.在一个受欢迎的银行网站上，我们发现了这个很棒的婚礼预算规划器电子表格。为了预览电子表格而不是下载它，我们创建了一个 Office Web 查看器链接。view.officeapps.live.com/op/view.asp…

3.这是我们在 Bing 上找到的学校通讯模板。使用 Office Web 查看器，您不必担心学校的每个人都能够查看 Word 文档——现在他们只需要一个浏览器。view.officeapps.live.com/op/view.asp…

使用方法💻

<template>
    <a class="btns" @click.stop="preview(url)" target="_blank">
      预览
    </a>
</template>
<script>
export default {
    methods:{
        preview(url) {
          const typeList = [".pdf", ".html", "txt", "xml"];
          if (
            typeList.some((item) => {
              return url.includes(item);
            })
          ) {
            // 浏览器支持的文件之间用浏览器打开
            window.open(url, "_blank");
          } else {
            const wrUrl =
              "https://view.officeapps.live.com/op/view.aspx?src=" +
              encodeURIComponent(url);
            window.open(wrUrl);
          }
    },
}
</script>

注意👀

虽然是微软官方，但毕竟互联网是开放的。如果为了安全，我个人认为一些保密的文件还是尽量不要采取这种方案，以下为官方提示。

Note: the needs to be URL encoded, and the document must be publicly accessible on the internet.

If your document is an Office document and is publicly accessible on the internet, then you are good to go. Office Web Viewer links are a great alternative to download links because your readers don’t need a special program to view your documents, and they don’t have the interruption of leaving their browser.