HTML文本框内容转PDF问题求助：无内容+仅可下载一次

Hey there! Let's fix those two issues you're facing with your PDF download functionality. Here's what's going wrong and how to fix it:

Issue 1: PDF doesn't include textarea content #

The problem here is that you're using $('#content').html() to fetch the textarea's content. This method only grabs the initial static HTML inside the textarea tag, not the dynamic input the user types in. To get the current value of the textarea, you need to use val() instead—it's designed to pull the live user input from form elements like textareas.

Issue 2: Can't download PDF more than once #

You created the doc instance once at the global level. After the first download, this instance is already processed and can't be reused for subsequent requests. The fix is simple: create a fresh jsPDF object every time the button is clicked, so each download starts with a clean slate.

Modified Working Code #

<!DOCTYPE html> 
<html> 
<head> 
<title>file</title> 
</head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> 
</script> 
<body id="target"> 
<p> reason:</p> 
<div> 
<textarea id="content" rows="4" cols="70"></textarea> 
</div> 
<div id="editor"></div> 
<button id="cmd">as pdf</button> 
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"> 
</script> 
<script> 
var specialElementHandlers = { '#editor': function (element,renderer) { return true; } }; 
$('#cmd').click(function () { 
  // Create a new jsPDF instance for each download
  var doc = new jsPDF();
  // Use val() to get the textarea's current user input
  doc.fromHTML($('#content').val(), 15, 15, { 
    'width': 170, 
    'elementHandlers': specialElementHandlers 
  }); 
  doc.save('Reason.pdf'); 
} ); 
</script> 
</body> 
</html>

Key Changes Made: #

• Moved var doc = new jsPDF(); inside the click handler to generate a fresh PDF instance every time the button is pressed.
• Replaced $('#content').html() with $('#content').val() to capture the live text the user entered.
• Removed the redundant onclick="save()" from the button (since we're already using jQuery's click handler to trigger the action).

内容的提问来源于stack exchange，提问作者santhoshithi