https://github.com/bubao/puppeteer-html2pdf-generator

服务器端的 html 生成 pdf
https://github.com/bubao/puppeteer-html2pdf-generator

html pdf pdf-generation puppeteer

Last synced: 7 days ago
JSON representation

服务器端的 html 生成 pdf

• Host: GitHub
• URL: https://github.com/bubao/puppeteer-html2pdf-generator
• Owner: bubao
• Created: 2024-10-09T03:54:33.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2024-10-16T06:58:19.000Z (4 months ago)
• Last Synced: 2024-12-08T14:42:28.240Z (2 months ago)
• Topics: html, pdf, pdf-generation, puppeteer
• Language: JavaScript
• Homepage:
• Size: 58.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 服务器端的 html 生成 pdf

在服务端实现 html 生成 pdf，基于 puppeteer。

## 运行

运行之前，需要将需要生成 pdf 的项目放在`pdf`文件夹下，这里新建一个名为`test`的项目，并且新建`pdf/test/index.html`文件

```html

	

	

	

	A4 Size Form with URL Params

	

		@page {

			size: A4;

			margin: 20mm;

		}

		body {

			font-family: Arial, sans-serif;

			margin: 0;

			padding: 0;

		}

		.container {

			width: 210mm;

			height: 297mm;

			margin: 0 auto;

			padding: 20mm;

			box-sizing: border-box;

			border: 1px solid #000;

		}

		h1 {

			text-align: center;

			margin-bottom: 20px;

		}

		form {

			display: flex;

			flex-direction: column;

		}

		label {

			margin-top: 10px;

		}

		input,

		select,

		textarea {

			width: 100%;

			padding: 8px;

			margin-top: 5px;

			border: 1px solid #ccc;

			border-radius: 4px;

			box-sizing: border-box;

		}

		button {

			margin-top: 20px;

			padding: 10px;

			background-color: #4CAF50;

			color: white;

			border: none;

			border-radius: 4px;

			cursor: pointer;

		}

		button:hover {

			background-color: #45a049;

		}

	

	


		
A4 Size Form with URL Params

		

			Name:

			


			Email:

			

			Date of Birth:

			

			Gender:

			

				Male

				Female

				Other

			

			Comments:

			

			Submit

		

	


	

		// 函数从 URL 中获取参数

		function getUrlParams() {

			const params = new URLSearchParams(window.location.search);

			return {

				name: params.get('name'),

				email: params.get('email'),

				dob: params.get('dob'),

				gender: params.get('gender'),

				comments: params.get('comments'),

			};

		}

		// 自动回填表单数据

		function fillForm() {

			const params = getUrlParams();

			if (params.name) document.getElementById('name').value = params.name;

			if (params.email) document.getElementById('email').value = params.email;

			if (params.dob) document.getElementById('dob').value = params.dob;

			if (params.gender) document.getElementById('gender').value = params.gender;

			if (params.comments) document.getElementById('comments').value = params.comments;

		}

		// 当页面加载时调用 fillForm 函数

		window.onload = fillForm;

	

```

安装依赖：

```shell

nvm use 22

npm ci

```

浏览器请求：

```url

http://localhost:3000/test/dl.pdf?name=John+Doe&[email protected]&dob=1990-01-01&gender=male&comments=Hello+world

```