瀏覽器應用集成嵌入WPS指南

      由於該WPS插件使用NPAPI機制來和瀏覽器交互,故要求使用插件的瀏覽器必須支持NPAPI機制且必須開啓NPAPI機制。javascript

如下是支持的常見的瀏覽器及其版本: css

  • FireFox瀏覽器52及小於52的版本(高於52的版本再也不支持NPAPI)html

  • Chrome瀏覽器45及小於45的版本(高於45的版本再也不支持NPAPI)java

  • 360瀏覽器 (支持NPAPI的版本)jquery

  • UOS瀏覽器 (支持NPAPI的版本)api

      項目因使用WPS金山文檔在線編輯或者騰訊文檔時候,對於專業的須要使用Excel用戶來講,在線的Office文檔打開的解決方案是不知足需求的,因此轉向了定製版本的WPS集成嵌入BS應用,固然資金足夠能夠考慮石墨文檔、葡萄城等優秀專業的企業合做。瀏覽器

      應用最終表現仍是優秀的,至關於直接將WPS直接嵌入網頁,知足各種須要。惟一缺憾的是,這個解決方案不是免費的,由於合做咱們得到用於開發的WPS安裝包(版本號爲11.8.2.8744)。瀏覽器推薦使用360極速版(極速模式),下面附着1張效果圖服務器

                     1


提供下截止2020年1月官方開發團隊提供的api文檔 (nphelper)網絡

連接: https://pan.baidu.com/s/1NnPXnOdsdnAh5v3SgNAYaQ 提取碼: 25gtapp

【若有侵權,請私信聯繫做者刪除】

下面開始進行編碼共享步驟:

一、首先建立demo.html

<!DOCTYPE XHTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- 懸浮按鈕 meta -->
    <meta name="Author" content="Rin">
    <!-- 懸浮按鈕css -->
    <link rel="stylesheet" href="../css/asidenav.css">
    <!-- jquery 在線cdn -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- oa np 插件js -->
    <script src="../js/wps_general.js"></script>
    <script src="../js/common.js"></script>
    <!-- loading 插件js -->
    <script src="../js/spin.min.js"></script>
    <title>NP插件Demo</title>
    <!-- loading加載動畫效果 Start-->
    <script type="text/javascript">
        $(function() {
            var opts = {
                lines: 9, // The number of lines to draw
                length: 0, // The length of each line
                width: 10, // The line thickness
                radius: 15, // The radius of the inner circle
                corners: 1, // Corner roundness (0..1)
                rotate: 0, // The rotation offset
                color: '#000', // #rgb or #rrggbb
                speed: 1, // Rounds per second
                trail: 60, // Afterglow percentage
                shadow: false, // Whether to render a shadow
                hwaccel: false, // Whether to use hardware acceleration
                className: 'spinner', // The CSS class to assign to the spinner
                zIndex: 2e9, // The z-index (defaults to 2000000000)
                top: 'auto', // Top position relative to parent in px
                left: 'auto' // Left position relative to parent in px
            };
            var target = document.getElementById('foo');
            var spinner = new Spinner(opts).spin(target);
        })
    </script>
    <!-- loading End-->
    <script>
        //初始化
        var wpsFrame = new WPSFrame;
        /**
         * 基礎參數
         */
        var app = "test";
        var userid = "A004";
        var sheetname;
        var filename = "1.xlsx"; //"測試文檔.xlsx";
        var filetype = getfiletype(filename); //"xls";
        const basepath = baseurl + "/wps/template/";
        //用戶文檔路徑
        var userfileurl = baseurl + "/" + app + "/" + userid + "/" + encodeURI(filename);
        //模板文檔路徑
        var templateurl = basepath + encodeURI(filename);
        //wps安裝包地址
        var downloadurl = "http://abc.com/upload/soft/setup_CN_2052_11.8.2.8744_Professional_VBA_huayu.exe";
        //必須無中文
        const remoteGetUrl = basepath + encodeURI(filename);
        remoteSaveUrl = baseurl + "/WpsCloudService/upload?app=" + app + "&userid=" + userid;
        /**
         * 獲取文件類型
         */
        function getfiletype(filename) {
            if (filename.indexOf("xls") != -1) {
                filetype = "xls";
            } else if (filename.indexOf("ppt") != -1) {
                filetype = "ppt";
            } else if (filename.indexOf("doc") != -1) {
                filetype = "doc";
            }
            return filetype;
        }
        /**
         * 程序執行
         */
        $(document).ready(function() {
            //檢測瀏覽器是否爲360
            if (!is360browser()) {
                alert("您當前的瀏覽器不支持此插件,請更換爲360瀏覽器,推薦360極速瀏覽器(極速模式),效果更好,注:請下載專業版WPS");
                return;
            }
            //初始化控件
            init(filetype)
                //打開文檔
            open(filetype, sheetname);
        })
        function openfile(filename, type) {
            userfileurl = baseurl + "/" + app + "/" + userid + "/" + encodeURI(filename);
            templateurl = basepath + encodeURI(filename);
            filetype = type;
            initchange(type)
            if ($("#sheet").val() == "") {
                sheetname = "";
            } else {
                sheetname = $("#sheet").val();
            }
            open(type, sheetname);
        }
        function savefile() {
            save(filetype);
        }
    </script>
