vue基于onlyoffice实现DOC、DOCX、XLSX、PPT、PDF文档编辑预览

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 安装参考
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

使用方法

  • 官方vue3使用方式

拓展vue2 使用方式

  • loadScript
 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;

  • 组件






配置 总结

配置参考

config.editorConfig.callbackUrl

  • callbackUrl 后端回调地址 具体开发参考 返回{\"error\":0}很关键
  • 后端回调地址,如果填回调地址后端没有实现会就会提示:这份文件无法保存。请检查连接设置或联系你的管理员。
  • 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官网很详细的

你可能感兴趣的:(滕青山的收藏夹,vue.js,powerpoint,pdf)