以下内容来自「玩转腾讯云」用户原创文章,已获得授权。
本文介绍下如何使用云函数来实现 Office 办公文件的预览。
01.
前言
曾几何时,文档预览曾经很麻烦,小公司需要购买服务器,自行搭建文件服务器来满足产品的文件预览需求,用户上传的文件经由后端进行转码之后才能预览,技术团队需要搭建文件存储服务及转码服务才能实现基础功能,我司曾经就是这么做的。
虽然有公开的微软 Office 预览服务以及 kkfileview 等实现方案,但仍然存在诸多问题,比如微软 Office 预览的大小限制,kk 的略微繁重。难道如果我只是想要一个轻量级的文档服务就那么难吗?
No、No、No,之前一直在关注腾讯云云函数,也在不停基于云函数探索有意思的功能来满足平时的开发需求,前段时间正好公司项目需要用到金山的服务做文件预览,使用效果还可以,那么灵感来了,为什么不能将两个大佬的能力结合一下?
说干就干,腾讯云云函数和金山的文档的整合,我看行。
02.
探讨可行性
首先问题的关键在于通过后端服务去获取预览地址并通过一个网页去承载金山的预览服务,幸运的是这些都可以通过云函数做到,首先云函数是支持 Node.js 编写的,所以我们只要使用 Node.js 去请求金山的接口获取预览地址,然后通过设置函数返回类型为网页就可以将预览地址嵌入函数返回的 iframe 中来实现预览功能,是不是很简单易用。
Talk is cheap, show me the code. 下面我们来践行一下吧~
03.
云函数 SCF 编写
'use strict';const rp = require('request-promise')const officeBaseUrl = '私有服务端?fileUrl='exports.main = async (event, context) => { let fileUrl = 'http://默认下载的预览文件地址.doc' let param = {} if (event.queryStringParameters) { param = { ...event.queryStringParameters } } else { param = { ...event } } if (param.url) { fileUrl = param.url } let previewRes = await rp({ url: officeBaseUrl fileUrl }) previewRes = JSON.parse(previewRes) return { statusCode: 200, headers: { "content-type": "text/html" }, body: `<script>location.replace("${previewRes.data.wpsUrl}");</script>` }}
04.
问题记录
细心的同学会发现在云函数返回体部分在这里写的是一段 js 代码重定向到了一个 url。这里之所以没有使用 iframe 去嵌入预览地址是因为会报获取 token 失败的错误,所以退而求其次采取了直接跳转到预览地址的方式来查看文件。
- 体验地址: http://tcb.xuedingmiao.com/office_preview
- 参考资料
- 使用集成响应返回 HTML:https://cloud.tencent.com/document/product/876/41776
- 金山文档在线预览编辑服务:https://wwo.wps.cn/docs/
- 演示效果
推荐阅读
One More Thing
立即体验腾讯云 Serverless Demo,获取 Serverless 新用户礼包,请在 PC 端访问:
serverless.cloud.tencent.com/start?c=wx20210412
欢迎进入千人 QQ 群 (871445853) 交流 Serverless!
- GitHub: github.com/serverless
- 官网: cloud.tencent.com/product/serverless-catalog
Serverless 建站惊喜福利大派送!
建站计算资源云函数 SCF、文件存储 CFS、云原生数据库 TDSQL-C、内容分发 CDN、API 网关资源月月送。
点击 ? 「阅读原文」,查看领取惊喜福利!