</head>

<body>
    <!-- 加載動畫效果 -->
    <div id="foo" style="width:100px; height:200px; position:absolute;left: 50%;margin-top: 360px;" hidden="hidden">
    </div>

    <div id="wps" align="right" style="width:100%; height:75%; margin:0 auto;">
    </div>
    <div style="text-align: left;margin-top: 50px;margin-left: 100px;">
        <label>指定Sheet頁: </label><input type="text" id="sheet" /><br/><br/>
        <a href="http://abc.com/upload/soft/setup_CN_2052_11.8.2.8744_XXXX_VBA_ABC.exe"><b>下載最新版本專業wps</b></a>
        <br/> 注:使用本功能前提需下載專業定製版WPS,360瀏覽器必定是要極速模式,兼容模式不支持
    </div>

    <!-- 懸浮按鈕 Start-->
    <div id="nav">
        <svg width="0" height="0">
            <defs>
                <filter id="goo">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
                    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo"></feColorMatrix>
                    <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
                </filter>
            </defs>
        </svg>
        <div class="aside-nav bounceInUp animated" id="aside-nav">
            <label for="" class="aside-menu" title="按住拖動">菜單</label>

            <a href="javascript:void(0)" onclick="openfile('1.xlsx','xls')" title="Excel" class="menu-item menu-first">Excel</a>
            <a href="javascript:void(0)" onclick="openfile('1.docx','doc')" title="Word" class="menu-item menu-second">Word</a>
            <a href="javascript:void(0)" onclick="openfile('1.pptx','ppt')" title="PPT" class="menu-item menu-third">PPT</a>
            <a href="javascript:void(0)" onclick="savefile()" title="保存" class="menu-item menu-fourth">保存</a>
        </div>
    </div>
</body>
</html>

二、分解 $(document).ready 中的初始化 和 打開方法以及 保存方法

因解決方案,必定須要瀏覽器支持NPAPI,故目前只有360瀏覽器可以使用,或者上述闡述的其餘瀏覽器

①初始化插件

/**
 * 默認無高寬,均原始100%
 * 初始化插件,定義屬性
 * @param {*文件類型doc,xls,ppt} doctype 
 */
function init(doctype) {
    plugin.setAttribute("type", "application/x-wps-np-plugin");
    plugin.setAttribute("height", "100%");
    plugin.setAttribute("width", "100%");
    plugin.setAttribute("id", "DocFrame1");
    //文檔類型定義
    if (doctype == "doc") {
        plugin.setAttribute("app", "wps");
    } else if (doctype == "xls") {
        plugin.setAttribute("app", "et");
    } else if (doctype == "ppt") {
        plugin.setAttribute("app", "wpp");
    }
    var obj = document.getElementById('wps');
    obj.appendChild(plugin);
    return plugin;
}

