Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/python-3.x/16.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 输出多个文档会导致合并到jsPDF中的一个文档_Javascript_Reactjs_Output_Jspdf - Fatal编程技术网

Javascript 输出多个文档会导致合并到jsPDF中的一个文档

Javascript 输出多个文档会导致合并到jsPDF中的一个文档,javascript,reactjs,output,jspdf,Javascript,Reactjs,Output,Jspdf,我正在React中构建一个简单的web应用程序,人们需要在其中填写表单,准备好后,将其呈现为PDF格式发送给客户 我在React中使用jsPDF,除此之外一切都很好; 当我输出一个文档时,没有问题,但是当我输出第二个文档时(当输出第一个文档时),该文档与第一个文档的数据合并,之后输出的每个文档都会发生这种情况 这是到目前为止我的代码 import React from "react"; import jsPDF from "jspdf"; const logo = "/images/logo.

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

我在React中使用jsPDF,除此之外一切都很好; 当我输出一个文档时,没有问题,但是当我输出第二个文档时(当输出第一个文档时),该文档与第一个文档的数据合并,之后输出的每个文档都会发生这种情况

这是到目前为止我的代码

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”导入React;
从“jsPDF”导入jsPDF;
const logo=“/images/logo.png”
让PDF=newjspdf({
方向:“p”,
单位:毫米,
格式:“a4”,
PutonlySedFonts:真
});
const GetInspectionGroups=值=>{
const result=value.map((g,groupIndex)=>{
const question=g.questions.map((q,questionIndex)=>{
返回(
//问题
PDF.setFontSize(12),
PDF.text(q.name,20,40+问题索引*10),
PDF.line(20,43+问题索引*10,180,43+问题索引*10),
PDF.setFontSize(12),
PDF.text(q.value,165,40+问题索引*10)
);
});
返回(
//页数
PDF.setFontSize(15),
PDF.setFont(“Helvetica”、“粗体”),
PDF.text(g.name,20,20),
PDF.setFont(“Helvetica”和“),
问题:,
PDF.line(20280180280),
PDF.addPage({格式:“a4”,方向:“p”})
);
});
返回结果;
};
const clientDetails=props=>{
返回(
文本(props.projectNumber,100,30),
PDF.setFont(“Helvetica”、“粗体”),
PDF.text(props.name,100,23),
PDF.setFont(“Helvetica”和“”)
);
};
const RenderPDF=props=>{
让项目=props.location.state;
PDF.addImage(徽标,“JPEG”,10,0);
客户详情(项目);
PDF.addPage({格式:“a4”,方向:“p”});
GetInspectionGroups(project.inspectionGroups);
//PDF.save(“test.PDF”);
输出(“pdfobjectnewwindow”);
回归试验;
};
对于链接,我使用react router dom,如下所示,我从道具获取数据

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

我认为生成的PDF的数据存储在某个地方,我找不到它来清除它


我想把所有文件分开呈现,希望你们能帮我:)

在发布问题后,我解决了它

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

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


发布问题后,我修复了它

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

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