在vue3里面设置一个打印按钮，点击打印直接跳到打印页面，PDF可以生成多页

npm i html2canvas
npm i jspdf
导入到vue3里面

引入

 <div class="all" ref="pdfContent">
</div>
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
// 打印生成的pdf可以生成多页

async function printPDF() {
	  const content = proxy.$refs.pdfContent;
	  const canvas = await html2canvas(content);
	  const imgData = canvas.toDataURL('image/png');
	  const pdf = new jsPDF({
	    orientation: 'portrait',
	    unit: 'px',
	    format: 'a4'
	  });
	  const pdfWidth = pdf.internal.pageSize.getWidth();
	  const pdfHeight = pdf.internal.pageSize.getHeight();
	  const imgProps = pdf.getImageProperties(imgData);
	  const imgHeight = (imgProps.height * pdfWidth) / imgProps.width;
	  let y = 0;
	  while (y < imgHeight) {
	    pdf.addImage(imgData, 'PNG', 0, -y, pdfWidth, imgHeight);
	    y += pdfHeight;
	    if (y < imgHeight) {
	      pdf.addPage();
	    }
	  }
	  // 将 PDF 输出为 Blob 对象
	  const pdfBlob = pdf.output('blob');
	  // 创建 iframe 用于打印
	  const 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.src = URL.createObjectURL(pdfBlob);
	  iframe.onload = function() {
	    iframe.contentWindow.focus();
	    iframe.contentWindow.print();
	  };
	}