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

語言: CN / TW / HK
時間 2022-11-17 09:15:05
主題:

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和原來的基本不可看，最終這個方案直接放棄了。

方案三

微軟線上文件 http://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 http://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": ["http://b9pmyelo.mirror.aliyuncs.com"] } EOF systemctl enable docker && systemctl start docker - 安裝onlyoffice [安裝參考](http://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官網很詳細的

「」