生活随笔
收集整理的這篇文章主要介紹了
文档在线预览解决方案-永中云预览服务
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
? ? ? ? 新人博主不知寫點啥，目前也只是一個技術小白，比起技術干貨，還是分享下近期公司項目中用到的一款有意思的文檔在線預覽SaaS服務：永中云預覽。
需求
- 支持Office文件、CAD、OFD等多種格式；
- 文檔加密，支持添加水印，不可被復制，不可被下載；
- 支持多終端、適配移動端；
- 支持前端簡易接入。
方案
? ? ? ? 針對以上需求，我們也經過了一輪技術選型，最終選擇了永中云服務中的永中云預覽。永中云服務是當代云計算飛速發展的產物，免去了傳統方式的硬件成本投入，僅需輕量級開發，幾行代碼輕松實現文檔在線預覽。
具體實現
成為開發者并申請應用：
? ? ? ? 進入永中云服務根據官網開發文檔-快速入門指引完成開發者認證和并申請應用，從而獲得如圖的APPID和APPKEY。
根據開發文檔中的接入指南，進行代碼開發：
??
- 第一步：基于你所使用的開發語言，下載對應的SDK；這里我選擇的是永中云服務提供的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();
}
- 第二步：對接上傳文檔、在線預覽接口；如下demo僅個人使用，實際項目使用中需針對appId和appKey進行加密處理。
<!doctype html>
<html lang="zh">
<head><meta charset="utf-8"><title>永中預覽服務接入簡易版</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="預覽"><script>var fileVersionId = '';// 上傳按鈕document.getElementById("upJS").onclick = function () {var form=document.getElementById("form1");var file=new FormData(form);var ajax = new XMLHttpRequest();// 永中接口每一次調用都需要進行對sign的計算// 永中提供了signClient的算法插件，我們將當前調用的接口所需的參數和永中appKey傳入generateSign函數中，即可得到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("準備完畢");};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;}}}}}// 預覽按鈕document.getElementById("preview").onclick = function () {if (fileVersionId != '') {// 這里一樣先算sign,我這里還帶入了防復制參數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('請先上傳文件');} }
</script>
</body>
</html>
總結
? ? ? ?點贊、評論、收藏！?一鍵三連哦~
總結
以上是生活随笔為你收集整理的文档在线预览解决方案-永中云预览服务的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
