这个背景是因为我们公司要做一个金融项目;有这样的一个需求;就是盖章的位置不同;也就是没办法定死在第几页;或者那个关键位置盖章;还有另外一点就是增加一个参与感;
首先说遇到的技术点:
- pdf方面;一般上传的就是用pdf;因为他的不可更改性;当然前端需要做的就是pdf的预览;我用到了pdf.js进行了封装;并在npm的官网上传了;大家可以下载下来就行尝试使用;需要改造成为自己想要的[https://www.npmjs.com/package/vuepdflook]
npm install vueshowpdf -D - 另外就是怎么和服务端协定盖章的位置;因为在浏览器中咱们用到的是px;用户拖动过;没没办法扫描到关键字;没办法的时候就想想自己有什么;能那这些做些什么;
我有这个章拖动过的位置;我有当前正在预览的pdf的第几页;也知道;这个pdf在页面中显示的位置;于是就有了先看几个基础的概念;
首先是元素在页面中的位置怎么进行相对定位;对;相对;有了相对的话;无论你是厘米\px\rem;进行相对后;单位就消除掉了;然后剩余就是值;
继续基础概念;
1:偏移量
offsetHeight:元素在空间上占用的额空间大小[元素的高度\滚动条\边框\内边距]
offsetWidth:这个水平的高度;
offsetLeft:元素左边边框到父级左边的中间的间距;
offsetTop: 元素上边边框到父级上边的中间的间距;
这个图是真的挺好;
image.png
;
2客户区大小;
clientWidth;和clientHeight;都是都是不包含边框的;
image.png
;
3:滚动大小
scrollHeight:在没有滚动条的情况下;元素内容的总高度;
scrollWidth:同样;总宽度;
scrollLeft:被隐藏在内容区域左侧的像素;可以用这个改变元素滚动的位置;
scrollTop:同样;可以改变元素滚动的上下的位置;
下面的图也很有用
image.png
;
有用
;
接下来我需要详细的知道:pdf文档距离浏览器左边的距离;pdf元素的宽度;pdf的高度;pdf距离浏览器上面的高度;offsetTop;offsetLeft;以及offsetHeight offsetWidth;
r然后获取拖动章的元素的top;left;对这样也涉及到拖动章的事件;这个网上多找一个
接下来计算公式就出来了
var pH=offsetHeight;//pdf元素的高度;
var pW=offsetWidth;//pdf元素的宽度;
var PBtop=offsetTop;//pdf距离顶部的距离;
var PBleft=offsetLeft;//pdf距离左边的距离
var sTop=top;//拖动过章(固定定位)的距离浏览器中的距离;
var sLeft=left;//通动过章距离左边的距离
公式
x%=(sLeft-PBleft)/pW;算出x在pdf的左右百分处;
y%=(sTop-PBtop)/pH;算出y在pdf的上下百分处;
搞定;中间还要细化;明天把DEMO奉上
网友评论