html生成pdf

第一种

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

const handlePrint = (isPrint) => {
    console.log('pdf');
    const targetDom = pdfs.current;
    console.log(targetDom);

    // 获取节点高度，后面为克隆节点设置高度。
    const height = targetDom.height;
    // 克隆节点，默认为false，不复制方法属性，为true是全部复制。
    const cloneDom = targetDom.cloneNode(true);
    // 设置克隆节点的css属性，因为之前的层级为0，我们只需要比被克隆的节点层级低即可。
    cloneDom.style.backgroundColor = '#fff';
    cloneDom.style.position = 'absolute';
    cloneDom.style.top = '0';
    cloneDom.style.index = '-1';
    cloneDom.style.height = height;
    // 将克隆节点动态追加到body后面。
    document.getElementById('proposal').appendChild(cloneDom);
    // console.log(cloneDom);
    // 插件生成base64img图片。
    html2canvas(cloneDom, {
      dpi: window.devicePixelRatio,
      useCORS: true,
      // 画布开始渲染的y坐标位置
      y: 0,
    }).then((canvas) => {
      console.log('canvas', canvas);
      const contentWidth = canvas.width;
      const contentHeight = canvas.height;
      console.log(contentHeight);

      // 一页pdf显示html页面生成的canvas高度;
      const pageHeight = (contentWidth / 592.28) * 841.89;
      // 未生成pdf的html页面高度
      let leftHeight = contentHeight;
      // 页面偏移
      let position = 0;
      // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
      const imgWidth = 595.28;
      const imgHeight = (595.28 / contentWidth) * contentHeight;
      const pageData = canvas.toDataURL('image/jpeg', 1.0);
      const pdf = new jsPDF('', 'pt', 'a4');
      // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
      // 当内容未超过pdf一页显示的范围，无需分页
      if (leftHeight < pageHeight) {
        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
      } else {
        while (leftHeight > 0) {
          pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
          leftHeight -= pageHeight;
          // 避免添加空白页
          position -= 841.89;
          if (leftHeight > 0) {
            pdf.addPage();
          }
        }
      }
      console.log(pdf);

      const nowDate = dayjs(new Date()).format('YYYY-MM-DD');
      if (isPrint) {
        pdf.autoPrint();
        pdf.output('dataurlnewwindow');
      } else {
        pdf.save('boarding-pass-' + nowDate + '.pdf');
      }
    });
  };

第二种

import html2pdf from 'html2pdf.js';

const exportPdf = () => {
    if (
      imgUrlAplicant &&
      imgUrlInsure &&
      color1 != 'red' &&
      color2 != 'red' &&
      color3 != 'red'
    ) {
      // 要导出的dom节点，注意如果使用class控制样式，一定css规则
      const element = document.getElementById('proposal'); 
      console.log(222);

      // 导出配置
      const opt = {
        margin: 1,
        filename: '特别选择权理财投资申请书',
        image: { type: 'jpeg', quality: 0.18 }, // 导出的图片质量和格式
        html2canvas: { scale: 2, useCORS: true }, // useCORS很重要，解决文档中图片跨域问题
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' },
      };

      if (element) {
        console.log(element);

        // html2pdf().set(opt).from(element).save(); // 导出
        // 下面这个是上传到服务器
        const doc = html2pdf().set(opt).from(element);
        doc
          .toPdf()
          .get('pdf')
          .then(function (pdfObj) {
            const perBlob = pdfObj.output('blob');
            const apply = new File([perBlob], `apply-${now}.pdf`, {
              type: perBlob.type,
            });
            upload(apply, '6');
            // 这里调用后端接口
          });
        setUploadState(true);
      }
    } else {
      setUploadState(false);
      if (color1 == 'red' || color2 == 'red' || color3 == 'red') {
        Toast.fail('请依次点击标红文字');
        document.getElementById('confirm')?.scrollIntoView();
      } else if (!imgUrlAplicant || !imgUrlInsure) {
        Toast.fail('请签名');
      }
    }
  };