• 在线预览总结
  • onlyoffice 社区版
  • kkfileview
  • pdf
• Google 和 office 的方案
• Office Web Apps Viewer
  • OneDrive Embed Links
• Google Docs Viewer

[toc]

在线预览总结

免费的只有谷歌，微软，但仅限于查看；其它的第三方基本都是收费方案 但是功能更完备

onlyoffice 社区版

免费，需要部署配置

• https://github.com/ONLYOFFICE/DocumentServer

页面接入

配置地址 https://api.onlyoffice.com/

<div id="placeholder" style="height: 100%;"></div>
<script type="text/javascript" src="部署地址/web-apps/apps/api/documents/api.js"></script>
<script>
    var config ={
        "document": {
            "fileType": "docx",
            "key": "Khirz6zTPdfd7122",// 每次访问必须不一样
            "title": "name.docx",
            "url": "文件地址"
        },
    }
    var docEditor = new DocsAPI.DocEditor("placeholder", config);
</script>

kkfileview

免费 需要部署 https://kkfileview.keking.cn/zh-cn/docs/home.html

pdf

在 PC 可以直接在浏览器打开预览，移动端也可以下载预览，如果这些方式都不采用，使用 pdf.js 实现在线预览

pdf.js 使用

这里提供一个最简洁的方式：

登录官网 下载支持最新浏览器的版本或兼容老版本浏览器

直接部署下载下来的项目；路由链接到 /web/viewer.html

注意注释掉跨域代码

// if (origin !== viewerOrigin && protocol !== "blob:") {
//   throw new Error("file origin does not match viewer's");
// }

传入要预览的pdf文件地址；注意：该文件地址应该是可以在浏览器地址栏直接打开，不需要鉴权等操作的

通过 url 传参 /web/viewer.html?file="xxxx/xx/xx.pdf"

Google 和 office 的方案

目前移动端基本是可以实现文件的下载预览(包括成android和ios)，但在有些环境下无法下载或是 ios 端有些问题，所以需要在线预览

引用参考： https://gist.github.com/tzmartin/1cf85dc3d975f94cfddc04bc0dd399be

Office Web Apps Viewer

('.ppt' '.pptx' '.doc', '.docx', '.xls', '.xlsx') 注意：pdf不能解析

• http://view.officeapps.live.com/op/view.aspx?src=xxxx
• https://view.officeapps.live.com/op/embed.aspx?src=xxx

以上两个链接都可以

OneDrive Embed Links

Powerpoint

• https://onedrive.live.com/embed?cid=CA582F2BC3AD1590&resid=CA582F2BC3AD1590%2133463&authkey=AFh1O3tkDLAQzzw&em=2

Excelhttps://onedrive.live.com/embed?cid=CA582F2BC3AD1590&resid=CA582F2BC3AD1590%2136277&authkey=AHJ96YRJIbbJcec&em=2

Google Docs Viewer

这个网络会有问题，是国外的服务器

https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true

注意带上 &embedded=true

文件要小于 25MB

其它信息 参考 https://gist.github.com/tzmartin/1cf85dc3d975f94cfddc04bc0dd399be