vue基於onlyoffice實現DOC、DOCX、XLSX、PPT、PDF文件編輯預覽

語言: CN / TW / HK

vue基於onlyoffice實現DOC、DOCX、XLSX、PPT、PDF文件編輯預覽

背景

大佬:幫我看看這個複雜exel有什麼好的外掛預覽不?現在用的太醜了。類似這種扔來個陳年老部落格... 我:好吧,我看看,於是開啟了...我的文件躺坑之路

方案一

kkfileview

太老太醜了直接放棄,還是後端部署的

方案二

  1. Luckysheet
  2. luckysheet-vue3-vite

    demo執行一放exel,看起來效果不錯,多個sheet、圖片、等都支援樣式還可以。注意:其實還是有些錯亂的,不過可接受範圍內。然後屁顛屁顛彙報去了,過幾天業務回覆:我想線上編輯後給我儲存...我瞬間炸裂,於是基於原demo又研究了一下匯出exel(想著只要匯出個blob傳給後端覆蓋原檔案就可以了嘛,那麼簡單),不過我錯了,原來匯出依賴exceljs的具體看demo中的export檔案,生成的樣式和原來樣式壓根不一樣還要自己處理如圖片公式等,匯出來的excel和原來的基本不可看,最終這個方案直接放棄了。

方案三

微軟線上文件 https://view.officeapps.live.com/op/view.aspx?src=連結

缺點

  • 檔案一定是對外公開的(這個直接就pass了)
  • 檔案有暴露風險
  • 只能預覽

最終方案

開源的onlyoffice 社群版和其他版本功能對比 - docker部署簡單 - 支援DOC、DOCX、ODT、RTF、TXT、PDF、HTML、EPUB、XPS、DjVu、XLS、XLSX、ODS、CSV、PPT - 檔案放本地,編輯後回撥檔案url(需要開發) - 可以協同編輯

準備工作

  • 安裝docker ```

關閉防火牆

systemctl stop firewalld systemctl disable firewalld

關閉selinux

sed -i 's/enforcing/disabled/' /etc/selinux/config # 永久 setenforce 0 # 臨時

關閉swap

swapoff -a # 臨時 sed -ri 's/.swap./#&/' /etc/fstab # 永久

wget https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo -O /etc/yum.repos.d/docker-ce.repo yum -y install docker-ce cat > /etc/docker/daemon.json << EOF { "registry-mirrors": ["https://b9pmyelo.mirror.aliyuncs.com"] } EOF systemctl enable docker && systemctl start docker - 安裝onlyoffice [安裝參考](https://helpcenter.onlyoffice.com/installation/docs-developer-install-docker.aspx) docker run -i -t -d -p 8089:80 --restart=always onlyoffice/documentserver ```

注意預設現在我使用7.2版本預設是開啟jwt 的,所以打開回提示開啟顯示文件安全令牌未正確形成,就需要關閉jwt校驗,如果不想麻煩後端開發先暫時去掉,後面決定用以後再加上,這個是需要開發的。signature參考,下面是關閉的方法: ```

更改/etc/onlyoffice/documentserver/local.json

docker exec -it [容器id] bin/bash cd /etc/onlyoffice/documentserver sed -i 's/true/false/g' local.json supervisorctl restart all ```

使用方法

拓展vue2 使用方式

  • loadScript ```js const loadScript = async (url, id) => new Promise((resolve, reject) => { try { if (document.getElementById(id)) { if (window.DocsAPI) return resolve(null);
        const intervalHandler = setInterval(() => {
            if (!window.DocsAPI) return;
    
            clearInterval(intervalHandler);
    
            return resolve(null);
        }, 500);
    } else {
        const script = document.createElement('script');
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('id', id);
    
        script.onload = resolve;
        script.onerror = reject;
    
        script.src = url;
        script.async = true;
    
        document.body.appendChild(script);
    }
    

    } catch (e) { console.error(e); } });

export default loadScript;

``` - 元件

``` vue

```

配置 總結

配置參考

config.editorConfig.callbackUrl

  • callbackUrl 後端回撥地址 具體開發參考 返回{\"error\":0}很關鍵
  • 後端回撥地址,如果填回撥地址後端沒有實現會就會提示:這份檔案無法儲存。請檢查連線設定或聯絡你的管理員。
  • java 程式碼實現參考 ``` java public class WebEditor : IHttpHandler { public void ProcessRequest(HttpContext context) { string body; using (var reader = new StreamReader(context.Request.InputStream)) body = reader.ReadToEnd();

    var fileData = new JavaScriptSerializer().Deserialize<Dictionary<string, object>>(body);
    if ((int) fileData["status"] == 2)
    {
        var req = WebRequest.Create((string) fileData["url"]);
    
        using (var stream = req.GetResponse().GetResponseStream())
        using (var fs = File.Open(PATH_FOR_SAVE, FileMode.Create))
        {
            var buffer = new byte[4096];
            int readed;
            while ((readed = stream.Read(buffer, 0, 4096)) != 0)
                fs.Write(buffer, 0, readed);
        }
    }
    context.Response.Write("{\"error\":0}");
    

    } } ```

  • config.editorConfig.autosave 編輯後是否自動儲存

  • config.editorConfig.forcesave 回影響回撥,true 一儲存就會回撥
  • document.permissions.edit false預覽檔案,true可編輯 拓展:如果是瀏覽器傳過來的引數可以用這個方式轉化false: JSON.parse('false')

總結

最後分享的躺坑之路就到這裡啦!!!具體實現參考onlyoffice官網很詳細的