# puppeteer_htmlToPdf

**Repository Path**: jseven68/puppeteer_html-to-pdf

## Basic Information

- **Project Name**: puppeteer_htmlToPdf
- **Description**: node.js使用puppeteer生成pdf 服务端中间件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-09-20
- **Last Updated**: 2025-05-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: puppeteer, Nodejs, Koa

## README

## 本地运行

需要把 `utils/puppeteer.js/launchBrowser` 里的 `executablePath` 注释，使用默认的 chrome 内核

然后执行命令：

> > > npm run start

### 前端调用例子

```js
// /api/pdf/export 接口，url必填
const exportPdfByNode = () => {
  isOuting.value = true;
  axios
    .get("http://localhost:3002/api/pdf/export", {
      params: {
        url: encodeURIComponent(
          "http://192.168.89.220:3000/#/pdfLayout/htmlToPdf"
        ),
      },
      responseType: "blob",
    })
    .then((res) => {
      const blob = new Blob([res.data], { type: "application/pdf" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "test.pdf";
      a.click();
      URL.revokeObjectURL(url);
      isOuting.value = false;
    });
};

/**
 *  /api/generatePDF 接口
 *
 * @param {Object} pageInfo 页面地址--封面，内容，尾页
 * @param {Object} pageTemplate 页眉页脚参数
 * @param {Object} pageStyle 页边距参数
 * @param {Object} pageCache 缓存参数
 *
 *  * * 页眉页脚
 * 需要注意的点：
 *    1. 所有内容都需要放在模版字符串中，不能从外部引入，比如 CSS、图片，可以看到 img 的 src 值是 base64 之后的内容
 *    2. 页眉天生会有 20px 的上边距，需要处理掉。如果不知道的话，会发现无法很难做到垂直居中，甚至看到页眉页脚空白
 *    3. 页脚天生会有 18px 的下边距，需要处理掉
 *
 */

const exportPdfByNode2 = () => {
  isOuting.value = true;
  axios
    .post(
      "http://localhost:3002/api/generatePDF",
      {
        pageInfo: {
          // 页面地址--封面，内容，尾页
          coverUrl: encodeURIComponent(
            "http://192.168.89.220:3000/#/pdfLayout/htmlToPdf?type=cover"
          ),
          contentUrl: encodeURIComponent(
            "http://192.168.89.220:3000/#/pdfLayout/htmlToPdf?type=content"
          ),
          lastPageUrl: encodeURIComponent(
            "http://192.168.89.220:3000/#/pdfLayout/htmlToPdf?type=lastPage"
          ),
        },
        pageTemplate: {
          // 页眉页脚参数，需要一个模板字符串
          headerTemplate: `<div style="box-sizing: border-box; width: 100%; height: 40px; font-size:18px; text-align: right; margin-right: 40px; margin-top: -20px; display: flex; color: #666666;justify-content: flex-end; align-items: center;">页眉</div>`,
          footerTemplate: `<div style="box-sizing: border-box; width: 100%; height: 40px; display: flex; justify-content: space-between; align-items: center; margin-bottom: -18px; padding: 0 40px; font-family: PingFangSC-Regular; font-size: 12px;"><div style="color: #fafafa;">测试页脚</div>
    <div style="display: flex; justify-content: space-between; align-items: center; width: 70px; color: #666666;">
      <div><span>共</span> <span class="totalPages"></span> <span>页</span></div>
      <div class="pageNumber" style="font-family: PingFangSC-Semibold; font-weight: bold; color: #BFBFBF;"></div>
    </div>
  </div>`,
          isHasTemplate: true, // 是否开启页眉页脚
        },
        pageStyle: {
          // 注意页眉页脚默认占据的高度
          marginTop: 60,
          marginBottom: 60,
          marginLeft: 40,
          marginRight: 40,
        },
        pageCache: {
          // 缓存参数  key-value形式
          ASSISTANT_LOGIN_INFO: {
            accessToken: "xxx",
          },
        },
      },
      { responseType: "blob" }
    )
    .then((res) => {
      const blob = new Blob([res.data], { type: "application/pdf" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "test.pdf";
      a.click();
      URL.revokeObjectURL(url);
      isOuting.value = false;
    });
};
```