React生成PDF

2022/05/23 javascript

前端项目生成PDF

1、直接上代码

import html2canvas from "html2canvas";
import JsPDF from "jspdf";
// import { uploadImg } from "./service";
export const html2pdf = async (name, id = "document-dom") => {
  let el = document.getElementById(id); //通过getElementById获取要导出的内容
  let ele = el.cloneNode(true);
  try {
  } catch (e) {}
  const div = document.createElement("div");
  div.setAttribute("id", "divInnerHtmlIsFileList");
  div.style.cssText = "position:absolute;z-index:-1;bottom:0;left:0";
  div.appendChild(ele);
  document.body.appendChild(div);

  let eleW = el.offsetWidth; // 获得该容器的宽
  let eleH = el.offsetHeight; // 获得该容器的高

  let eleOffsetTop = el.offsetTop; // 获得该容器到文档顶部的距离
  let eleOffsetLeft = el.offsetLeft; // 获得该容器到文档最左的距离

  let canvasEle = document.createElement("canvas");
  let abs = 0;
  let win_in =
    document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度(不包含滚动条)
  let win_out = window.innerWidth; // 获得当前窗口的宽度(包含滚动条)

  if (win_out > win_in) {
    abs = (win_out - win_in) / 2; // 获得滚动条宽度的一半
  }
  canvasEle.width = eleW * 2; // 将画布宽&&高放大两倍
  canvasEle.height = eleH * 2;

  let context = canvasEle.getContext("2d");
  context.scale(2, 2);
  context.translate(-eleOffsetLeft - abs, -eleOffsetTop);

  let canvas = await html2canvas(div, {
    dpi: 96, //分辨率
    scale: 2, //设置缩放
    useCORS: true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。,
    //backgroundColor:'#ffffff',这样背景还是黑的
    bgcolor: "#ffffff", //应该这样写
    logging: false, //打印日志用的 可以不加默认为false
  });
  // el.setAttribute("crossOrigin",'anonymous');
  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 = (595.28 / contentWidth) * contentHeight;
  let pageData = canvas.toDataURL("image/jpeg", 1.0);
  let pdf = new JsPDF("", "pt", "a4");
  // var pdf = new JsPDF('p', 'pt', 'letter');

  if (leftHeight < pageHeight) {
    //在pdf.addImage(pageData, 'JPEG', 左,上,宽度,高度)设置在pdf中显示;
    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();
      }
    }
  }
  //可动态生成
  const formData = new FormData();
  let pdfFile = new window.File([pdf.output("blob")], name, {
    type: "application/pdf",
  });
  const url = window.URL.createObjectURL(pdfFile);
  window.open(url)
};

export const hideDom = (el, ele) => {
  try {
    let div = document.getElementById("divInnerHtmlIsFileList");
    div.removeChild(ele);
    document.body.removeChild(div);
  } catch (e) {}
};

调用的地方


import {html2pdf} from '@/global/utils'

const printGB = ()=>{
  html2pdf('名字', `DomId`)
}

Search

    Table of Contents