使用 npm 包 receiptpdf,我们可以轻松地生成符合标准的收据 PDF 文件,其中包含一些基本的功能,如行和列的定义、标题和页脚。这个 npm 包适用于前端开发人员,方便他们在自己的项目中使用。
安装
使用 npm 安装 receiptpdf:
npm install receiptpdf --save
基本用法
使用 receiptpdf 可以创建 PDF,如下所示:
-- -------------------- ---- ------- ----- ---------- - ---------------------- ----- ---- - - ----- - ------ --- ---- -- ----- ------ --- ---- -- ----- -- -------- -------- -------- ----------- --------- -- ------------------------------------ -- - -- - --- ---------------- -- ------------ -- - ------------------- ---
在上面的例子中,我们将一个包含行和列的数据对象传递给 ReceiptPdf.generate
。该方法将返回一个 Promise,当解析完成时,它将提供 PDF 数据的缓冲区。
渲染 PDF 是一个有限状态机,并根据对象的属性绘制一个或多个页面。状态选择另一个状态,这一过程会一遍遍地进行,直到达到 PDF 达到完美状态为止。
不过这只是一个简单的例子。下面是其他一些更复杂和重要的格式,以及如何使用它们。
数据格式
我们需要将复杂的数据格式传递给 ReceiptPdf.generate
,以便生成 PDF。该格式是一个包含两个键(columns
和 rows
)的 JavaScript 对象。我们来看一下这个格式的详细说明:
列
列是 PDF 中映射每个值的标题对象,它是一个数组。如果标题行长于计算出的列宽度,列宽度将自动调整以适应标题的行长。
以下是一些可选的属性:
textStyle
: 一个可选的样式对象,它控制列标题的文本样式。fillColor
: 一个可选的填充颜色对象,它控制列标题的背景颜色。
以下是一个包含单个列的对象的例子:
{ columns: [ { text: 'Item' } ], rows: [] }
这个例子创建了一个只包含一列的 PDF,其标题为“Item”。这一个值是一个字符串,是对象的“text”属性的值。
行
行是 PDF 中映射每个值的数组。每个值位于与其相关联的列中。行是一个数组,其中包含其他数组,表示一个或多个单元格的值,这是我们在 PDF 中看到的表格的最重要组成部分。
以下是一些可选的属性:
height
: 一个行高的数字,可以很好地控制 PDF 中单个行的高度。textStyle
: 一个可选的样式对象,它控制行中的文本样式。fillColor
: 一个可选的填充颜色对象,它控制行中的背景颜色。borderColor
: 一个可选的边框颜色对象,它控制行中的边框颜色和宽度。paddingTop
,paddingLeft
,paddingBottom
,paddingRight
: 数字,控制单元格内部的顶部、左侧、底部和右侧的空白。
以下是一个表示两行,三列的对象的例子:
{ columns: ['Language', 'Year', 'Creator'], rows: [ ['JavaScript', 1995, 'Netscape'], ['Java', 1995, 'Sun Microsystems'], ] }
对于每行,值的顺序与列数组的顺序相同,表示该行将映射到哪个列。
标题和页脚
使用 PDF 创建器还可以添加标题和页脚。以下是使用 ReceiptPdf
API 中可用的选项:
title
: 一个字符串,它是 PDF 中的标题。subtitle
: 一个可选的字符串,它是 PDF 中的副标题。author
: 一个可选的字符串,它是 PDF 中的作者。landscape
: 一个可选的布尔值,默认情况下为 false,它表示是否应使用横向页面布局。fontSize
: 一个可选的数字,PDF 中文本的默认字体大小。margins
: 包含以下可选属性的对象:top
,bottom
,left
,right
:数字,PDF 页面的边界。headerHeight
,footerHeight
: 数字,PDF 中头部和页脚的高度。
info
: 一个对象,它将作为 PDF 元数据显示在文件权限的属性中。
下面是定义标题和页脚的例子:
-- -------------------- ---- ------- ----- ---- - - ------ ----- ---- --------- --------- -------- --- -- ------- --- ------ ------- ----- ---------- -------- -------- ----------- -------- ----- -------- ----- - ------- --- -- ----- ------- ------- --- -- ----- ------ -- -------- - ---- --- ----- --- ------ --- ------- --- ------------- --- ------------- --- - --
示例代码
下面的代码演示了如何创建具有标题和页脚的 PDF:
-- -------------------- ---- ------- ----- ---------- - ---------------------- ----- ---- - - ------ ----- ---- --------- --------- -------- --- -- ------- --- ------ ------- ----- ---------- -------- -------- ----------- -------- ----- -------- ----- - ------- --- -- ----- ------- ------- --- -- ----- ------ -- -------- - ---- --- ----- --- ------ --- ------- --- ------------- --- ------------- --- - -- ------------------------------------ -- - -- - --- ---------------- -- ------------ -- - ------------------- ---
这样就可以创建一个包含项目,数量,价格和行总计列的表格,以及 PDF 文档的页角元素。每列的数据都具有特定的对齐方式、样式和突出表示。如果我们添加更多行或列,我们可以将其与 ReceiptPdf.generate
中的 data
对象一起传递,它将自动调整宽度和高度以适应单元格的大小。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055fdc81e8991b448dd793