js生成页面并且下载pdf

import html2canvas from "html2canvas";

import jsPDF from "jspdf";

  const downLoadPage = (params) => {
    return new Promise((resolve, reject) => {
      showLoading();
      let element = document.getElementById("demo"); // 这个dom元素是要导出的pdf的div容器
      let w = element.offsetWidth; // 获得该容器的宽
      let h = element.offsetHeight; // 获得该容器的高
      let offsetTop = element.offsetTop; // 获得该容器到文档顶部的距离
      let offsetLeft = element.offsetLeft; // 获得该容器到文档最左的距离
      let canvas = document.createElement("canvas");
      let abs = 0;
      let win_i = document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
      let win_o = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
      if (win_o > win_i) {
        abs = (win_o - win_i) / 2; // 获得滚动条宽度的一半
      }
      canvas.width = w * 2; // 将画布宽&&高放大两倍
      canvas.height = h * 2;
      let context = canvas.getContext("2d");
      context.scale(2, 2);
      context.translate(-offsetLeft - abs, -offsetTop);
      // 这里默认横向没有滚动条的情况，因为offset.left()，有无滚动条的时候存在差值，因此translate的时候，要把这个差值去掉
      html2canvas(element, {
        allowTaint: true,
        scale: 2, // 提升画面质量，但是会增加文件大小
      }).then((canvas) => {
        let contentWidth = canvas.width;
        let contentHeight = canvas.height;
        // 一页pdf显示html页面生成的canvas高度
        let pageHeight = (contentWidth / 592.28) * 841.89;
        // 未生成pdf的html页面高度
        let leftHeight = contentHeight;
        // 页面偏移
        let position = 0;
        // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        let imgWidth = 595.28;
        let imgHeight = (592.28 / contentWidth) * contentHeight;
        let pageDate = canvas.toDataURL("image/jpeg", 1.0);
        let pdf = new jsPDF("", "pt", "a4");
        // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面的高度（841.89）
        // 当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          pdf.addImage(pageDate, "JPEG", 0, position, imgWidth, imgHeight);
        } else {
          // 分页
          while (leftHeight > 0) {
            pdf.addImage(pageDate, "JPEG", 0, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= 841.89;
            // 避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage();
            }
          }
        }
        // pdf.save(`wqeqwe.pdf`);
        const pdfData = pdf.output("datauristring"); // 获取base64Pdf
        const myfile = dataURLtoFile(pdfData, 111 + ".pdf");
        const formData = new FormData();
        formData.append("file", myfile); // 文件对象
        // 上传
        axios({
          url: `url`,
          method: "post",
          data: formData,
          headers: { laravel_session: localStorage.getItem("laravel_session") },
        }).then((res) => {
          if (res.data.code === 0) {
            resolve(true);
          } else {
            message.error(res.data.message);
            return;
          }
        });
      });
    });
  };

    const dataURLtoFile = (dataurl, filename) => {
    var arr = dataurl.split(","),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mime });
  };