Javascript 输出多个文档会导致合并到jsPDF中的一个文档
我正在React中构建一个简单的web应用程序,人们需要在其中填写表单,准备好后,将其呈现为PDF格式发送给客户 我在React中使用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.
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;