jsPDF不包含空变量的构建数组
问题描述：
我想弄明白一些事情导致我甚至没有看到通过树木的木头。当谈到JavaScript时，我是一个noob，我通常会使用数据库来排序，但在这里没有这个选项。jsPDF不包含空变量的构建数组
什么实际上，我工作是：
这是一个测验的应用程序，要求用户到（descrete答案/ SCORM标准）问题，那么另一个（自由文本/长文本）问题的反应。代码的这个特定部分用于创建用户响应的PDF输出（带有一点头信息）。
我必须使用JavaScript来构建一个pdf（使用“jsPDF - Parallax”），输出我在其他地方生成的一组变量。例如。
//VARIABLES........................................................................
var NoofQuesAnswered = VarNoofQuesAnswered.getValue();
var User_Score = VarUser_Score.getValue();
var CorrectImagData = 'data:image/jpeg;base64,/9j/etc/etc'; //Omitted actual 64base text
var IncorrectImgData = 'data:image/jpeg;base64,/9j/etc/etc'; //Omitted actual 64base text
/* General Text Values */
var notAnswered = '~~~null~~~';
var questionExcludedTitle = 'Question Excluded';
var questionAnswerGivenTitle = 'Answer Given';
var openQuestionTitle = 'Open Question';
/* Question Title - Variables */
var questionTitle_1 = 'Question 1';
var questionTitle_2 = 'Question 2';
var questionTitle_3 = 'Question 3';
var questionTitle_4 = 'Question 4';
var questionTitle_5 = 'Question 5';
var questionTitle_N = 'Question N';
/* Question Response/Answer Given - Variables */
//These variables are determined elsewhere (XML/Javascript)
var UsersAnswer_Que1 = Var_UsersAnswer_Que1.getValue();
var UsersAnswer_Que2 = Var_UsersAnswer_Que2.getValue();
var UsersAnswer_Que3 = Var_UsersAnswer_Que3.getValue();
var UsersAnswer_Que4 = Var_UsersAnswer_Que4.getValue();
var UsersAnswer_Que5 = Var_UsersAnswer_Que5.getValue();
var UsersAnswer_QueN = Var_UsersAnswer_QueN.getValue();
/* Open Question - Variables */
var openQuestion_1 = 'Why are young people potentially at risk?';
var openQuestion_2 = 'Why are there champions for young people?';
var openQuestion_3 = 'How does social media impact on the lives of young people?';
var openQuestion_4 = 'What kinds of support are there for young people, in your area?';
var openQuestion_5 = 'What type of information are young people most likely to need in crisis?';
var openQuestion_N = 'Open question (n)';
/* Open Question - User Response/Answer Given Variables */
//These variables are determined elsewhere (XML/Javascript)
var UserResp_LongTextQue_1 = Var_UserResp_LongTextQue_1.getValue();
var UserResp_LongTextQue_2 = Var_UserResp_LongTextQue_2.getValue();
var UserResp_LongTextQue_3 = Var_UserResp_LongTextQue_3.getValue();
var UserResp_LongTextQue_4 = Var_UserResp_LongTextQue_4.getValue();
var UserResp_LongTextQue_5 = Var_UserResp_LongTextQue_5.getValue();
var UserResp_LongTextQue_N = Var_UserResp_LongTextQue_N.getValue();然后用jsPDF我建立这样的页面，设置在第一页上的标头信息（这是上有不同的内容的唯一页：
function genPDF() { //Function to output the pdf using jsPDF
var doc = new jsPDF();
/* Begin Page Build */
// Page Header Space........................................................................
/* There are some other logos and other header bits here but I have ommitted them due to copyright */
doc.setFont('helvetica')
doc.setFontSize(30)
doc.text(50, 55, 'Results and Responses')
doc.setFontSize(14)
doc.text(45, 78, 'No. of Questions Answered -')
doc.text(113, 78, NoofQuesAnswered)
doc.text(125, 78, 'Final score -')
doc.text(158, 78, User_Score)
doc.line(20, 82, 195, 82)
// Questions with responses
/* This is the point at which i need to build the page dynamically becasue the stuff above is all static and everything below could be built dynically */
// \t Question_1
doc.line(20, 113, 195, 113)
if (Var_UsersAnswer_Que1.equals(notAnswered)) {
doc.setFontSize(25)
doc.text(65, 125, questionTitle_1)
doc.line(20, 130, 195, 130)
doc.setFontSize(30)
doc.text(58, 155, questionExcludedTitle)
} else {
doc.setFontSize(14)
doc.text(20, 120, questionAnswerGivenTitle)
doc.setFontSize(12)
var splitUsersAnswer_Que1 = doc.splitTextToSize(usersAnswer_Que1, 150);
doc.text(20, 127, splitUsersAnswer_Que1)
doc.line(20, 130, 195, 130)
doc.setFontSize(14)
doc.text(20, 137, openQuestionTitle)
doc.setFontSize(12)
var splitOpenQuestion_1 = doc.splitTextToSize(openQuestion_1, 180);
doc.text(20, 145, splitOpenQuestion_1)
if (Var_UsersAnswer_Que1.isCorr('\u0041\u006C\u006C\u0020\u0061\u0072\u0065')) {
doc.addImage(CorrectImagData, 'Correct Image', 185, 115, 10, 11)
} else {
doc.addImage(IncorrectImgData, 'Incorrect Image', 185, 115, 10, 11)
}
doc.setFontSize(12)
var splitUserResp_LongTextQue_1 = doc.splitTextToSize(userResp_LongTextQue_1, 170);
doc.text(20, 160, splitUserResp_LongTextQue_1)
doc.line(20, 153, 195, 153)
}
// \t Question_2
doc.line(20, 190, 195, 190)
if (Var_UsersAnswer_Que2.equals(notAnswered)) {
doc.setFontSize(25)
doc.text(65, 202, questionTitle_2)
doc.line(20, 207, 195, 207)
doc.setFontSize(30)
doc.text(58, 232, questionExcludedTitle)
} else {
doc.setFontSize(14)
doc.text(20, 197, questionAnswerGivenTitle)
doc.setFontSize(12)
var splitUsersAnswer_Que2 = doc.splitTextToSize(usersAnswer_Que2, 150);
doc.text(20, 204, splitUsersAnswer_Que2)
doc.line(20, 207, 195, 207)
doc.setFontSize(14)
doc.text(20, 214, openQuestionTitle)
doc.setFontSize(12)
var splitOpenQuestion_2 = doc.splitTextToSize(openQuestion_2, 180);
doc.text(20, 222, splitOpenQuestion_2)
if (Var_UsersAnswer_Que2.isCorr('\u0049\u006E\u0066\u006F\u0072\u006D\u0061\u0074\u0069\u006F\u006E')) {
doc.addImage(CorrectImagData, 'Correct Image', 185, 192, 10, 11)
} else {
doc.addImage(IncorrectImgData, 'Incorrect Image', 185, 192, 10, 11)
}
doc.setFontSize(12)
var splitUserResp_LongTextQue_2 = doc.splitTextToSize(userResp_LongTextQue_2, 170);
doc.text(20, 237, splitUserResp_LongTextQue_2)
doc.line(20, 230, 195, 230)
}
//New Page - From here down, the position of everything on the page will be the same
doc.addPage()
// \t Question_3
doc.line(20, 13, 195, 13)
if (Var_UsersAnswer_Que3.equals(notAnswered)) {
doc.setFontSize(25)
doc.text(65, 25, questionTitle_3)
doc.line(20, 30, 195, 30)
doc.setFontSize(30)
doc.text(58, 55, questionExcludedTitle)
} else {
doc.setFontSize(14)
doc.text(20, 20, questionAnswerGivenTitle)
doc.setFontSize(12)
var splitUsersAnswer_Que3 = doc.splitTextToSize(usersAnswer_Que3, 150);
doc.text(20, 27, splitUsersAnswer_Que3)
doc.line(20, 30, 195, 30)
doc.setFontSize(14)
doc.text(20, 37, openQuestionTitle)
doc.setFontSize(12)
var splitOpenQuestion_3 = doc.splitTextToSize(openQuestion_3, 180);
doc.text(20, 45, splitOpenQuestion_3)
if (Var_UsersAnswer_Que3.isCorr('\u0041\u006C\u006C\u0020')) {
doc.addImage(CorrectImagData, 'Correct Image', 185, 15, 10, 11)
} else {
doc.addImage(IncorrectImgData, 'Incorrect Image', 185, 15, 10, 11)
}
doc.setFontSize(12)
var splitUserResp_LongTextQue_3 = doc.splitTextToSize(userResp_LongTextQue_3, 170);
doc.text(20, 60, splitUserResp_LongTextQue_3)
doc.line(20, 53, 195, 53)
}
// \t Question_4
doc.line(20, 90, 195, 90)
if (Var_UsersAnswer_Que4.equals(notAnswered)) {
doc.setFontSize(25)
doc.text(65, 102, questionTitle_4)
doc.line(20, 107, 195, 107)
doc.setFontSize(30)
doc.text(58, 132, questionExcludedTitle)
} else {
doc.setFontSize(14)
doc.text(20, 97, questionAnswerGivenTitle)
doc.setFontSize(12)
var splitUsersAnswer_Que4 = doc.splitTextToSize(usersAnswer_Que4, 150);
doc.text(20, 104, splitUsersAnswer_Que4)
doc.line(20, 107, 195, 107)
doc.setFontSize(14)
doc.text(20, 114, openQuestionTitle)
doc.setFontSize(12)
var splitOpenQuestion_4 = doc.splitTextToSize(openQuestion_4, 180);
doc.text(20, 122, splitOpenQuestion_4)
if (Var_UsersAnswer_Que4.isCorr('\u0041\u006C\u006C\u0020\u0061\u0072\u0065\u0020')) {
doc.addImage(CorrectImagData, 'Correct Image', 185, 92, 10, 11)
} else {
doc.addImage(IncorrectImgData, 'Incorrect Image', 185, 92, 10, 11)
}
doc.setFontSize(12)
var splitUserResp_LongTextQue_4 = doc.splitTextToSize(UserResp_LongTextQue_4, 170);
doc.text(20, 137, splitUserResp_LongTextQue_4)
doc.line(20, 130, 195, 130)
}
// \t Question_5
doc.line(20, 167, 195, 167)
if (Var_UsersAnswer_Que5.equals(notAnswered)) {
doc.setFontSize(25)
doc.text(65, 179, questionTitle_5)
doc.line(20, 184, 195, 184)
doc.setFontSize(30)
doc.text(58, 209, questionExcludedTitle)
} else {
doc.setFontSize(14)
doc.text(20, 174, questionAnswerGivenTitle)
doc.setFontSize(12)
var splitUsersAnswer_Que5 = doc.splitTextToSize(usersAnswer_Que5, 150);
doc.text(20, 181, splitUsersAnswer_Que5)
doc.line(20, 184, 195, 184)
doc.setFontSize(14)
doc.text(20, 191, openQuestionTitle)
doc.setFontSize(12)
var splitOpenQuestion_5 = doc.splitTextToSize(openQuestion_5, 180);
doc.text(20, 199, splitOpenQuestion_5)
if (Var_UsersAnswer_Que5.isCorr('\u0048\u006F\u0077\u0020\u0074\u006F\u0020\u0067\u0065\u0074')) {
doc.addImage(CorrectImagData, 'Correct Image', 185, 169, 10, 11)
} else {
doc.addImage(IncorrectImgData, 'Incorrect Image', 185, 169, 10, 11)
}
doc.setFontSize(12)
var splitUserResp_LongTextQue_5 = doc.splitTextToSize(openQuestion_5, 170);
doc.text(20, 214, splitUserResp_LongTextQue_5)
doc.line(20, 207, 195, 207)
}
//New Page - There are another 55 questions
// doc.addPage()
/* \t Question_N
doc.line(20, 13, 195, 13)
if (Var_UsersAnswer_QueN.equals(notAnswered)) {
\t doc.setFontSize(25)
\t doc.text(65, 25, questionTitle_N)
\t doc.line(20, 30, 195, 30)
\t doc.setFontSize(30)
\t doc.text(58, 55, questionExcludedTitle)
} else {
\t doc.setFontSize(14)
\t doc.text(20, 20, questionAnswerGivenTitle)
\t doc.setFontSize(12)
\t var splitUsersAnswer_QueN = doc.splitTextToSize(usersAnswer_QueN, 150);
\t doc.text(20, 27, splitUsersAnswer_QueN)
\t doc.line(20, 30, 195, 30)
\t doc.setFontSize(14)
\t doc.text(20, 37, openQuestionTitle)
\t doc.setFontSize(12)
\t var splitOpenQuestion_N = doc.splitTextToSize(openQuestion_N, 180);
\t doc.text(20, 45, splitOpenQuestion_N)
\t if (Var_UsersAnswer_QueN.isCorr('\u0041\u006C\u006C\u0020')) {
\t \t doc.addImage(CorrectImagData, 'Correct Image', 185, 15, 10, 11)
\t } else {
\t \t doc.addImage(IncorrectImgData, 'Incorrect Image', 185, 15, 10, 11)
\t }
\t doc.setFontSize(12)
\t var splitUserResp_LongTextQue_N = doc.splitTextToSize(userResp_LongTextQue_N, 170);
\t doc.text(20, 60, splitUserResp_LongTextQue_N)
\t doc.line(20, 53, 195, 53)
}
\t
etc................................................
\t
*/
// Save document/Create PDF
doc.save('Test.pdf');
}目前，这个C的结果ode是每个问题（1-60）的pdf生成，其中每个问题和每个问题的每个元素都有一个预定义的页面位置。然而，它会检查是否有回应（在所有60个问题中，用户只被要求回答30个随机确定的问题），如果没有回答这个问题（因为应用程序甚至没有提供问题给用户）它会说“问题排除”，但会保持页面上的空间。
因此，我最终得到了40多页，其中只有回答的问题显示用户的回答，因为排除的问题显示为这样。
我希望能够动态地构建页面使用（我认为）一个数组填充变量一旦它已经建立的问题没有得到回答，然后完全忽略它们，在建立PDF只有用户回答的问题。
我想要实现的目标是根据用户回答的问题数量（可能是1或2，但可能多达30）来减少页数。我无法理解的事实是，因为我必须说明每个元素在页面上的实际位置，所以我不能让它自动堆叠，因为我必须使用Javascript，我可以只需查询响应，然后将它们即时插入页面即可。
任何帮助将不胜感激。
我可能在这里完全走错了路，所以很高兴听到更好的方法。
在此先感谢。
答
这听起来像你只是想回应的阵列，过滤为空：
const answers = [AnswerToQuestion1, AnswerToQuestion2, AnswerToQuestion3].filter(x => x);
的过滤功能来将其去除是null或undefined任何记录。如果您的空答案不等于空，但是是一个字符串或其他东西，那么您可以将其过滤为：
const answers = [AnswerToQuestion1, AnswerToQuestion2, AnswerToQuestion3].filter(x => x != whateverYourNullLooksLike);
+0
感谢摩根听起来不错。我明天会试试，所以我会让你知道它是否适用，如果不适用，我会给你一些更多的信息。 –
+0
Hey @Morgan，我已更新我的文章以包含完整的代码示例。你认为我可以使用你的想法来构建一个数组，然后过滤它以获取我需要做的事情吗？我是否需要使用已过滤的数组将元素插入位于页面上的占位符（但只有30个占位符）。我希望我在这里有意义。再次感谢！ –
+0
对于notAnswered，你的值看起来是字符串'~~~ null ~~~'，在这种情况下，你需要创建你的数组，如： –
对于要创建具有变量的数组的部分，可以你发布你的代码尝试（或接近它的东西）？ – bitstrider
我会在这里发布一些更多我想要做的事情的示例代码（这是格林威治标准时间下午7点50分），所以我已经把它留到了晚上，但明天下午我会回来。欢呼快速回复的家伙。 –
嗨@bitstrider，我已更新帖子以包含示例代码。让我知道你还有什么想看的。如果需要，我可以附上输出示例，因为代码不会运行，因为您无法访问我的应用程序中其他位置确定的变量。谢谢！ –