跨平台文件在线预览解决方案（二）

逃离我推掉我的手 2022-11-30 12:39 155阅读 0赞

## 一、前言 ##

上一篇文章[《跨平台（uni-app）文件在线预览解决方案》][uni-app]，文中着重介绍了采用pdf.js在各个平台（H5和APP）进行PDF文件在线预览，关于Office文件（Word、PPT、Excel）文件预览是搭建OpenOffice服务，利用服务转换PDF文件，然后再进行预览。

## 二、需求不断扩大 ##

随着公司业务的发展，产品对Office文件的处理需求不断扩大，包括文档的转换、预览、编辑、加工等，以上的文件在线预览方案已经无法满足产品的需求，体现在如下几个方面：

*  Office文件无法编辑、加工★
 *  文档无法原样展现
 *  转换PDF，针对大文件，性能低下
 *  文档内容可以随意复制，安全性无法保证
 *  无法添加水印
 *  无法在线打印

## 三、方案评估 ##

针对以上种种需求，最开始采用的方案是Microsoft Office Online，对于Office Online服务的搭建非常复杂，而且只支持Windows，特别是只支持内网的项目。这里有两篇搭建方法[《在Windows server 2016上部署Office Online 2017来实现在线浏览Office》][Windows server 2016_Office Online 2017_Office]、[Deploy Office Online Server][]，有兴趣的同学可以加我互相交流。

### Office Online效果 ###

![format_png][]

### Office Online缺点 ###

*  Office Online会进行域名验证，不支持IP直接访问，解决办法是配置服务器hosts
 *  编辑转换文档功能较弱，而且配置复杂
 *  离线安装部署复杂，而且只支持Windows

针对以上缺点决定放弃Office Online，转而选用\*\*[永中DCS文档在线预览软件][DCS]\*\*

## 四、[永中DCS文档在线预览软件][DCS] ##

大家可能没听过永中DCS，但是大家一定听过永中Office。我读大学期间，Linux一度盛行的时候，一直用的永中Office，记得当时是用Java开发的，对Linux平台支持得很好，而且和Microsoft Office文档锲合度非常高，基本两个软件编辑的word文档不会发生布局错乱等情况。

今天是云的时代，云服务、云计算逐步成熟起来。软件已经脱离了单机、离线的时代，转变为一种服务（即SAAS，软件即服务）。相应的云办公、云文档流行起来，比如腾讯云文档、WPS云文档、永中云转换等。文档已不再是一个人编辑，处处拷贝，而是在线文档协作，在线文档编辑预览。

永中DCS提供了很好的云服务，包括常用格式文档的转换、预览、编辑、加工等，不仅能预览Office文档，还能预览图片、编程代码、文本文件等等，详细介绍请查看[官方文档][DCS]，这里直接上代码。

### [公有云-永中云转换][-] ###

#### 使用步骤 ####

*  1.  注册并登录用户管理中心
 *  1.  在域名管理页面中添加域名或IP（文件公网下载地址所对应的域名或IP）
 *  1.  拼接api预览地址  
        http://dcsapi.com/?k=域名key&url=要预览的文件下载地址  
        例如：http://dcsapi.com/?k=1744232&url=http://58.215.166.234/example/doc/doctest.docx

第2步，要使用文件公网下载地址，比如：http://113.62.127.199:8090/fileUpload/1.docx

#### 文件下载服务搭建方法 ####

##### 1. Tomcat搭建 #####

配置tomcat的`config`目录下的**server.xml**，在最后的`<server></server>`中添加如下`Service`：

> port=8090 文件访问服务端口  
>   
> docBase="/root/" 文件存储目录，服务器上文件会存储到/root/fileUpload/目录下  
>   
> 文件下载地址为：http://ip地址:8090/fileUpload/文件名.docx  
>   
> 启动Tomcat服务`TomcatXXX/bin/catalina.sh start`

##### 2. Java读取服务器文件返回文件流 #####

直接上代码

> 读取目录文件，转换为二进制流

核心代码

ios = new FileInputStream(sourceFile);
    os = response.getOutputStream();
    int read = 0;
    byte[] buffer = new byte[1024 * 1024];
    while ((read = ios.read(buffer)) != -1) { 
        os.write(buffer, 0, read);
    }
    os.flush();

完整代码

> 注意：推荐使用Java代码，通过Java代码可以控制访问权限，保护文档安全和隐私等。

@RequestMapping(value = "/api/attachment", method = RequestMethod.GET)
        public void getFileBytes(@RequestParam("name") String name, @RequestParam("url") String url, HttpServletRequest request, HttpServletResponse response) { 
            response.reset();
            response.setContentType("application/octet-stream");
            response.setCharacterEncoding("utf-8");
            response.setHeader("Content-Disposition", "attachment;filename=" + name);
    
            AttachmentVO attachmentVO = new AttachmentVO();
            FileInputStream ios = null;
            OutputStream os = null;
            try { 
                name = CharsetUtils.toUTF_8(name);
                url = CharsetUtils.toUTF_8(url);
    
                attachmentVO.setUrl(url);
                attachmentVO.setName(name);
                File sourceFile = getDictionaryFile(attachmentVO, request);
                if (null == sourceFile) { 
    // throw new HttpResponseException(300, "附件不存在！");
                    return;
                }
    
                /** * 判断文件类型 */
                /* 获得文件名后缀 */
                String ext = "";
                if (!"".equals(url) && url.contains(".")) { 
                    ext = url.substring(url.lastIndexOf(".") + 1, url.length()).toUpperCase();
                }
                /* 根据文件类型不同进行预览 */
                /* 预览pdf */
                if ("PDF".equals(ext)) { 
                    response.setContentType("application/pdf");
                }
    
                /** * 将文件写入输出流,显示在界面上,实现预览效果 */
                ios = new FileInputStream(sourceFile);
                os = response.getOutputStream();
                int read = 0;
                byte[] buffer = new byte[1024 * 1024];
                while ((read = ios.read(buffer)) != -1) { 
                    os.write(buffer, 0, read);
                }
                os.flush();
            } catch (Exception e) { 
                e.printStackTrace();
                try { 
                    if (null != ios) { 
                        ios.close();
                    }
                    if (null != os) { 
                        os.close();
                    }
                } catch (IOException ex) { 
                    ex.printStackTrace();
                }
            }
        }

