时间戳

首页 > 解决方案 > 输出多个文档导致在jsPDF中合并为一个文档

javascript - 输出多个文档导致在jsPDF中合并为一个文档

问题描述

我正在 React 中构建一个简单的 Web 应用程序，人们需要在其中填写表格，并在准备好后将其呈现为 PDF 以发送给客户。

我在 React 中使用 jsPDF，除此之外一切正常；当我输出 1 个文档时没有问题，但是当我输出第二个文档时（当输出第一个文档时），该文档与第一个文档的数据合并，这在我之后输出的每个文档中都会发生

到目前为止，这是我的代码；

import React from "react";
import jsPDF from "jspdf";

const logo = "/images/logo.png"

let PDF = new jsPDF({
  orientation: "p",
  unit: "mm",
  format: "a4",
  putOnlyUsedFonts: true
});

const GetInspectionGroups = value => {
  const result = value.map((g, groupIndex) => {
    const question = g.questions.map((q, questionIndex) => {
      return (
        //QUESTIONS
        PDF.setFontSize(12),
        PDF.text(q.name, 20, 40 + questionIndex * 10),
        PDF.line(20, 43 + questionIndex * 10, 180, 43 + questionIndex * 10),
        PDF.setFontSize(12),
        PDF.text(q.value, 165, 40 + questionIndex * 10)
      );
    });
    return (
      //PAGES
      PDF.setFontSize(15),
      PDF.setFont("Helvetica", "Bold"),
      PDF.text(g.name, 20, 20),
      PDF.setFont("Helvetica", ""),
      question,
      PDF.line(20, 280, 180, 280),
      PDF.addPage({ format: "a4", orientation: "p" })
    );
  });
  return result;
};

const clientDetails = props => {
  return (
    PDF.text(props.projectNumber, 100, 30),
    PDF.setFont("Helvetica", "Bold"),
    PDF.text(props.name, 100, 23),
    PDF.setFont("Helvetica", "")
  );
};

const RenderPDF = props => {
  let project = props.location.state;
  PDF.addImage(logo, "JPEG", 10, 0);
  clientDetails(project);
  PDF.addPage({ format: "a4", orientation: "p" });
  GetInspectionGroups(project.inspectionGroups);
  //PDF.save("test.pdf");
  PDF.output("pdfobjectnewwindow");
  return <div>test</div>;
};

对于链接我使用 react-router-dom 如下，我从道具中获取数据；

<IconButton
                  component={Link}
                  to={{
                    pathname: `/pdf/${this.state.project._id}`,
                    state: this.state.project
                  }}
                  edge="end"
                  aria-label="View"
                >

我在想生成的 PDF 的数据存储在某个地方，我找不到它来清除它。

我想单独渲染所有文件，希望你们能帮忙:)

标签： javascriptreactjsoutputjspdf

解决方案

发布问题后，我修复了它，

问题是下面的代码块在全局范围内..

 let PDF = new jsPDF({
    orientation: "p",
    unit: "mm",
    format: "a4",
    putOnlyUsedFonts: true
  });

-

这是供参考的代码；

import React from "react";
import jsPDF from "jspdf";
import { Redirect } from "react-router-dom";

const logo = '/images/logo.png';


const GetInspectionGroups = (value, PDF) => {
  const result = value.map((g, groupIndex) => {
    const question = g.questions.map((q, questionIndex) => {
      return (
        //QUESTIONS
        PDF.setFontSize(12),
        PDF.text(q.name, 20, 40 + questionIndex * 10),
        PDF.line(20, 43 + questionIndex * 10, 180, 43 + questionIndex * 10),
        PDF.setFontSize(12),
        PDF.text(q.value, 165, 40 + questionIndex * 10)
      );
    });
    return (
      //PAGES
      PDF.setFontSize(15),
      PDF.setFont("Helvetica", "Bold"),
      PDF.text(g.name, 20, 20),
      PDF.setFont("Helvetica", ""),
      question,
      PDF.line(20, 280, 180, 280),
      PDF.addPage({ format: "a4", orientation: "p" })
    );
  });
  return result;
};

const clientDetails = **(props, PDF)** => {
  return (
    PDF.text(props.projectNumber, 100, 30),
    PDF.setFont("Helvetica", "Bold"),
    PDF.text(props.name, 100, 23),
    PDF.setFont("Helvetica", "")
  );
};

const RenderPDF = props => {
  let PDF = new jsPDF({
    orientation: "p",
    unit: "mm",
    format: "a4",
    putOnlyUsedFonts: true
  });

  let project = props.location.state;
  PDF.addImage(logo, "JPEG", 10, 0);
  clientDetails(project, PDF);
  PDF.addPage({ format: "a4", orientation: "p" });
  GetInspectionGroups(project.inspectionGroups, PDF);
  // PDF.save();
  PDF.output("dataurlnewwindow");
  return <Redirect to={`/projects`} />;
};

export default RenderPDF;

推荐阅读