JavaScript实现WordExcelPPT在线预览

Posted 2023-02-27 A_山水子农

  在项目中前端需要根据后台返回的文件地址实现在线预览，图片、视频、pdf等格式的文件用

window.open(url)

或

window.location.href=url

能够实现在线预览，但Word、Excel、PPT文档用同样的方式打开则是默认下载。

  微软office online提供了接口来实现Word、Excel、PPT文档在线预览：

http://view.officeapps.live.com/op/view.aspx?src=<Document Location>

查看文档地址Office Web Viewer: View Office documents in a browser。实现在线预览的前提是预览资源必须是公共可访问的，通过联机查看 Office 文档可以测试文件是否可以在线预览。

/**
 * @description [viewFile 查看文件]
 * @author  ZouMiao
 * @param String url [文件地址]
 * @returns Null [没有返回]
 */
export const viewFile = function (url) 
  let onlineViewType = ['doc', 'docx', 'xls', 'xlsx', 'xlsm', 'ppt', 'pptx']
  let fileTypeName = url.substring(url.lastIndexOf('.') + 1, url.length).split('?')[0]
  let isWord = onlineViewType.find((type) => type === fileTypeName)
  if (isWord) 
    url = 'http://view.officeapps.live.com/op/view.aspx?src=' + url
  
  window.open(url, '_blank')

  在项目中使用在线预览有时报File too large，The file specified is larger than what the Office Online Viewers are configured to support.Reduce the size of the file to view it online.

File too large Error: The file specified is larger than what the Office Online Viewers are configured to support. Reduce the size of the file to view it online.

Office Online产品团队的Ryan回复

The document is too large. Word and PowerPoint documents must be less than 10 megabytes; Excel must be less than five megabytes.

  所以使用Office Online必须注意Word、PPT文件不能大于10M，Excel文件不能大于5M。