Ionic Angular实现不受分页限制的全量QR二维码批量打印方案咨询

以下是3种可直接落地的实现方案，你可以根据自己的前后端改造成本、业务量级选择：

方案一：前端全量拉取+批量生成打印（改造成本最低） #

直接复用你现有前端生成二维码、打印的逻辑，不需要调整后端接口：

• 先按后端分页规则写异步循环逻辑，拉取所有分页的码值，存入全量数组，拉取过程可展示加载进度避免用户以为卡住
• 新增一个隐藏的DOM容器（设置position: fixed; left: -99999px; top: -99999px移出视口，不要用display: none避免dom-to-image转图失败），专门用来渲染所有待打印的二维码
• 全量码值拉取完成后，循环在隐藏容器中生成所有二维码的canvas，等所有二维码渲染完成后，将整个隐藏容器转成图片，或者直接拼接成带分页样式的HTML内容
• 把生成的内容写入新弹窗调用统一打印即可，可通过CSS的page-break-after: always属性控制每页展示的二维码数量，比如每个二维码独占一页，或者一页放多个节省纸张

参考代码示例 #

// 全量拉取所有码值
async fetchAllCodes(): Promise<{code: string}[]> {
  let allCodes = [];
  let currentPage = 1;
  const pageSize = 100; // 和后端分页大小保持一致
  while(true) {
    const pageRes = await yourApi.getQrCodeList(currentPage, pageSize);
    allCodes = allCodes.concat(pageRes.list);
    // 最后一页拉取完成后退出循环
    if(pageRes.list.length < pageSize) break;
    currentPage++;
  }
  return allCodes;
}

// 批量打印方法
async printAll() {
  this.isLoading = true;
  try {
    const allCodes = await this.fetchAllCodes();
    // 创建隐藏的打印容器
    const printWrap = document.createElement('div');
    printWrap.style.position = 'fixed';
    printWrap.style.left = '-99999px';
    printWrap.style.top = '-99999px';
    printWrap.style.width = '210mm'; // 适配A4纸宽度
    document.body.appendChild(printWrap);

    // 批量渲染二维码，等待所有渲染完成
    const renderTasks = allCodes.map(item => {
      return new Promise((resolve) => {
        const canvas = document.createElement('canvas');
        // 复用你现有二维码生成逻辑渲染到canvas
        new QrCode(canvas, { text: item.code, width: 200, height: 200 });
        printWrap.appendChild(canvas);
        // 每个二维码后加分页符，这里可根据需求调整一页放多个再加分页符
        const pageBreak = document.createElement('div');
        pageBreak.style.pageBreakAfter = 'always';
        printWrap.appendChild(pageBreak);
        // 等待二维码渲染完成，不同qr库可替换为对应的渲染完成回调
        setTimeout(resolve, 30);
      });
    });
    await Promise.all(renderTasks);

    // 转图后打印
    const printImgUrl = await domtoimage.toPng(printWrap);
    const printWin = window.open();
    printWin.document.write(`<img src="${printImgUrl}" style="width: 100%;">`);
    printWin.document.close();
    printWin.focus();
    printWin.print();
    printWin.close();

    // 清理临时DOM
    document.body.removeChild(printWrap);
  } catch (err) {
    console.error('批量打印失败', err);
  } finally {
    this.isLoading = false;
  }
}

优缺点 #

• 优点：完全不用改后端，复用现有逻辑，改造成本极低
• 缺点：如果码量接近1万，前端短时间渲染大量DOM可能会有几秒卡顿，加个加载提示即可，二维码体积小实际影响很小

方案二：后端生成打印文件（性能最优） #

把批量生成、排版的逻辑转移到后端，前端只需要调用接口打印：

• 后端新增批量打印接口，接收打印范围参数，全量查询所有码值后直接生成二维码，拼接成PDF文件或者带排版的HTML打印页
• 前端点击printAll按钮后调用该接口，拿到返回的PDF blob或者打印页直接打开打印即可

优缺点 #

• 优点：前端无性能压力，排版可统一管控，适合高频批量打印的场景
• 缺点：需要后端新增逻辑，后端要集成二维码生成、PDF拼接的依赖

方案三：流式分批打印（极限性能适配） #

如果你的业务经常需要一次打印近1万条，怕前端一次性渲染DOM卡顿可以用这个方案：

• 拉取一页码值，就渲染一页的二维码转成图片添加到打印弹窗的DOM中，然后自动拉取下一页重复操作，直到所有页拉取完成
• 所有内容添加完成后统一调用打印即可

优缺点 #

• 优点：内存占用极低，不会出现一次性渲染上万DOM导致的页面假死
• 缺点：逻辑比方案一稍复杂，拉取+渲染的总耗时会稍长

注意事项 #

• 批量打印前建议加二次确认框，提醒用户本次打印的总数量，避免误操作
• dom-to-image转图时如果出现跨域错误，检查渲染的DOM中是否有跨域资源
• 不要用display: none隐藏待转图的DOM，会导致转出来的图片空白

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