vue框架中在线预览Office文档

说道预览功能，其实跟vue没有什么关系的，仅仅就是一个跳转链接，微软那边有专门处理的web查看器

如何开始？

 创建一个URL，按照以下的链接来创（支持https）：

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

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

如何使用？ 

只要跳转到你创建的url就行了

比如注入一段a标签代码

?

1	<a href="http://view.officeapps.live.com/op/view.aspx?src=http%3a%2f%2fvideo.ch9.ms%2fbuild%2f2011%2fslides%2fTOOL-532T_Sutter.pptx"></a>

或者js跳转也行，只要能够跳转到你创建的url就行了

?

1	window.open('http://view.officeapps.live.com/op/view.aspx?src=http%3a%2f%2fvideo.ch9.ms%2fbuild%2f2011%2fslides%2fTOOL-532T_Sutter.pptx')

 

以下是微软官方的一些实例：

• 在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

 

如果你想了解更多的话：可以前往官方文档了解https://www.microsoft.com/en-us/microsoft-365/blog/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/