VUE+PrintJS打印-边距设置问题（提供解决方案）

VUE打印我们一般用printJS，虽然它也提供了边距设置，但不管怎么调，感觉都不对，也换其他组件试过，没啥区别，并不能解决问题。

今天又发来个需求，要求设置打印页面的上、下、左、右边距，因为每次打印都手动设置嫌麻烦。

但因为之前曾经试过很多次一直不成功，也一直不知道问题在哪，开始还推说不一定能实现，效果可能不会太好。

在我询问他说的边距是用什么单位设置的时候，忽然想起了DPI，然后搜索了一下，CSS确实不支持mm毫米做单位，而我当时是用mm做的单位，因为当时参考的资料中，是用的毫米单位，我也就以为应该用mm做单位，所以导致在调试的过程 中，一直没什么效果！

感觉好像找到了问题所在，于是测试了一下，结果还真是OK了。

之所以提及DPI，是因为不同显示器的DPI可能不一样，如果直接用PX单位，最终的效果就会有误差，无法保持在不同显示器下效果一致。

所以找了一个mmToPx的转换方法，将用户设置的mm边距，根据dpi转换成对应的px像素。

代码如下：

mmToPx (mm) {
      const div = document.createElement('div')
      div.style.cssText = 'height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'
      document.body.appendChild(div)
      const devicePixelRatio = window.devicePixelRatio || 1
      const dpi = div.offsetWidth * devicePixelRatio
      const pxPerIn = dpi / 25.4
      return parseInt(mm * pxPerIn)
    }

使用该方法转换后，得到px像素值，用此像素值去设置页面的边距或者容器的边距、填充值都可以实现打印页面设置边距的效果。

最后再加上localStorage将打印设置保存到用户浏览器，就实现了这个需求。

代码嘛，都是抄来的，有这方面需求的可以试试这个方法，希望也能解决你的问题。