3 分鐘學會使用 Puppeteer 將 HTML 轉 PDF

需求背景

1、網頁存檔與文檔管理

需要將網頁內容長期保存或歸檔為PDF,確保內容不被篡改或丟失,適用于法律文檔、合同、技術文檔等場景。PDF格式便于存儲和檢索。

2、電子報告生成

動態生成的HTML內容(如數據分析報告、儀表盤)需導出為PDF供下載或打印。PDF保留排版和樣式,確保跨平臺一致性。

3、電子郵件與營銷材料

將HTML格式的新聞稿、促銷內容轉換為PDF附件發送,避免收件人因郵件客戶端差異導致樣式錯亂。

4、學術與出版用途

論文、技術文檔需從HTML轉為PDF以滿足出版要求。PDF支持高精度打印,且兼容學術平臺的提交格式。

5、合同與表單簽署

在線填寫的HTML表單(如申請表格、訂單)需轉為PDF供客戶簽署或存檔。PDF支持數字簽名和加密。

方案一、wkhtmltopdf + python

https://wkhtmltopdf.org/

wkhtmltopdf 是一個開源命令行工具,通過 WebKit 渲染引擎將 HTML 內容轉換為 PDF 文件。支持 CSS、JavaScript 和復雜的頁面布局,常用于生成報告、發票、電子文檔等場景。

不推薦,實測效果不佳,2020已停止維護。

在這里插入圖片描述

到官網下載對應操作系統的安裝包,這里是 Ubuntu24,安裝指令如下:

sudo apt-get install xfonts-75dpi
sudo dpkg -i wkhtmltox_0.12.6.1-2.jammy_amd64.deb 

在這里插入圖片描述

在這里插入圖片描述

安裝完成之后就可以使用命令轉PDF了,例如把谷歌首頁轉PDF,也可以轉本地html文件。

# 使用示例
wkhtmltopdf http://google.com google.pdf

在這里插入圖片描述

在這里插入圖片描述

方案二、Puppeteer

https://github.com/puppeteer/puppeteer

Puppeteer是一個由Google Chrome團隊開發的Node.js庫,提供高級API通過DevTools協議控制無頭(Headless)或非無頭的Chromium或Chrome瀏覽器。它常用于自動化測試、網頁抓取、生成PDF或截圖等場景。

推薦方案,效果最佳,高度還原瀏覽器打印效果

pnpm install puppeteer-core# which google-chrome
/usr/bin/google-chrome

該方案需要安裝谷歌瀏覽器,可以通過 which 指令查看已安裝的 google-chrome 路徑,使用示例如下:

