npm 包 html-dom-to-pdf 使用教程

阅读时长 6 分钟读完

什么是 html-dom-to-pdf?

html-dom-to-pdf 是一个可以将 HTML 页面转换成 PDF 文件的 npm 包。它可以将一个页面的所有 DOM 元素渲染成一个 PDF 文件,从而方便开发者将页面保存为 PDF 文件、进行打印等操作。

安装 html-dom-to-pdf

使用 html-dom-to-pdf,我们需要在项目中安装它。使用以下命令可以在项目中安装 html-dom-to-pdf 包:

使用 html-dom-to-pdf

使用 html-dom-to-pdf 需要了解以下参数:

  • input: 需要转为 PDF 的 HTML/DOM 元素。(注意,非字符串)
  • opts: 配置对象,如纸张大小,边距等等。
  • callback: 回调函数,包含从 input 生成的 pdf 二进制数据。

这里我们假设要将 index.html 页面保存成 pdf 文件。

-- -------------------- ---- -------
----- -- - --------------
----- - ----- - - -----------------
----- --------- - ---------------------------

--------------------------- ----- ----- -- -
    -- ----- ----- ----
    ----- --- - --- -----------------------
    ----- -------- - ------------------------------------
    ----- ------- - -
        ---------- ------
        ------- ---------
        ------- -
            ---- -------
            ------ -------
            ------- -------
            ----- ------
        -
    --
    ------------------- -------- ----- ---- -- -
        -- ----- ----- ----
        -------------------------------- -----
        ---------------- --------- ----------------
    ---
---

上面的代码中,我们通过 fs 模块读取了我们要保存成 PDF 的 HTML 文件,使用 JSDOM 将 HTML 转为 DOM 对象,然后将 DOM 对象传递给 htmlToPdf() 方法,加入配置对象 options,最后通过回调函数 callback 将生成的 PDF 文件写入到磁盘中。需要注意的是,回调函数中的 pdf 形参是一个 Buffer 对象,需要转成文件保存到磁盘中。

参数说明

接下来我们来详细介绍一下 htmlToPdf() 方法中的参数:

  1. input: 需要转为 PDF 的 HTML/DOM 元素,也就是指我们需要转换成 PDF 的 HTML 文件或 HTML 文本。注意,input 参数必须是一个 DOM 元素节点而不是字符串。

  2. opts: 配置对象,包含如下属性:

  • landscape:是否使用横向纸张,默认为 false。
  • format:纸张大小,默认为 A4。
  • margin:页面边距,默认为 { top: '10mm', right: '10mm', bottom: '10mm', left: '10mm' }

更多示例

下面给出一个完整的 html-dom-to-pdf 示例代码。

-- -------------------- ---- -------
--------- -----
------
------
    ----- ----------------
    ------------------ ----------
-------
------
    -------- -- - -----------
    ------- -- - --------------
    ---- ------------- ------------ ----------------------- ----------------
    ---- ----------------------------------------------------------- -------------
-------
-------
-- -------------------- ---- -------
----- -- - --------------
----- - ----- - - -----------------
----- --------- - ---------------------------

--------------------------- ----- ----- -- -
    -- ----- ----- ----
    ----- --- - --- -----------------------
    ----- -------- - ------------------------------------
    ----- ------- - -
        ---------- ------
        ------- ---------
        ------- -
            ---- -------
            ------ -------
            ------- -------
            ----- ------
        -
    --
    ------------------- -------- ----- ---- -- -
        -- ----- ----- ----
        -------------------------------- -----
        ---------------- --------- ----------------
    ---
---

上面的代码中,我们通过 fs 模块读取了我们要保存成 PDF 的 HTML 文件,使用 JSDOM 将 HTML 转为 DOM 对象,然后将 DOM 对象传递给 htmlToPdf() 方法,加入配置对象 options,最后通过回调函数 callback 将生成的 PDF 文件写入到磁盘中。

结语

本篇文章介绍了如何使用 html-dom-to-pdf 包将 HTML 页面转换成 PDF 文件。希望能够对你有所帮助。在实际使用中如果遇到问题,可以阅读官方文档或者提交 Github Issue 寻求帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822c65

纠错
反馈