QZtray 2.0打印HTML文件偏左问题求助

我之前也踩过QZtray打印HTML居中的坑，结合你给出的代码和配置，主要从HTML样式适配和QZtray参数配置两个方向调整就能解决：

1. 先搞定HTML文件的样式问题 #

QZtray渲染HTML时不会自动帮你居中内容，哪怕你设置了纸张尺寸。所以最关键的是给test.html加上全局居中样式，确保内容能适配纸张宽度并居中：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    /* 重置浏览器默认边距，避免干扰 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* 让body容器水平居中，宽度完全适配纸张 */
    body {
      width: 100%;
      display: flex;
      justify-content: center; /* 水平居中内部内容 */
      padding: 0;
    }

    /* 打印内容容器，留少量边距防止溢出 */
    .print-content {
      width: 98%;
      text-align: left; /* 若内容不需要整体居中，可改为left/right */
    }
  </style>
</head>
<body>
  <div class="print-content">
    <!-- 这里放你的实际打印内容 -->
  </div>
</body>
</html>

2. 修正QZtray配置的细节 #

从你的配置片段来看，有几个容易忽略的点：

• 明确纸张尺寸的单位：你提到设置了纸张宽高，但要确保config里的size参数指定了单位（比如英寸in或毫米mm），示例如下：

// 创建打印机配置，明确纸张尺寸
var config = qz.configs.create('你的打印机名称', {
  size: { width: 8.5, height: 11, unit: 'in' }, // 比如A4纸对应8.5×11英寸
  colorType: 'Color',
  copies: 1,
  density: 600,
  margins: 0, // 设为0的话，就靠HTML样式控制边距和居中
  orientation: 'Portrait',
  rasterize: true
});

• 修正printData的语法：你代码里的data: test.html缺少引号，应该改为data: 'test.html'，否则会被当作变量解析，导致HTML文件加载失败。

3. rasterize: true模式的额外优化 #

开启这个模式时，QZtray会把HTML转成图片打印，如果HTML宽度小于纸张宽度，就会直接偏左。除了上面的样式调整，还可以：

• 让HTML宽度和纸张宽度完全匹配（比如纸张8.5英寸×96DPI=816像素，就把body宽度设为816px）
• 或者在配置里加scaleContent: true，让QZtray自动缩放内容适配纸张：

var config = qz.configs.create('你的打印机名称', {
  // ...其他配置
  scaleContent: true, // 自动缩放内容适配纸张大小
  rasterize: true
});

按这些步骤调整后，应该就能解决打印偏左的问题了！

内容的提问来源于stack exchange，提问作者mayank