②打開遠程資源

此處流程爲先下載遠程資源,再經過打開下載後的本地臨時文檔,再去上傳,從而達到相似直接修改雲文檔的效果。

因官方目前版本也在迭代,優化測試某些接口,目前Word的接口較爲完善,demo的打開保存都已實現,調用的是vba提供的方法。由於咱們的業務較爲簡單,本次只敘述打開、與保存。

其他的功能,交給有興趣的讀者去自行研究,語法與VBA保持一致。

function open(filetype, param) {
    //loading動畫加載
    $("#foo").show();
    //下載網絡資源,返回本地路徑
    var res = false;
    //下載用戶文件到本地,返回臨時文件url
    url = plugin.application.downloadFile(userfileurl);
    if (url.indexOf('Error') != -1) {
        //下載文件用戶文件失敗,下載模板文件
        url = plugin.application.downloadFile(templateurl);
    }
    //打開本地臨時文件
    res = plugin.application.openDocument(url, false);
    if (res) {
        //加載動畫效果關閉
        $("#foo").hide();
        console.log("執行打開方法成功" + new Date());
    }
    if (filetype == "xls") {
        //定義對象,用於後面保存方法
        workbook = plugin.application.ActiveWorkbook;
        if (param != "" && param != undefined) {
            //本次版本號的打開指定sheet頁的調用方式
            plugin.application.get_Worksheets(param).select();
        }
    } else if (filetype == "ppt") {
        workbook = plugin.application.ActivePresentation;
    }
}

③ 保存

function save(filetype) {
    var tempurl = url;
    var arr = tempurl.split(".");
    tempurl = arr[0] + "kls." + arr[1];
    //保存到本地
    if (filetype == "doc") {
        //另存爲保存到本地
        plugin.application.SaveAs(tempurl);
    } else if (filetype == "xls") {
        //此版本號支持編輯狀態下保存Excel
        plugin.application.ExitEdit();
        tempurl = url;
        //保存到本地
        workbook.Save();
    } else if (filetype == "ppt") {
        //打開時候定義的對象,另存爲文件保存到本地
        workbook.SaveAs(tempurl);
    }
    //上傳文件到服務器,remoteSaveUrl服務器保存接口,tempurl本地臨時文件
    var exc = plugin.UploadFile(remoteSaveUrl, tempurl)
    alert(exc);
}

截止上述,基礎的打開保存功能均已實現。還有更多的操做,請參閱 https://open.wps.cn/docs/office 官方文檔,瀏覽器應用集成嵌入WPS指南。

④服務器保存文件,下面示例代碼爲C#版本

其餘版本的能夠參照合做後官方提供的demo進行抓包獲取,進行分析

或者參照標準http協議(JAVA版本) https://blog.csdn.net/SJh3322/article/details/78435097

public string upload(string app,string userid)
        {
            string path = string.Empty;
            path = "~/" + app + "/" + userid + "/";
            //獲取文件
            HttpPostedFileBase file = Request.Files["file"];
            if (file != null)
            {
                //是否存在這個app應用
                if (System.IO.Directory.Exists(Server.MapPath(path)) == false)
                {
                    System.IO.Directory.CreateDirectory(Server.MapPath(path));
                }
                string fileName = file.FileName;
                string extension = Path.GetExtension(fileName);
                fileName = fileName.Substring(0, fileName.Length - extension.Length);
                path = path + fileName.Replace("kls",string.Empty)+ extension;
                if (System.IO.File.Exists(Path.GetFullPath(path)))
                {
                    System.IO.File.Delete(Path.GetFullPath(path));
                }
                file.SaveAs(System.Web.HttpContext.Current.Server.MapPath(path));
            }
            return "success";
        }


至此,瀏覽器應用集成嵌入WPS,打開服務器文檔及保存功能實現,目前僅支持Excel、Word、PPT。

但願可以給有須要的小夥伴一個參考,也歡迎你們可以提些建議。

相關文章
相關標籤/搜索