Question

我想创建一个PDF文件以及用户在文本字段中输入的文本（textarea和输入类型=文本）。我有一个iframe，它呈现我的模板由标签和输入文本字段组成。现在，我能够使用jspdf正确地将此模板渲染为PDF文件。我希望模板以及用户输入的文本值在PDF文件中呈现。请注意，我不想永久更改模板html（）。是否有我可以克隆一个临时html，然后通过jspdf渲染它。另请注意，jspdf只会在文本节点中打印文本，这意味着它不会打印textareas等的值。例如：

<body>
  <ul>
    <!-- This is printed as the element contains a textnode -->        
    <li>Print me!</li>
  </ul>
  <div>
    <!-- This is not printed because jsPDF doesn't deal with the value attribute -->
    <input type="textarea" value="Please print me, too!">
  </div>
</body>

我使用以下代码从iframe生成pdf ...

    var body = $("#DispTemp").contents().find('body');
              var pdf = new jsPDF('p', 'pt', 'letter');
              // source can be HTML-formatted string, or a reference
              // to an actual DOM element from which the text will be scraped.
              // var content = document.getElementById('DispTemp').contentWindow.document.body.innerHTML;

              source = body[0].innerHTML;

              // we support special element handlers. Register them with jQuery-style 
              // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
              // There is no support for any other type of selectors 
              // (class, of compound) at this time.
              specialElementHandlers = {
                  // element with id of "bypass" - jQuery style selector
                  '#bypassme': function (element, renderer) {
                      // true = "handled elsewhere, bypass text extraction"
                      return true
                  }
              };
              margins = {
                  top: 80,
                  bottom: 60,
                  left: 40,
                  width: 522
              };
              // all coords and widths are in jsPDF instance's declared units
              // 'inches' in this case
              pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
    'width': margins.width, // max width of content on PDF
    'elementHandlers': specialElementHandlers
},

function (dispose) {
    // dispose: object with X, Y of the last line add to the PDF 
    //          this allow the insertion of new lines after html
    pdf.save('Test.pdf');
                  }, margins);

除了作为一个选项，我还使用了html2canvas和casper库。但是它们存在文本失真的问题..

根据用户在文本字段中创建的文本输入创建PDF文件

0 个答案: