前端实现在线预览文档 - 好文

<>前端实现在线预览文档

最近项目开发中需要实现在线预览Word,Excel,PowerPoint格式的文档，网上查找了很多资源，各说纷纭，但是在一一尝试之后只有使用微软的预览接口才能成功，其他的会出现各种各样的问题，现在说下如何使用微软的预览接口来实现该功能

<>通过联机查看 Office 文档

地址如下：
https://products.office.com/zh-CN/office-online/view-office-documents-online?legRedir=true&CorrelationId=41a7e6f9-67a8-4d36-ab05-b60f97952015

<https://products.office.com/zh-CN/office-online/view-office-documents-online?legRedir=true&CorrelationId=41a7e6f9-67a8-4d36-ab05-b60f97952015>
输入文档地址（可访问资源），点击创建URL按钮就可以生成一个新的链接：
https://view.officeapps.live.com/op/view.aspx?src=http://mczaiyun.top/ht/123.xlsx

<https://view.officeapps.live.com/op/view.aspx?src=http://mczaiyun.top/ht/123.xlsx>

也就是说在使用的过程中可以通过‘https://view.officeapps.live.com/op/view.aspx?src=’
<https://view.officeapps.live.com/op/view.aspx?src=%E2%80%99> + url的方式打开

<>打开新窗口预览文件
<a target='_black'
href='https://view.officeapps.live.com/op/view.aspx?src=http://mczaiyun.top/ht/123.xlsx'>预览文件</a>
<>当前页面预览文件
<iframe
src='https://view.officeapps.live.com/op/view.aspx?src=http://mczaiyun.top/ht/123.xlsx'
/>
<>注意事项

官方地址如下：
https://support.office.com/zh-cn/article/%E8%81%94%E6%9C%BA%E6%9F%A5%E7%9C%8B-office-%E6%96%87%E6%A1%A3-1cc2ea26-0f7b-41f7-8e0e-6461a104544e?ui=zh-CN&rs=zh-CN&ad=CN

<https://support.office.com/zh-cn/article/%E8%81%94%E6%9C%BA%E6%9F%A5%E7%9C%8B-office-%E6%96%87%E6%A1%A3-1cc2ea26-0f7b-41f7-8e0e-6461a104544e?ui=zh-CN&rs=zh-CN&ad=CN>

在创建好url之后，可能会出现无法打开文档的情况，这时候就需要对照官网的解释来查找问题了，官方文档的解释如下:
若您看到错误“很抱歉，由于某种原因我们无法打开该文件”，它意味着无法找到文档或无法显示文档。可能的原因包括：

* 在您提供的 URL 中无法找到任何文档。请确保您提供正确的 URL。
* 文档而言太大。Word 和 PowerPoint 文档必须小于 10 兆字节;Excel 必须小于五个兆字节。
* 文档的保存格式不是 Web 浏览器支持打开的格式。请尝试将您的文档保存为下列格式之一：
* Word: docx dotx
* Excel: xlsx、xlsb、xls、xlsm
* PowerPoint: pptx、 ppsx、 ppt、 pps、 potx、 ppsm
* 您需要登录或提供密码才能打开该文档。将文档设为可公开查看。
* 文档的文件名称包含无效字符。请尝试编码的文件的名称，当您键入文档的 URL 或重命名文件以仅使用字母和数字。
例如，要编码的 URL，包括与号 (&)，您需要键入%26 & 字符。有关 URL 编码的详细信息，也称为为百分比编码，请参阅维基百科的百分比编码。
<>预览PDF文件

上述方法适用于Word，Excel，PowerPoint，但是不适用于PDF文件的预览，想要预览PDF文件，可以通过以下方式进行预览（目前只了解到以下两种方案，后期有新的方案再进行补充）：

*
a标签直接预览
<a target='_black' href='http://mczaiyun.top/ht/4.pdf'>预览PDF文件</a>
*
通过pdf.js插件进行预览

热门工具换一换