在 Javascript Apache Cordova 中创建和发送 PDF答案

【问题标题】：Create and email PDF in Javascript Apache Cordova在 Javascript Apache Cordova 中创建和发送 PDF
【发布时间】：2016-04-17 08:22:25
【问题描述】：

我正在使用 JavaScript 和 HTML 为 Android 构建一个 Apache Cordova 应用程序。我希望用户单击/点击一个按钮，然后该按钮将使用他们刚刚在文本字段中输入的字符串生成 PDF，然后打开一封电子邮件以发送 PDF 附件。附件不需要保存到设备，但如果需要，可以在发送前保存。这可能吗？如果可以，是否有任何文档或教程说明如何执行此操作？

谢谢

【问题讨论】：

标签： javascript android cordova email pdf

【解决方案1】：

好的，为了实现这一点，我们需要添加一些输入并获取它的值，以及一个会触发 js 的按钮。这很容易。

HTML：

<input type="text" id="name" placeHolder="Enter Your name" />
<input type="text" id="lname" placeHolder="Enter Your last name" />
<input type="text" id="hobby" placeHolder="Enter Your hobby" />
<input type="text" id="skills" placeHolder="Enter Your skills" />

<button id="btn">
   Get results
</button>
<!--values will be shown inside the div#content-->
<div id="content"></div>

接下来是 JavaScript 部分，您将在其中显示带有 <p></p> 标记的 div#content 内的所有输入值。

JavaScript：

function onload() {
  var input, btn, p, content, input_array;
  //grab the button by ID
  btn = document.getElementById("btn");
  //grab all inputs 
  input = document.getElementsByTagName("INPUT");
  //grab the div by ID
  content = document.getElementById("content");
  // Add some 'Data' inside the variable so that you show
  // the user what he answered
  input_array = [
    "Name:",
    "Last name:",
    "Hobby:",
    "Skills:"
  ];
    //attach the click event listener to the button
  btn.addEventListener("click", function() {
        //Using the for loop, we basically create 4 <p> elements inside
    //the div#content
    for (var i = 0; i <= 3; i++) {
      p = content;
      // we display all of the input values within a <p> tag
      // with a class of 'testing' so that you cn change it later
      // on for styling it etc..
      // Then we add the array and input values inside the <p> tag
      p.innerHTML += "<p class='testing'>" + input_array[i] + " " + input[i].value + "</p>";
    }

  }, false);
}
//call the function
onload();

现在您已经显示了这些值，您可以做很多事情。您可以将用户写入的所有内容存储到一个数组中，做一些很酷的动画并淡入结果。

要将结果生成为 PDF 格式，您需要使用我在 GitHub 上找到的这个插件，据说用户可以保存生成的 PDF。

（请注意，我个人之前没有使用过这个插件，所以我不给你任何保证。）

链接：cordova-plugin-html2pdf

按照那里的文档进行操作，一切正常。

演示： Jsfiddle

【讨论】：