浏览器如何实现PDF和office文件在线预览

802 阅读1分钟

web浏览器中是无法直接预览Excel、world文档等文件的,PDF有的浏览器是打开预览,有的浏览器是跳转到下载页,行为不一致也是让开发者头疼的事情。

今天给大家提供几种解决方案,实现office文件在线预览的解决方案,强烈推荐使用pfile实现在线预览功能!

很简单一句话

window.open('http://www.pfile.com.cn/api/profile/onlinePreview?url='+encodeURIComponent("文档地址"));

用了一阵目前没有发现什么问题,完美的解决了各种文件在不同浏览器的在线预览,强烈推荐。

其它的解决方案如下:

1、简单的前端处理方式:

<a href="文档地址"></a> 

JS处理方式:

window.open(文档地址);  //新建窗口打开链接预览

window.location.href = 文档地址;  //本页面内跳转链接实现预览

这种方式在不同浏览器上表现不一样,部份手机浏览器直接不能直接不能打开或是表现为下载,基本不实用,如果预览PDF,可以使pdf.js这样的纯JS库但是实际场景用时要做各种格式判断浏览判断麻烦死了。

2、office online

let url = "https://view.officeapps.live.com/op/view.aspx?src=" + 文档url;
window.open(url);

或者

window.location.href = url;

PDF好像要单独处理,用了一下感觉不太爽放弃了。