用Javascript Apache Cordova创建PDF并通过电子邮件发送

Create and email PDF in Javascript Apache Cordova

本文关键字：电子邮件 PDF Javascript Apache Cordova 创建      更新时间：2023-09-26

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

感谢

好的，为了实现这一点，我们需要添加一些输入并获取它的值，以及一个触发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

按照那里的文档操作，一切都会很好。

演示：Jsfidle

相关文章：