在浏览器中查看 Office 文档：Office Web Viewer

近来老板说我们的系统需要支持在线预览附件(word/excel/ppt等)

技术实现无非就是要么由后端要么由前端实现。

之前听说其他兄弟部门是由后端转换为PDF/HTML文件实现的，那么前端有没有实现预览的方案呢？

答案是有的，那就是： Office Web Viewer

什么是 Office Web Viewer？

这是一项可创建 Office Web Viewer 链接的服务。Office Web Viewer 链接将在浏览器中打开原本要下载的 Word、PowerPoint 或 Excel 文件。您可轻松将一个下载链接变成一个 Office Web Viewer 链接以在您的网站或博客中使用（例如食谱、照片幻灯片演示、菜单或预算模板）。

Office Web Viewer 的好处包括：

您无需针对 Web 使用转换 Office 文件（例如，PDF、HTML）。
所有人都可查看您的网站或博客中的 Office 文件，即使他们没有 Office 也是如此。
让人将注意力放在您的网站或博客上，因为读者无需下载文件，可以停留在浏览器中。
一个链接将适用于计算机、平板电脑和手机。

如何开始使用

若要使用 Office Web Viewer，请单击此链接：http://officewebviewer.com

然后将文档的 URL 复制并粘贴到文本框中，如下所示：

若要自行制作 URL，您可使用以下链接，其中 <文档位置> 是文档的 URL。

http://view.officeapps.live.com/op/view.aspx?src=<文档位置>

注意：<文档位置> 必须是编码的 URL，并且文档在 Internet 上必须是可公开访问的。

以下是 Office Web Viewer 中的文档的一些示例：

在 Microsoft Build 大会上，有大量 PowerPoint 系列的演示文稿。如果您要观看其中一个演示文稿的视频，还可使用 Office Web Viewer 查看包含此演示文稿的 PowerPoint 系列。http://view.officeapps.live.com/op/view.aspx?src=http%3a%2f%2fvideo.ch9.ms%2fbuild%2f2011%2fslides%2fTOOL-532T_Sutter.pptx
在一个受欢迎的银行网站上，我们发现了这个不错的 Wedding Budget Planner 电子表格。为了预览此电子表格而不是下载它，我们创建了一个 Office Web Viewer 链接。http://view.officeapps.live.com/op/view.aspx?src=http%3A%2F%2Flearn.bankofamerica.com%2Fcontent%2Fexcel%2FWedding_Budget_Planner_Spreadsheet.xlsx
以下是我们在 Bing 上发现的一个学校新闻通讯模板。通过使用 Office Web Viewer，您无需担心学校的每一个人是否能够查看 Word 文档的问题，现在他们只需要一个浏览器。http://view.officeapps.live.com/op/view.aspx?src=newteach.pbworks.com%2Ff%2Fele%2Bnewsletter.docx

如果您的文档是一个 Office 文档，并且在 Internet 上可公开访问，那么您便可顺利开始。Office Web Viewer 链接很好地替换了下载链接，因为您的读者无需特殊程序也能查看您的文档，并且他们无需退出其浏览器。

实现方法

//文件预览
const showPreviewUrl = (url) => {
  const docUrl = 'https://view.officeapps.live.com/op/view.aspx?src=';
  let docArr = ['doc', 'docx', 'docm', 'dotm', 'dotx', 'xlsx', 'xlsb', 'xls', 'xlsm', 'pptx', 'ppsx', 'ppt', 'pps', 'pptm', 'potm', 'ppam', 'potx', 'ppsm'];
  const extension = file.extension;
  const index = docArr.findIndex(item => item == extension);
  if (index !== -1) {
      url = docUrl + url;
  }
  return url;
}

参考文档

Office Web Viewer：在浏览器中查看 Office 文档

ly2011 / blog