OWA实现添加水印

OWA全称Office Web App，是用来做Office文档预览的一个很好的工具。现在客户有要求，需要在预览界面中添加水印。想起之前写的一篇文章《Office Web APP预览去掉顶部菜单》，就是通过修改样式来控制OWA的预览界面的。

通过F12查看OWA预览Word的界面，发现Word的每一页会被渲染在一个Img中展示，如下图：

思路如下：

1、每一页是一个图片，是否能通过样式让一个div展示在图片上面？
2、如果可行，怎样在页面中添加div？

通过一通调试，结果如下：

1、通过F12编辑html代码，添加div，设置相关样式可以让div展示图片上面；
2、查看OWA服务器部署的目录，找到相应的页面，发现前端的页面展示是在服务器端渲染的，所以不是很好在页面中添加div；
3、不过从上图可以看出，在img上方有很多的空的div，这些div是否可以利用起来呢？事实证明是可以的。

实现：

1、做一张透明的文字图片，用来做水印；
2、编辑OWA的服务器的目录C:\Program Files\Microsoft Office Web Apps\WebWordViewer\Resources\2052中的WordViewer文件；
3、搜索.FShadowBottomRightInner,.FShadowBottomInner,.FShadowBottomLeftInner，在后面追加下面样式：

position: absolute;
    height: 80px;
    background-image: url(http://apiurl/api/file/my/pic/4a15860d-780e-4511-a558-9b857c1bf1f6/%E6%B0%B4%E5%8D%B0/00001.png);
    top: 300px;
    float: left;
    background-color: blue;

4、效果如下图：

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。