puppeteer api_Node.js和Puppeteer API上的项目| 使用Node.js和Express将表单提交转换为PDF...

最新推荐文章于 2024-07-15 09:55:23 发布

「已注销」

最新推荐文章于 2024-07-15 09:55:23 发布

阅读量204

点赞数

文章标签： python java nodejs vue js ViewUI

原文链接：https://www.includehelp.com/node-js/project-on-node.js-and-puppeteer-api-converting-form-submission-to-pdf-with-node-js-and-express.aspx

版权

puppeteer api

Node.js和Puppeteer API上的项目 (Project on Node.js and Puppeteer API )

使用Node.js和Express将表单提交转换为PDF (Converting Form Submission to PDF with Node.js and Express)

Hi guys! We have spoken a lot about interaction with web pages and forms using node and puppeteer. Today, let's see the compiled code of a project on converting a submitted form into PDF.

嗨，大家好！我们已经讲了很多有关使用node和puppeteer与网页和表单进行交互的信息。今天，让我们看看将提交的表单转换为PDF的项目的编译代码。

Our code will:

我们的代码将：

Create an http server.
创建一个http服务器。
Will be served at port 8080 in a web browser.
将在网络浏览器的端口8080上提供。
Form will be filled and submitted by user.
表格将由用户填写并提交。
Finally submitted information will be converted to pdf.
最后提交的信息将转换为pdf。

Cool right!!!

酷吧！！

You should have some knowledge in express
你应该有一些快递方面的知识
Knowledge on Node.js and puppeteer api
有关Node.js和puppeteer api的知识
If not, review our previous articles
如果没有，请查看我们以前的文章

Take Note! You should have Node.js and puppeteer installed in your PC.

做记录！ 您应该在PC中安装Node.js和puppeteer。

With Node.js and puppeteer already up and running, let's get started.

现在已经启动并运行了Node.js和puppeteer，让我们开始吧。

*NB: If you don't yet have Node.js/ puppeteer installed in your PC, read the article Node.js and Google Puppeteer API series

*注意：如果您的PC尚未安装Node.js / puppeteer，请阅读文章Node.js和Google Puppeteer API系列

Now, let's get started by typing our project source code.

现在，让我们开始输入项目源代码。

Open a text editor and type the following code and save it with the file name app.js:

打开一个文本编辑器，输入以下代码，并将其保存为文件名app.js ：

After saving your file, initiate the file by opening the command line and execute the command node app.js
保存文件后，通过打开命令行来启动文件并执行命令节点app.js
If app runs successfully, it'll print app listening at port 8080 on the console
如果应用程序成功运行，它将在控制台上的8080端口上侦听应用程序
Open the browser at http://localhost:8080/form
在http：// localhost：8080 / form打开浏览器
Fill the form and click submit
填写表格并点击提交
After successful conversion to pdf, pdf created will be printed at the console
成功转换为pdf后，创建的pdf将在控制台上打印
Check your directory and open file named testpdf.pdf
检查目录并打开名为testpdf.pdf的文件

BELOW ARE SCREENSHOTS...

以下是屏幕截图...

Code:

码：

var http = require ( "http" ) ;
const puppeteer = require ('puppeteer');
const fs = require ('fs'); 
var express = require ( 'express' ) ;
var app = express () ;
var bodyParser = require ( 'body-parser' ) ;
var urlencodedParser = bodyParser.
urlencoded ({ extended : true }) ;
// Running Server Details.
var server = app. listen(8080 , function ()
{
  var host = server. address() . address
var port = server. address() . port
console.log( "app listening at %s:%s Port" , host, port )
}) ;

// web page/form
app. get( '/form' , function ( req, res ) {        // we used just one route which is the /form 
var html = '' ;
html += "<body>" ;
html += "<body bgcolor = lightgrey>";
html += "<center>";
html += "<form action='/thank' method='post' name='form1'></br>" ;
html += "<fieldset>";
html += " <legend>Personal information:</legend>";
html += "Name:<input type= 'text' name='name' placeholder='name'></br></br>" ;
html += "Email:<input type='text' name='email' placeholder='email'></br></br>" ;
html += "address:<input type='text' name='address' placeholder='address'></br></br>" ;
html += "Mobile number:<input type='text' name='mobilno' placeholder='number'></br></br>" ;
html += "<input type='submit' value='submit'></br></br>";
html += "<INPUT type='reset'  value='reset'>" ;
html += "</fieldset>";
html += "</form>" ;
html += "</body>" ;
res. send ( html) ;
}) ;
app. post ('/thank' , urlencodedParser, function ( req, res ){
var reply ='' ;
reply += "Your name is:" +  " " + req. body . name ;
reply += "</br>" ;
reply += "</br>" ;
reply += "Your E-mail id is:" + " " + req. body.email ;
reply += "</br>" ;
reply += "</br>" ;
reply += "Your address is" + " " + req. body.address ;
reply += "</br>" ;
reply += "</br>" ;
reply += "Your mobile number is" + " " + req.
body . mobilno;
res. send ( reply ) ;
//puppeteer
(async function () {
	try {
		
		const browser = await puppeteer.launch();
		const page = await browser.newPage();
		await page.setContent (reply);
		await page.emulateMedia ('screen');
		await page.pdf ({
		path: 'testpdf.pdf',
		format: 'A4',
		printBackground: true
		});
		console.log ('pdf created');
		await browser.close();
		process.exit();
	} catch (e) {
		console.log ('our error', e);
	}
	
} ) () ;
}) ;