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 || 1const dpi = div.offsetWidth * devicePixelRatioconst pxPerIn = dpi / 25.4return parseInt(mm * pxPerIn)}

使用該方法轉換后，得到px像素值，用此像素值去設置頁面的邊距或者容器的邊距、填充值都可以實現打印頁面設置邊距的效果。

最后再加上localStorage將打印設置保存到用戶瀏覽器，就實現了這個需求。

代碼嘛，都是抄來的，有這方面需求的可以試試這個方法，希望也能解決你的問題。