Вывод нескольких документов приводит к объединению в один документ в jsPDF. - PullRequest
Новая
       16

Вывод нескольких документов приводит к объединению в один документ в jsPDF.

1 голос
/ 20 июня 2019

Я создаю простое веб-приложение в React, где люди должны заполнять формы, а когда готово, рендерить его в PDF-файл для отправки клиенту.

Я использую jsPDF в React ивсе отлично работает, кроме этого;когда я вывожу 1 документ, проблем нет, но когда я вывожу второй (когда выводится первый), этот документ объединяется с данными первого документа, это происходит с каждым документом, который я выводил после

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

Я думаю, что данные сгенерированного PDF где-то хранятся, я не могу их найти, чтобы их очистить.

Я хотел бы сделать все документы отдельными, надеюсь, что вы, ребята, можете помочь:)

1 Ответ

0 голосов
/ 20 июня 2019

После публикации вопроса я исправил его,

Проблема заключалась в том, что приведенный ниже блок кода находился в глобальной области видимости. 

 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;
...