2019年5月15日
如何生成一个HTML表和一个PDF节点&谷歌操纵木偶的人
理解NodeJS内部可以有点艰巨的(我知道这对我来说是一次)。节点是一个非常强大的语言,它可以做很多事情。
按照fs文档:
的
fs模块提供了一个API与文件系统进行交互的方式紧密围绕标准POSIX函数建模。
这只是一个幻想的说法呢文件系统是一个在节点与文件读写操作。
现在文件系统是一个巨大无比的效用在NodeJS很多花哨的功能。然而在本文中,我将只讨论3:
- 获取文件信息:fs.statSync
- 删除一个文件:fs.unlinkSync
- 写数据到一个文件:fs.writeFileSync
在本文中,我们将介绍的另一件事谷歌操纵木偶的人这是很酷的,光滑的工具由一些了不起的人在谷歌。
操纵木偶的人是什么?根据文档,他们说:
操纵木偶的人是一个节点库提供一个高级API来控制无头铬或铬DevTools协议。也可以配置为使用完整的(non-headless)铬或铬。
这基本上是一个工具,可以让你在服务器做相关的所有浏览器酷的事情。像得到一个网站的截图,爬行网站,并生成pre-render单页面应用程序的内容。你甚至可以通过NodeJS服务器做表单提交。
操纵木偶的人是一个巨大的工具,所以我们将介绍只是一个小操纵的一个非常酷的特性。我们来看看如何生成一个PDF文件基于我们生成的HTML表文件。在这个过程中,我们将了解puppeteer.launch()和了解一些关于页面()& pdf ()。
所以再次给出一个简短的概述,我们将介绍:
- 生成存根数据使用一个在线工具(发票)。
- 创建一个HTML表与一些样式生成的数据,使用一个自动化的脚本节点。
- 学习使用fs.statSync检查是否存在一个文件
- 学习使用fs.unlinkSync删除一个文件
- 学习使用fs.writeFileSync写文件
- 创建一个PDF文件生成HTML文件使用谷歌操纵木偶的人
- 使他们变成npm脚本,以后使用
在我们开始之前这是整个本教程的源代码为每个人。你不需要写任何东西,但是你应该随着本教程编写代码。这将被证明是更有用的和你了解更多。源代码的教程
在我们开始之前,请确保您至少有以下安装在你的机器上
- 节点版本8.11.2
- 6.9.0节点包管理器(NPM)版本
你不需要,但你也可以看一个介绍性的视频(我第一次做过),讨论了基本的阅读、写作,在NodeJS和删除一个文件。这将帮助您理解本教程。(请给我反馈)。
让我们开始
步骤1:
在你的终端类型在以下:
npm init - y
这将为您初始化一个空的项目。
步骤2:
第二,在同一个文件夹中,创建一个新文件data.json和有一些嘲笑数据。您可以使用下面的示例JSON。
你可以嘲笑的JSON存根数据在这里。产生这些数据我已经使用一个很棒的工具https://mockaroo.com/它是一个在线数据生成器工具。
JSON数据我将有一个这样的结构:
(
{},
{},
{
“invoiceId”:1、
“createdDate”:“3/27/2018”,
“dueDate”:“5/24/2019”,
“地址”:“28058 Hazelcrest中心”,
“公司名称”:“Eayo”,
“invoiceName”:“苏打水——桃”,
“价格”:376
},
{
“invoiceId”:2,
“createdDate”:“6/14/2018”,
“dueDate”:“11/14/2018”,
“地址”:“6205年Shopko法院”,
“公司名称”:“小津”,
“invoiceName”:“面——Fusili三色”,
“价格”:285
},
{},
{}
]
你可以下载本教程的完整JSON数组在这里。
步骤3:
接下来创建一个新文件buildPaths.js
常量路径=要求(“路径”);常量buildPaths = {
buildPathHtml: path.resolve (’。/ build.html '),
buildPathPdf: path.resolve (“/ build.pdf。”)
};模块。出口= buildPaths;
所以path.resolve将在一个相对路径并返回特定目录的绝对路径。
所以path.resolve (' / build.html。');例如会返回这样的:
美元C: \ \用户桌面阿迪尔\ \ \ \ \ \ \ \教程\ \ build.html文章
步骤4:
在同一个文件夹中创建一个文件createTable.js,并添加以下代码:
我知道这是一个很多代码,但是让我们把它分成块,开始理解这一块一块的。
去第106行
在我们的try / catch块我们首先检查是否为HTML构建文件存在于系统中。这是文件的路径,我们NodeJS脚本将生成的HTML。
如果(doesFileExist (buildPathHtml) {}调用doesFileExist()方法只是返回true / false。为此我们使用
fs.statSync (filePath);
这个方法实际上返回的信息文件和文件的大小一样,当文件被创建,等等。然而如果我们提供了一个无效的文件路径,这个方法返回一个零错误。我们在这里使用我们的利益和包装fs.statSync ()方法在一个try / catch。如果节点成功能够读取文件在我们的试块,我们回来了真正的——否则它将抛出一个错误,我们在catch块并返回假。
如果文件存在于我们最终的系统删除文件使用
fs.unlinkSync (filePath);/ /文件路径和删除它
删除文件后,我们需要生成行放在桌子上。
步骤5:
首先我们进口data.json这是我们做的3号线&然后第115行我们使用map()迭代每个条目。你可以阅读更多关于Array.prototype.map ()。
地图方法接受一个方法createRow通过每次迭代需要在一个对象并返回一个字符串的内容是这样的:
“< tr >
< td >发票id < / td >
发票名称< td > < / td >
< td >发票价格< / td >
< td >发票创建日期< / td >
< td > < / td >发票到期日期
< td > < / td >发票地址
< td >发票发送方公司名称< / td >
< / tr > "
const行= data.map (createdRow) . join ();
的加入(")是很重要的一部分,因为我想将我所有的成一个字符串数组。
一个几乎相似的原则是用于生成表第117行与html表第119行。
步骤6:
最重要的部分就是我们写信给我们的文件上第121行:
fs.writeFileSync(buildPathHtml, html);
它接受两个参数:一个是构建路径(字符串)和html内容(字符串),并生成一个文件(如果没有创建;如果它被创建,它覆盖已经存在的文件)。
这里要注意一件事我们可能不需要第四步,我们检查文件是否存在&如果然后删除它。这是因为writeFileSync呢。我只是说,在代码中学习的目的。
第七步:
在你的终端,进入文件夹路径中createTable.js和类型
美元npm。/ createTable.js
当您运行这个脚本时,它将创建一个新文件在同一文件夹中build.html你可以在浏览器中打开该文件,它会看起来像这样。
酷吧?目前为止一切都很顺利。
你也可以添加一个npm脚本在你的包。json是这样的:
“脚本”:{
“构建:表”:“节点/ createTable.js”。
},
这种方式,而不是写作npm。/ createTable.js,你可以输入npm运行构建:表。
接下来:生成的PDF生成HTML文件。
第八步:
首先我们需要安装一个花哨的工具,所以在应用程序文件夹,输入您的终端
npm安装操纵木偶的人
步骤9:
你有文件在同一文件夹中createTable.js,buildPaths.js&data.json,创建一个新文件createPdf.js和添加内容如下:
为我们做createTable.js脚本,让我们把这个分成块,开始一步一步理解这个脚本。
让我们先从40行:在这里,我们调用一个方法init ()调用方法线30。一个关注的是,我们的init()方法是一个异步的方法。了解更多在这个异步函数。
我们称第一个在init()方法printPdf ()方法又一个异步方法,所以我们必须等待其响应。printPdf()方法返回一个PDF实例,我们然后写入一个文件行33。
所以什么printPdf ()方法做了什么?让我们深入挖掘。
常量浏览器=等待puppeteer.launch ();
常量页面=等待browser.newPage ();
等待页面。转到(buildPathHtml {waitUntil:‘networkidle0});
常量pdf =等待page.pdf ({
格式:“A4”,
保证金:{
:“20 px”,右:“20 px”,底部:20 px,左:“20 px”}
});
等待browser.close ();
返回pdf格式;
我们第一次启动一个无头浏览器实例使用操纵木偶的人通过做以下:
等待puppeteer.launch ();/ /返回我们无头浏览器
然后,我们用它来打开一个网页:
等待browser.newPage ();/ /在无头浏览器打开一个空白页
当我们打开一个空白页我们可以导航到一个页面。因为我们的网页是在我们的系统,我们只是
页面。转到(buildPathHtml {waitUntil:‘networkidle0});
在这里waitUntil:“networkidle0;是很重要的,因为它告诉操纵木偶的人等待500 /女士,直到没有更多的网络连接。
注意:这就是为什么我们使用path.resolve绝对路径(),因为为了打开网页与操纵木偶的人,我们需要一个绝对路径。
当我们打开一个网页在浏览器无头在服务器上,我们将该页面保存为pdf格式:
等待页面。pdf ({});
只要我们有一个pdf版本的web页面,我们需要关闭浏览器实例操纵木偶的人开设的节省资源这样做:
等待browser.close ();
然后我们返回pdf保存,然后写入文件。
第十步:
在你的终端类型
美元npm。/ createPdf.js
注意:在运行上面的脚本之前,确保您的build.html生成的文件createTable.js脚本。这样可以确保我们总是有build.html之前运行createPdf.js脚本。在你的包,json执行以下操作。
“脚本”:{
“构建:表”:“节点。/ createTable.js”,
“prebuild: pdf”:“npm运行构建:表”,
“构建:pdf”:“节点/ createPdf.js”。
},
现在如果你运行美元npm运行构建:pdf它将执行createTable.js脚本,然后createPdf.js脚本。你可以阅读更多NPM脚本在他们的官方文档。
当您运行
美元npm运行构建:pdf
它将运行和创建一个build.pdf这将是这个样子:
这就是它,我们就做完了。
您已经了解了以下几点:
- 如何检查一个文件是否存在/春节文件信息(节点)
- 如何删除一个文件在节点
- 如何写一个文件
- 如何使用谷歌操纵来生成PDF文件吗
快乐的学习,我想听到你对这篇文章的想法。你可以找到我推特。
