使用操纵up的高质量pdf生成

图片由rawpixel在Unsplash上拍摄

以及我如何用它来制作简历！

背景故事

我正在寻找免费的简历创建者。 尽管我以前使用过Novoresume免费方案，但这还远远不够，因为我无法自定义大部分内容。 而且，他们的付费方案非常昂贵。 因此，作为一名Web开发人员，我刚刚使用HTML + CSS编写了自己的履历生成器🎉

现在，当我想将简历打印为PDF时，我面临一个挑战。 由于dpi较低，因此在任何网页上使用Google Chrome浏览器的默认打印命令所生成的pdf的质量不是很高。

通过JS中的pdf生成器进行搜索，我找不到任何可以通过链接，图像，样式等将准确的pdf生成到我的HTML的良好来源。Puppeteer来了。 它可以拍摄快照或生成任何网页的确切pdf输出！

制作网页

这是我使用HTML + CSS制作的示例简历，我使用ReactJS来构建它，因为它使我更有能力使用js来重复模式和组件体系结构。 但是，普通的.html文件也可以满足此目的。

如果我们使用chrome打印命令（`CTRL + P`）打印此页面并另存为pdf，则会发现pdf的质量不高！ 这是因为Chrome的默认分辨率和72dpi的打印设置。

使用木偶

• 我们需要在计算机上安装NodeJS。

让我们看看反应和非反应版本

ReactJS

假设我们的简历页面在端口3000上运行，并且位于http://localhost:3000 。

现在，由于我们已经在react项目中，并且项目中已有package.json文件，因此，我们首先使用以下命令先安装puppeteer-

npm install --save puppeteer

第1行 ：我们正在加载人偶。

第4行 ：初始化浏览器（我们可以认为这是打开新的Chrome窗口）。

第5行 ：打开一个新页面（我们可以认为这是打开一个新的chrome标签页）。

第6行 ：设置视口的width和height 。 deviceScaleFactor默认为1 ，我们将其加倍，以使输出质量更好。

第7行 ：访问localhost:3000 ，等待所有内容都已通过networkidle2正确加载

8-13行 ：生成一个.pdf文件名为resume.pdf与A4在当前目录中的纸张尺寸。 将printBackground设置为true以打印背景颜色和样式。 pageRanges确保仅获取第一页（如果pageRanges页简历，可以避免使用第一页）。

第15行 ：工作完成后关闭浏览器。

现在，让我们在项目的根文件夹中使用上面的代码创建一个名为generatePDF.js的文件，然后运行以下命令-

generatePDF.js

这将在同一目录中生成一个resume.pdf文件。 现在，如果我们使用pdf查看器打开pdf文件，我们可以看到pdf的质量要好于从浏览器直接打印的pdf（ ctrl+p ）。

使用纯HTML文件

我们只需要从ReactJS版本更改Line 7

await page.goto("file://practice/resumeapp/resume.html", 
{ waitUntil: "networkidle2" });

但是，由于我们没有针对该普通HTML版本的节点/反应项目设置，因此我们只创建一个。

mkdir resumeapp
cd resumeapp

这将创建一个名为resumeapp的目录，并带您进入该目录。

npm init --yes

这将在您的目录中初始化package.json文件。 现在让我们安装puppeteer-

npm install --save puppeteer

现在，使用下面的代码创建一个名为generatePDF.js的文件-

确保您的resume.html文件的路径正确。 现在，在同一shell /目录中运行以下命令。

generatePDF.js

这将在同一目录中生成一个resume.pdf文件。 现在，如果我们使用pdf查看器打开pdf文件，我们可以看到pdf的质量要好于从浏览器直接打印的pdf（ ctrl+p ）。

pdf生成技巧很方便，因为使用puppeteer使我们能够在后端使用chrome的强大功能。 我们可以截取屏幕截图，使用抓取的数据制作书籍，什么不可以！ 可能性是无止境的，这是您要探索的。

祝你好运🙂

From: https://hackernoon.com/high-quality-pdf-generation-using-puppeteer-5b51e2ab231a