Office文档在线预览控制台报404的解决方案

原创已于 2023-08-16 15:26:13 修改 · 9.9k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2022-05-07 14:20:04 首次发布

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

该博客介绍了使用https://view.officeapps.live.com/op/view.aspx?src=进行Office文件预览时的注意事项，包括文件路径需编码、须用域名、需公网访问、包含文件类型且不能直接下载。同时提到了不支持PDF预览，建议使用vue-pdf插件，并列举了文件预览的支持格式和限制条件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用https://view.officeapps.live.com/op/view.aspx?src=文件路径预览文件而出现下图的效果：

1.文件路径需要编码：encodeURIComponent(文件链接)

2.文件路径不能包含ip,必须是域名，否则识别不到

3.链接必须是公网(外网)可以访问的，不能是内网IP，不能是局域网ip

4.链接必须包含文件类型，比如 http://www.a.com/zz/xx/文件名称.xlsx

5.还不能打开可以直接把文件路径在浏览器里打开，检查链接是否可以直接下载文件。

代码如下：

 window.open(
          'https://view.officeapps.live.com/op/view.aspx?src=' +
            encodeURIComponent(url)
        )

PS:

1.https://view.officeapps.live.com/op/view.aspx?src=文件路径这个链接支持的文件为word,ppt,excel等，是不支持PDF和图片。

2.PDF文件的预览推荐使用 vue-pdf 插件