如何在jspdf中调整页面尺寸适配POS打印机（Vue.js环境）

嘿，我明白你遇到的问题了——直接修改doc.format确实没用，因为jsPDF在实例初始化的时候就已经根据你传入的参数计算好了页面尺寸，之后format只是个只读的标识属性，改它不会影响实际的页面大小。下面给你几个靠谱的解决方案：

1. 先计算内容高度，初始化时就用准确尺寸（最推荐） #

要节省纸张的话，最好的办法是先算出你要打印的内容实际需要的高度，再用这个高度来创建jsPDF实例。在Vue里可以这么做：

• 把要打印的内容先渲染到一个隐藏的DOM元素里（和PDF里的样式保持一致）
• 计算这个元素的高度，转换成mm（因为你的单位是mm，1px≈0.264583mm）
• 用计算出的高度来初始化jsPDF，这样页面刚好适配内容，不会有多余空白

举个具体的代码例子：

<template>
  <div>
    <button @click="printPOSReceipt">打印小票</button>
    <!-- 隐藏的内容容器，用来计算高度 -->
    <div ref="receiptContent" class="receipt-preview hidden">
      <div class="receipt-header">XX便利店</div>
      <div class="receipt-item">矿泉水 x1 ¥2.00</div>
      <div class="receipt-item">面包 x2 ¥8.00</div>
      <div class="receipt-total">总计：¥10.00</div>
      <div class="receipt-footer">感谢光临</div>
    </div>
  </div>
</template>

<script>
import JSPDF from 'jspdf'
import html2canvas from 'html2canvas' // 用来把DOM转成图片，方便渲染到PDF

export default {
  methods: {
    async printPOSReceipt() {
      const contentEl = this.$refs.receiptContent
      // 计算内容高度并转成mm，加5mm上下边距
      const contentHeightInMM = contentEl.offsetHeight * 0.264583 + 5
      // 初始化PDF，宽度固定55mm，高度用计算出的准确值
      const doc = new JSPDF({
        orientation: 'portrait',
        unit: 'mm',
        format: [55, Math.ceil(contentHeightInMM)] // 向上取整避免内容被截断
      })

      // 把DOM内容转成图片并添加到PDF
      const canvas = await html2canvas(contentEl)
      const imgWidth = 55
      const imgHeight = (canvas.height * imgWidth) / canvas.width
      doc.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 2, imgWidth, imgHeight)

      doc.save('小票.pdf')
    }
  }
}
</script>

<style scoped>
.receipt-preview {
  width: 55mm; /* 和PDF宽度一致，保证计算的高度准确 */
  padding: 2mm;
  font-size: 12px;
}
.hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
</style>

2. 修改jsPDF内部的页面尺寸属性（应急方案） #

如果因为某些原因没法提前计算高度，必须在实例创建后修改尺寸，可以直接修改jsPDF内部的pageSize对象（注意：这是内部API，未来版本可能变动，谨慎使用）：

// 创建实例后，修改宽度和高度
doc.internal.pageSize.setWidth(55)
doc.internal.pageSize.setHeight(140)

修改后，后续的绘制操作都会使用新的尺寸，但要注意如果已经绘制了内容，可能需要重新调整位置。

3. 新增页面时指定尺寸 #

如果是多页小票的场景，可以在调用addPage时传入新的尺寸参数：

// 新增一页，指定新的尺寸
doc.addPage({ format: [55, 140] })

这个方法只对新增的页面生效，适合需要不同尺寸页面的场景。

关键提醒 #

• POS打印机的常用纸张宽度是58mm，所以设置55mm是为了留3mm左右的边距，避免内容被裁掉
• 如果你不用html2canvas，而是直接用jsPDF的text、line等方法绘制内容，可以手动计算每一行的高度，累加得到总高度，再初始化PDF实例

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