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不包含空變量的構建數組

回答

相關問題