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，我可以只需查询响应，然后将它们即时插入页面即可。

任何帮助将不胜感激。

我可能在这里完全走错了路，所以很高兴听到更好的方法。

在此先感谢。

来源

2017-11-11 Hally B

对于要创建具有变量的数组的部分，可以你发布你的代码尝试（或接近它的东西）？ – bitstrider

我会在这里发布一些更多我想要做的事情的示例代码（这是格林威治标准时间下午7点50分），所以我已经把它留到了晚上，但明天下午我会回来。欢呼快速回复的家伙。 –

嗨@bitstrider，我已更新帖子以包含示例代码。让我知道你还有什么想看的。如果需要，我可以附上输出示例，因为代码不会运行，因为您无法访问我的应用程序中其他位置确定的变量。谢谢！ –

这听起来像你只是想回应的阵列，过滤为空：

const answers = [AnswerToQuestion1, AnswerToQuestion2, AnswerToQuestion3].filter(x => x);

的过滤功能来将其去除是null或undefined任何记录。如果您的空答案不等于空，但是是一个字符串或其他东西，那么您可以将其过滤为：

const answers = [AnswerToQuestion1, AnswerToQuestion2, AnswerToQuestion3].filter(x => x != whateverYourNullLooksLike);

来源

2017-11-11 18:27:55

感谢摩根听起来不错。我明天会试试，所以我会让你知道它是否适用，如果不适用，我会给你一些更多的信息。 –

Hey @Morgan，我已更新我的文章以包含完整的代码示例。你认为我可以使用你的想法来构建一个数组，然后过滤它以获取我需要做的事情吗？我是否需要使用已过滤的数组将元素插入位于页面上的占位符（但只有30个占位符）。我希望我在这里有意义。再次感谢！ –

对于notAnswered，你的值看起来是字符串'~~~ null ~~~'，在这种情况下，你需要创建你的数组，如： –

jsPDF不包含空变量的构建数组

回答

相关问题