关于PC端浏览器，预览表格及水印、页眉页脚、列宽编辑分享

需求，如图：

分析：

1.表格的数据不是一页，无法知道单元格内容是什么，长度多少，这样一行的高度也不知道，无法设安全高度，需求要自行撑开，需要预览分页显示并且页眉页脚和水印也一并显示，后端也无法提供分页的数据，只能前端想办法解决。

2.页眉页脚和水印，需求要求能直接编辑和上传图片，当时找浏览器api时发现，官方打印没有在这一块的维护，只能硬着头皮，自己画一起打印来满足需求。

3.列宽编辑，因为我用的是vue框架，结合Element UI组件，这个实现起来还是挺简单的，整个表头数组统一控制就可以。

大致分析完，开始撸代码：

1.分页和页码

if (this.nextArr.length > 0) {

                        this.nextIndex = this.itemIndex + 1; //下一页码数

                        this.countPage.num = this.nextIndex + 1;   //总页码数

}

2.页面和页脚（水印）

3.列宽编辑

element ui组件table:

header-dragend

当拖动表头改变了列的宽度的时候会触发该事件

然后接收里面的宽度，以上大致就是这么思路，希望对大家有帮助，谢谢。

 

加油，越努力越幸运。