// main.js
const puppeteer = require('puppeteer-core');
const fs = require('fs');
const path = require('path');// 自動檢測 Chrome 安裝路徑(支持 Linux/Windows)
const CHROME_PATHS = ['/usr/bin/google-chrome',      // Debian/Ubuntu 默認路徑'/opt/google/chrome/chrome',   // 二進制實際位置'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe'
];(async () => {try {// 自動查找可用瀏覽器路徑const executablePath = CHROME_PATHS.find(p => fs.existsSync(p));if (!executablePath) throw new Error('未找到 Chrome 瀏覽器');const browser = await puppeteer.launch({headless: 'new',          // 啟用新一代無頭模式executablePath,args: ['--no-sandbox','--disable-setuid-sandbox','--disable-dev-shm-usage','--font-render-hinting=medium' // 提升中文字體渲染質量]});const page = await browser.newPage();

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/83116.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/83116.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/83116.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

電子郵箱設置SSL:構建郵件傳輸的加密護城河

在數字化通信高度依賴的今天,電子郵件作為企業協作與個人隱私的核心載體,其安全性直接關系到數據主權與商業利益。SSL(Secure Sockets Layer)作為網絡通信加密的基石技術,通過為郵件傳輸建立加密隧道,有效抵…

Qt -使用OpenCV得到SDF

博客主頁:【夜泉_ly】 本文專欄:【暫無】 歡迎點贊👍收藏?關注?? 目錄 cv::MatdistanceTransform獲得SDF 本文的目標, 是簡單學習并使用OpenCV的相關函數, 并獲得QImage的SDF(Signed Distance Field 有向距離場) 至…

Compose仿微信底部導航欄NavigationBar :底部導航控制滑動并移動

文章目錄 1、準備工作1.1 參考1.2 依賴添加:1.3 主要控件NavigationBarHorizontalPager、VerticalPager 2、功能描述:3、實現過程3.1 創建一個數據類3.2 創建一個list變量3.3 具體實現3.3.1 創建共享的Pager狀態3.3.2 將頁面索引與頁面標題同步3.3.3 創建…

WindowServer2022下docker方式安裝dify步驟

WindowServer2022下docker方式安裝dify步驟(穩定后考慮部署至linux中) 教程:https://blog.csdn.net/qq_49035156/article/details/143264534 0、資源要求 ---windows:8核CPU、16G內存、200G500G存儲 ---10.21.31.122/administra…

【數據治理】要點整理-信息技術數據質量評價指標-GB/T36344-2018

導讀:指標為數據質量評估提供了一套系統化、標準化的框架,涵蓋規范性、完整性、準確性、一致性、時效性、可訪問性六大核心指標,助力組織提升數據處理效率、支持決策制定及業務流程優化,確保數據在數據生存周期各階段的質量可控。…

前端實現圖片壓縮:基于 HTML5 File API 與 Canvas 的完整方案

在 Web 開發中,處理用戶上傳的圖片時,前端壓縮可以有效減少服務器壓力并提升上傳效率。本文將詳細講解如何通過<input type="file">實現圖片上傳,結合 Canvas 實現圖片壓縮,并實時展示壓縮前后的圖片預覽和文件大小對比。 一、核心功能架構 我們將實現以…

通信算法之280:無人機偵測模塊知識框架思維導圖

1. 無人機偵測模塊知識框架思維導圖, 見文末章節。 2. OFDM參數估計,基于循環自相關特性。 3. 無人機其它參數估計

單片機寄存器的四種主要類型!

1. 控制寄存器&#xff08;Control Registers&#xff09;?? ??專業定義??&#xff1a;用于配置硬件行為或觸發操作的寄存器。 ??大白話??&#xff1a; 相當于設備的??“控制面板”??&#xff0c;通過寫入特定值來??開關功能??或??調整參數??。例如&am…

第100+41步 ChatGPT學習:R語言實現誤判病例分析

本期是《第33步 機器學習分類實戰&#xff1a;誤判病例分析》的R版本。 嘗試使用Deepseek-R1來試試寫代碼&#xff0c;效果還不錯。 下面上R語言代碼&#xff0c;以Xgboost為例&#xff1a; # 加載必要的庫 library(caret) library(pROC) library(ggplot2) library(xgboost)…

HTML Day04

Day04 0.引言1. HTML字符實體2. HTML表單2.1 表單標簽2.2 表單示例 3. HTML框架4. HTML顏色4.1 16進制表示法4.2 rgba表示法4.3 名稱表達法 5. HTML腳本 0.引言 剛剛回顧了前面幾篇博客&#xff0c;感覺寫的內容倒是很詳細&#xff0c;每個知識點都做了說明。但是感覺在知識組織…

comfyui 工作流中 視頻長度和哪些參數有關? 生成15秒的視頻,再加上RTX4060 8G顯卡,嘗試一下

想再消費級顯卡上生成15秒長視頻&#xff0c;還是比較慢的&#xff0c;不過動漫的畫質要求比較低 在ComfyUI中生成15秒視頻需綜合考慮視頻參數配置、模型選擇和硬件優化&#xff0c;尤其針對RTX 4060 8G顯存的限制。 ?? 一、影響視頻長度的核心參數 總幀數&#xff08;video_…

Netty 實戰篇:構建高性能聊天服務器

在前兩篇文章中&#xff0c;我們深入探討了 Netty 的 IO 模型以及其核心組件的工作原理。本篇文章將通過一個實際的聊天服務器示例&#xff0c;展示如何使用 Netty 構建高性能的網絡應用。 一、項目結構 項目主要包含以下幾個部分&#xff1a; ChatServer&#xff1a;服務器啟…

智紳科技——科技賦能健康養老,構建智慧晚年新生態

當老齡化浪潮與數字技術深度碰撞&#xff0c;智紳科技以 “科技賦能健康&#xff0c;智慧守護晚年” 為核心理念&#xff0c;錨定數字健康與養老服務賽道&#xff0c;通過人工智能、物聯網、大數據等技術集成&#xff0c;為亞健康群體與中老年人群構建 “監測 - 預防 - 輔助 - …

Tkinter軟件——顯示txt標簽的目標水平邊框圖像

代碼&#xff1a; import tkinter as tk from tkinter import filedialog from tkinter import messagebox import cv2 from PIL import Image, ImageTk import osclass ImageBoxApp:def __init__(self, master):self.master masterself.master.title("Image Box Drawer…

Linux 文件覆蓋機制與實踐:以 mv 命令為切入點

引言&#xff1a;文件覆蓋的本質 文件覆蓋是 Linux 文件系統中常見的操作&#xff0c;指的是在目標路徑已存在文件的情況下&#xff0c;將源文件的內容寫入目標文件&#xff0c;導致目標文件的原有內容被替換。在 Linux 中&#xff0c;文件覆蓋通常通過命令行工具&#xff08;…

學習路之PHP--easyswoole操作數據庫

學習路之PHP--easyswoole操作數據庫 0、安裝orm插件一、創建數據庫二、創建模型三、控制器顯示四、效果五、問題 0、安裝orm插件 composer require easyswoole/orm一、創建數據庫 表&#xff1a; CREATE TABLE cases (id int(11) NOT NULL AUTO_INCREMENT COMMENT 主鍵,titl…

手寫multi-head Self-Attention,各個算子詳細注釋版

文章目錄 MultiHeadAttentionFormal的實現操作詳解1. &#x1f50d; attention_mask2. &#x1f50d; matmul? 其他實現方式1. 使用 運算符&#xff08;推薦簡潔寫法&#xff09;2. 使用 torch.einsum()&#xff08;愛因斯坦求和約定&#xff09;3. 使用 torch.bmm()&#xf…

尚硅谷redis7 41-46 redis持久化之AOF異常恢復演示

AOF每一秒鐘寫入一次。當內容才寫了一小半,沒有寫完整時&#xff0c;突然,redis掛了,導致aof文件錯誤。 故意亂寫正常的AOF文件,模擬網絡閃斷文件寫error 重啟 Redis 之后就會進行AOF文件的載入,發現啟動都失敗 首先cd /usr/local/bin 異常修復命令:redis-check-aof -- fix 進…

004時裝購物系統技術解析:構建智能時尚消費平臺

時裝購物系統技術解析&#xff1a;構建智能時尚消費平臺 在電商行業蓬勃發展的當下&#xff0c;時裝購物系統憑借其便捷性與多樣性&#xff0c;成為消費者選購時尚單品的重要渠道。該系統通過商品信息、訂單管理等核心模塊&#xff0c;結合前臺展示與后臺錄入功能&#xff0c;…

數據湖 (特點+與數據倉庫和數據沼澤的對比講解)

數據湖就像一個“數據水庫”&#xff0c;把企業所有原始數據&#xff08;結構化的表格、半結構化的日志、非結構化的圖片/視頻&#xff09;原樣存儲&#xff0c;供后續按需分析。 對比傳統數據倉庫&#xff1a; 數據倉庫數據湖數據清洗后的結構化數據&#xff08;如Excel表格&…