seafile官方的office-preview已经很久没有更新了，其实也没啥更新的意义，就是把office文件转成pdf而已，在11.0之前的版本中都可以正常使用。然而，虽然在seafile 11.0中虽然可以显示，但是效果变得很差：

在seafile的官方论坛中也找到一个相关的帖子office-preview 还有更新吗？，官方说这个组件不更新了，推荐使用其他的，其实这个组件老早之前就在服务器手册中删除了。按道理这个地方应该只是一些样式错误，毕竟都是pdf，pdf能正常显示，那这个理论上也能正常显示。

初步尝试

首先是查看了pdf页面和office的css差异，发现office页面缺少viewer.css和custom.css，加上了之后就正常了。

修复样式错误

这个主要是因为/opt/seafile/seafile-pro-server-11.0.5/seahub/seahub/templates/下的document_file_view_react.html和shared_file_view_react.html中加载office文件时css样式缺少viewer.css和custom.css，这两个文件分别控制预览和分享预览页面，因此在document_file_view_react.html中修改：

{% block extra_style %}
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}js/pdf/web/viewer.css" />
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}js/pdf/web/custom.css" />
<link rel="resource" type="application/l10n" href="{{ MEDIA_URL }}js/pdf/web/locale/locale.properties" />
{% render_bundle 'viewFileDocument' 'css' %}
{% endblock %}

shared_file_view_react.html中修改：

{% elif filetype == 'Document' %}
    <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}js/pdf/web/viewer.css" />
    <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}js/pdf/web/custom.css" />
    <link rel="resource" type="application/l10n" href="{{ MEDIA_URL }}js/pdf/web/locale/locale.properties" />
    {% render_bundle 'sharedFileViewDocument' 'css' %}
{% elif filetype == 'SpreadSheet' %}

修复office分享页面中标题含有两侧灰边

在pdf中，class=”shared-file-view-head”的元素还带有属性”w-100 px-4″，这个会把标题扩展到整个屏幕宽度，这个是由于/opt/seafile/seafile-pro-server-11.0.5/seahub/media/assets/frontend/static/js/commons.2fec6858.js（应该是/opt/seafile/seafile-pro-server-11.0.5/seahub/frontend/src/components/shared-file-view/shared-file-view.js编译而来）的影响：

className:"shared-file-view-head ".concat("md"==e||"pdf"==e?"w-100 px-4":"")

如果文件类型为md或pdf才会加上这个属性，因此修改为

className:"shared-file-view-head w-100 px-4"

注意这会将所有分享文件界面标题扩展到整个屏幕宽度。

office文件页面标题为fake.pdf

在打开文件前是正常的标题，但是加载完标题就变为fake.pdf，这是由于/opt/seafile/seafile-pro-server-11.0.5/seahub/media/js/pdf/web/viewer.js会按照请求网址重新设置页面标题，因此将document.title = ${editorIndicator ? "* " : ""}${title};注释掉即可。