生活随笔
收集整理的這篇文章主要介紹了
文档在线预览解决方案-永中云预览服务
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
前言
? ? ? ? 新人博主不知寫點(diǎn)啥，目前也只是一個(gè)技術(shù)小白，比起技術(shù)干貨，還是分享下近期公司項(xiàng)目中用到的一款有意思的文檔在線預(yù)覽SaaS服務(wù)：永中云預(yù)覽。
需求
- 支持Office文件、CAD、OFD等多種格式；
- 文檔加密，支持添加水印，不可被復(fù)制，不可被下載；
- 支持多終端、適配移動(dòng)端；
- 支持前端簡(jiǎn)易接入。
方案
? ? ? ? 針對(duì)以上需求，我們也經(jīng)過了一輪技術(shù)選型，最終選擇了永中云服務(wù)中的永中云預(yù)覽。永中云服務(wù)是當(dāng)代云計(jì)算飛速發(fā)展的產(chǎn)物，免去了傳統(tǒng)方式的硬件成本投入，僅需輕量級(jí)開發(fā)，幾行代碼輕松實(shí)現(xiàn)文檔在線預(yù)覽。
具體實(shí)現(xiàn)
成為開發(fā)者并申請(qǐng)應(yīng)用：
? ? ? ? 進(jìn)入永中云服務(wù)根據(jù)官網(wǎng)開發(fā)文檔-快速入門指引完成開發(fā)者認(rèn)證和并申請(qǐng)應(yīng)用，從而獲得如圖的APPID和APPKEY。
根據(jù)開發(fā)文檔中的接入指南，進(jìn)行代碼開發(fā)：
??
- 第一步：基于你所使用的開發(fā)語言，下載對(duì)應(yīng)的SDK；這里我選擇的是永中云服務(wù)提供的JS SDK（SDK下載地址、DEMO下載地址）。
function generateSign(secret, params) {var fullParamStr = uniqSortParams(params);return hmacSHA256(fullParamStr, secret);
}function uniqSortParams(params) {delete params.sign;var var5 = [];var var6 = 0;for (var key in params) {var5[var6] = key;var6++;}var5.sort(function (a, b) {return a.localeCompare(b, 'zh-CN');});var result = "";for (var var7 = 0; var7 < var5.length; var7++) {var key = var5[var7]var var8 = params[key];var8.sort(function (a, b) {return a.localeCompare(b, 'zh-CN');});if (var8 != null && var8.length > 0) {for (var var9 = 0; var9 < var8.length; var9++) {result += key + "=" + var8[var9];}} else {result += key + "=";}}return result;
}function hmacSHA256(data, key) {data != null ? data : "";var var2 = CryptoJS.HmacSHA256(data, key);var var3 = var2.toString(CryptoJS.enc.Hex);return var3.toUpperCase();
}
- 第二步：對(duì)接上傳文檔、在線預(yù)覽接口；如下demo僅個(gè)人使用，實(shí)際項(xiàng)目使用中需針對(duì)appId和appKey進(jìn)行加密處理。
<!doctype html>
<html lang="zh">
<head><meta charset="utf-8"><title>永中預(yù)覽服務(wù)接入簡(jiǎn)易版</title><!-- 永中signClient算法插件引入 --><script src="https://cdn.bootcss.com/crypto-js/3.1.9-1/crypto-js.min.js"></script><script src="./signclient.js"></script>
</head><body><form name="form1" id="form1"><!-- 這里的name記得要用file --><input id="upfile" type="file" name="file"></input></form><input type="button" id="upJS" value="上傳"><input type="button" id="preview" value="預(yù)覽"><script>var fileVersionId = '';// 上傳按鈕document.getElementById("upJS").onclick = function () {var form=document.getElementById("form1");var file=new FormData(form);var ajax = new XMLHttpRequest();// 永中接口每一次調(diào)用都需要進(jìn)行對(duì)sign的計(jì)算// 永中提供了signClient的算法插件，我們將當(dāng)前調(diào)用的接口所需的參數(shù)和永中appKey傳入generateSign函數(shù)中，即可得到sign。var sign = generateSign("你的appKey", {"appId": ["你的appId"]});ajax.open("post", "http://dmc.yozocloud.cn/api/file/upload?appId=你的appId&sign="+sign, true); ajax.onload = function () {console.log("準(zhǔn)備完畢");};ajax.send(file);ajax.onreadystatechange = function () {if (ajax.readyState == 4 && ajax.status == 200) {if (ajax.responseText){var response = JSON.parse(ajax.responseText);if (response.errorcode == 0) {fileVersionId = response.data.fileVersionId;}}}}}// 預(yù)覽按鈕document.getElementById("preview").onclick = function () {if (fileVersionId != '') {// 這里一樣先算sign,我這里還帶入了防復(fù)制參數(shù)var sign = generateSign("你的appKey", {"appId": ["你的appId"], "fileVersionId": [fileVersionId], "isCopy": [1]});var url = "http://eic.yozocloud.cn/api/view/file?fileVersionId=" + fileVersionId + "&appId=你的appId&isCopy=1&sign=" + sign;window.open(url, '_blank').location;} else {alert('請(qǐng)先上傳文件');} }
</script>
</body>
</html>
總結(jié)
? ? ? ?點(diǎn)贊、評(píng)論、收藏！?一鍵三連哦~
總結(jié)
以上是生活随笔為你收集整理的文档在线预览解决方案-永中云预览服务的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
