{"id":17514073,"url":"https://github.com/bubao/puppeteer-html2pdf-generator","last_synced_at":"2026-05-01T10:31:24.052Z","repository":{"id":258206956,"uuid":"869879335","full_name":"bubao/puppeteer-html2pdf-generator","owner":"bubao","description":"服务器端的 html 生成 pdf","archived":false,"fork":false,"pushed_at":"2024-10-16T06:58:19.000Z","size":60,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T22:31:49.194Z","etag":null,"topics":["html","pdf","pdf-generation","puppeteer"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bubao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-09T03:54:33.000Z","updated_at":"2024-10-16T06:58:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"ce2ad083-de6e-4d6e-b01e-ac18a092fdd7","html_url":"https://github.com/bubao/puppeteer-html2pdf-generator","commit_stats":{"total_commits":4,"total_committers":1,"mean_commits":4.0,"dds":0.0,"last_synced_commit":"b5981249893c7d28cdb35e33385dd41924045051"},"previous_names":["bubao/puppeteer-html2pdf-generator"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bubao/puppeteer-html2pdf-generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bubao%2Fpuppeteer-html2pdf-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bubao%2Fpuppeteer-html2pdf-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bubao%2Fpuppeteer-html2pdf-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bubao%2Fpuppeteer-html2pdf-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bubao","download_url":"https://codeload.github.com/bubao/puppeteer-html2pdf-generator/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bubao%2Fpuppeteer-html2pdf-generator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32494270,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","pdf","pdf-generation","puppeteer"],"created_at":"2024-10-20T07:07:45.435Z","updated_at":"2026-05-01T10:31:24.026Z","avatar_url":"https://github.com/bubao.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 服务器端的 html 生成 pdf\n\n在服务端实现 html 生成 pdf，基于 puppeteer。\n\n## 运行\n\n运行之前，需要将需要生成 pdf 的项目放在`pdf`文件夹下，这里新建一个名为`test`的项目，并且新建`pdf/test/index.html`文件\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n\t\u003cmeta charset=\"UTF-8\"\u003e\n\t\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n\t\u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n\t\u003ctitle\u003eA4 Size Form with URL Params\u003c/title\u003e\n\t\u003cstyle\u003e\n\t\t@page {\n\t\t\tsize: A4;\n\t\t\tmargin: 20mm;\n\t\t}\n\n\t\tbody {\n\t\t\tfont-family: Arial, sans-serif;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t}\n\n\t\t.container {\n\t\t\twidth: 210mm;\n\t\t\theight: 297mm;\n\t\t\tmargin: 0 auto;\n\t\t\tpadding: 20mm;\n\t\t\tbox-sizing: border-box;\n\t\t\tborder: 1px solid #000;\n\t\t}\n\n\t\th1 {\n\t\t\ttext-align: center;\n\t\t\tmargin-bottom: 20px;\n\t\t}\n\n\t\tform {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\n\t\tlabel {\n\t\t\tmargin-top: 10px;\n\t\t}\n\n\t\tinput,\n\t\tselect,\n\t\ttextarea {\n\t\t\twidth: 100%;\n\t\t\tpadding: 8px;\n\t\t\tmargin-top: 5px;\n\t\t\tborder: 1px solid #ccc;\n\t\t\tborder-radius: 4px;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\tbutton {\n\t\t\tmargin-top: 20px;\n\t\t\tpadding: 10px;\n\t\t\tbackground-color: #4CAF50;\n\t\t\tcolor: white;\n\t\t\tborder: none;\n\t\t\tborder-radius: 4px;\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\tbutton:hover {\n\t\t\tbackground-color: #45a049;\n\t\t}\n\t\u003c/style\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n\t\u003cdiv class=\"container\"\u003e\n\t\t\u003ch1\u003eA4 Size Form with URL Params\u003c/h1\u003e\n\t\t\u003cform action=\"#\" method=\"get\"\u003e\n\t\t\t\u003clabel for=\"name\"\u003eName:\u003c/label\u003e\n\t\t\t\u003cinput type=\"text\" id=\"name\" name=\"name\" placeholder=\"Enter your name\"\u003e\n\n\t\t\t\u003clabel for=\"email\"\u003eEmail:\u003c/label\u003e\n\t\t\t\u003cinput type=\"email\" id=\"email\" name=\"email\" placeholder=\"Enter your email\"\u003e\n\n\t\t\t\u003clabel for=\"dob\"\u003eDate of Birth:\u003c/label\u003e\n\t\t\t\u003cinput type=\"date\" id=\"dob\" name=\"dob\"\u003e\n\n\t\t\t\u003clabel for=\"gender\"\u003eGender:\u003c/label\u003e\n\t\t\t\u003cselect id=\"gender\" name=\"gender\"\u003e\n\t\t\t\t\u003coption value=\"male\"\u003eMale\u003c/option\u003e\n\t\t\t\t\u003coption value=\"female\"\u003eFemale\u003c/option\u003e\n\t\t\t\t\u003coption value=\"other\"\u003eOther\u003c/option\u003e\n\t\t\t\u003c/select\u003e\n\n\t\t\t\u003clabel for=\"comments\"\u003eComments:\u003c/label\u003e\n\t\t\t\u003ctextarea id=\"comments\" name=\"comments\" rows=\"4\" placeholder=\"Enter your comments\"\u003e\u003c/textarea\u003e\n\n\t\t\t\u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n\t\t\u003c/form\u003e\n\t\u003c/div\u003e\n\n\t\u003cscript\u003e\n\t\t// 函数从 URL 中获取参数\n\t\tfunction getUrlParams() {\n\t\t\tconst params = new URLSearchParams(window.location.search);\n\t\t\treturn {\n\t\t\t\tname: params.get('name'),\n\t\t\t\temail: params.get('email'),\n\t\t\t\tdob: params.get('dob'),\n\t\t\t\tgender: params.get('gender'),\n\t\t\t\tcomments: params.get('comments'),\n\t\t\t};\n\t\t}\n\n\t\t// 自动回填表单数据\n\t\tfunction fillForm() {\n\t\t\tconst params = getUrlParams();\n\t\t\tif (params.name) document.getElementById('name').value = params.name;\n\t\t\tif (params.email) document.getElementById('email').value = params.email;\n\t\t\tif (params.dob) document.getElementById('dob').value = params.dob;\n\t\t\tif (params.gender) document.getElementById('gender').value = params.gender;\n\t\t\tif (params.comments) document.getElementById('comments').value = params.comments;\n\t\t}\n\n\t\t// 当页面加载时调用 fillForm 函数\n\t\twindow.onload = fillForm;\n\t\u003c/script\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n安装依赖：\n\n```shell\nnvm use 22\nnpm ci\n```\n\n浏览器请求：\n\n```url\nhttp://localhost:3000/test/dl.pdf?name=John+Doe\u0026email=johndoe@example.com\u0026dob=1990-01-01\u0026gender=male\u0026comments=Hello+world\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbubao%2Fpuppeteer-html2pdf-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbubao%2Fpuppeteer-html2pdf-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbubao%2Fpuppeteer-html2pdf-generator/lists"}