将`文件下载地址`（如：http://113.62.127.199:8090/fileUpload/1.docx ）填写在`永中云转换管理后台->文档预览`菜单，会生成完整`api预览地址`，点击即可预览文件

![填写文档下载地址生成API地址][API]

Word预览

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mB4NPvqc-1598249967477)(http://silianpan.cn/wp-content/uploads/2020/08/wp\_editor\_md\_6e0a132b7a9513cd199dfd0f64a63301.jpg)\]

Excel预览

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IfLdqH5X-1598249967480)(http://silianpan.cn/wp-content/uploads/2020/08/wp\_editor\_md\_b690570dc1e9f74d6a246984f8ee3524.jpg)\]

PPT预览

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J5t52NKI-1598249967481)(http://silianpan.cn/wp-content/uploads/2020/08/wp\_editor\_md\_9975199f0aeb18469650d59893ea0358.jpg)\]

#### 移动端支持效果 ####

在移动端打开api预览地址，效果如下：

Word预览

![wp_editor_md_99144bf6e0dea1f3c10dfcb5eec85bb7.jpg][]

Excel预览

![wp_editor_md_782d39717643a2842712f35e89fe07de.jpg][]

PPT预览

![wp_editor_md_3c7298838262ec057e3ef08a6669ad38.jpg][]

#### api预览地址参数说明 ####

参数说明：  
1、参数k：系统会在新增域名时自动生成一个key，用来验证域名是否合法。  
2、参数url：文件的下载地址 ，比如：http://dcs.yozosoft.com/yozodoc.docx。

四个可选参数：  
1、noCache：Boolean格式。是否强制重新转换（忽略缓存）,true为强制重新转换，false为不强制重新转换。  
2、watermark：String格式。针对单文档设置水印内容。  
3、isCopy：Integer格式（0否1是，默认为0。针对单文档设置是否防复制）。  
4、pageStart：Integer格式；pageEnd：Integer格式。试读功能（转换页数的起始页和转换页数的终止页，拥有对应权限的域名才能调用）。

> 提示：isCopy参数控制防复制；watermark参数可以添加水印

#### Java后端接入 ####

接入方法：

*  Java后端通过**HTTP工具**`Get`调用组装的api预览地址，并返回真实预览地址给客户端，返回结果如下（data->data即为真实返回地址）：

{ 
            "data":{ 
                "data":"https://p.dcsapi.com/view/preview/xxxxxxxx/"
            },
            "message":"操作成功",
            "errorcode":0
    }

*  组装的api预览地址（如：http://api.yozocloud.cn/ getPreview?k=123456&url=http://abc.com/123.doc&isCopy=1&watermark=abcd ），所有参数（k、url等）都写在后端代码中，不暴露给客户端，提升文档安全和保护隐私。

#### 其他编程语言接入、文档转换等高级功能 ####

其他编程语言（PHP、C++、C\#等）接入方法、文档转换、签名等高级功能，请移步参考[永中DCS产品文档][DCS 1]

对大文件、文档防复制、添加水印等高级功能可以使用[专业版或高级专业版][-]

### 私有云 ###

对自建私有云、离线产品的需求，后续我会入坑怎么使用和接入，敬请期待。

## 总结 ##

pdf.js只能解决pdf在线预览，无法编辑处理；Office Online可以预览Office文档，但是处理转换性能低下，而且部署复杂；除此之外，对各种文档转换、预览、加工、防复制、添加水印，大文件高性能处理等特殊需求，永中DCS是一个非常不错的选择！

转载请注明：[我的技术分享][Link 1] » [跨平台文件在线预览解决方案（二）][Link 2]

[uni-app]: http://silianpan.cn/index.php/2019/10/25/uniapp_file_online_preview/
[Windows server 2016_Office Online 2017_Office]: http://blog.ruterfu.com/2019/03/26/install-office-server-2017-on-winserver2016/
[Deploy Office Online Server]: https://docs.microsoft.com/en-us/officeonlineserver/deploy-office-online-server
[format_png]: /images/20221123/4d389a1b32b64440a8ffcf1a4d9be5f4.png
[DCS]: https://www.yozodcs.com/
[-]: https://www.yozodcs.com/page/yun.html
[API]: /images/20221123/da297f3370e241cfb1269807c4c994e1.png
[wp_editor_md_99144bf6e0dea1f3c10dfcb5eec85bb7.jpg]: http://silianpan.cn/wp-content/uploads/2020/08/wp_editor_md_99144bf6e0dea1f3c10dfcb5eec85bb7.jpg
[wp_editor_md_782d39717643a2842712f35e89fe07de.jpg]: http://silianpan.cn/wp-content/uploads/2020/08/wp_editor_md_782d39717643a2842712f35e89fe07de.jpg
[wp_editor_md_3c7298838262ec057e3ef08a6669ad38.jpg]: http://silianpan.cn/wp-content/uploads/2020/08/wp_editor_md_3c7298838262ec057e3ef08a6669ad38.jpg
[DCS 1]: https://www.yozodcs.com/page/help.html
[Link 1]: http://silianpan.cn/
[Link 2]: http://silianpan.cn/index.php/2020/08/21/online_file_preview_2/