解决QRCode生成二维码打印不出

问题：二维码嵌入在页面中，打印时二维码不渲染的情况

解决方法：

       使用 html2canvas 库将指定的 DOM 元素（在这个例子中是 id 为 pdf 的元素）转换成一个画布（canvas），然后将这个画布转换成图片，创建一个不可见的 iframe 用于打印，将图片插入到 iframe 中并打印出。

解决代码：

import html2Canvas from 'html2canvas';

export const rootPrint = function (ref: any) {
  // alert("建议使用横向打印")
  // const WindowPrt: any = window.open(
  //   "",
  //   "打印",
  //   "width=" +
  //     (screen.availWidth - 10) +
  //     ",height=" +
  //     (screen.availHeight - 50) +
  //     ",left=0,top=0,location=0,menubar=0,toolbar=0,scrollbars=0,status=0" +
  //     '@page{ size: landscape; }'
  // ) // 裸全屏
  // WindowPrt.document.head.innerHTML = window.document.head.innerHTML // 加入当前所有头 - 以防样式丢失
  // WindowPrt.document.body.innerHTML = ref.innerHTML // 载入指定body
  // WindowPrt.print() // 调用打印
  // setTimeout(() => {
  //   WindowPrt.close() // 自动等待print结束后执行
  // }, 1000);
  // window.print()

  alert("建议使用横向打印");

  html2Canvas(document.querySelector('#pdf'), {
    allowTaint: true, //允许画布污染
    taintTest: false, //禁用污染测试
    useCORS: true, //允许加载跨域图片
    dpi: window.devicePixelRatio * 4, // 将分辨率提高到特定的DPI，提高四倍
    scale: 4, // 按比例增加分辨率
  }).then(function (canvas) {
    // 创建一个临时的img元素来展示canvas内容
    var img = new Image();
    img.src = canvas.toDataURL('image/jpeg', 1.0);

    // 调整图片尺寸以适应A4页面
    img.style.width = '794px';
    img.style.height = 'auto'; // 自动调整高度以保持比例
  
    // 创建一个不可见的iframe用于打印
    var iframe = document.createElement('iframe');
    iframe.style.position = 'absolute';
    iframe.style.width = '0px';
    iframe.style.height = '0px';
    iframe.style.border = 'none';
    document.body.appendChild(iframe);
  
    // 将图片插入到iframe中
    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write('<style>@page { size: A4; margin: 0mm; }</style>'); // 设置页面为A4大小，无页边距
    iframe.contentWindow.document.write(img.outerHTML);
    iframe.contentWindow.document.close();
  
    // 延迟执行打印，确保图片完全加载
    setTimeout(() => {
      iframe.contentWindow.focus();
      iframe.contentWindow.print();
      document.body.removeChild(iframe); // 打印后移除iframe
    }, 1000);
  });
}

最终结果：