JavaScript实现Word、Excel、PPT在线预览 - 好文

在项目中前端需要根据后台返回的文件地址实现在线预览，图片、视频、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
<https://www.microsoft.com/en-us/microsoft-365/blog/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/>
。实现在线预览的前提是预览资源必须是公共可访问的，通过联机查看 Office 文档
<https://products.office.com/zh-CN/office-online/view-office-documents-online?legRedir=true&CorrelationId=4cda62ce-40b5-4b06-abf6-96368fb5b997>
可以测试文件是否可以在线预览。
/** * @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.
<https://answers.microsoft.com/en-us/msoffice/forum/msoffice_powerpoint-mso_other/file-too-large-error-the-file-specified-is-larger/36f7327f-a14c-4e9e-b16c-6fabe0954ce2>

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。

热门工具换一换