如何将html转化为pdf

html转换为pdf

1. html2pdf.js库，
   基于html2canvas和jspdf，只能打印2-3页pdf，比较慢，分页会截断
2. html2canvas
   只能打印2-3页pdf，比较慢，分页会截断 // canvas
3. Dom-to-image
   不支持某些css属性
4. Pdfmake html-to-pdfmake配合使用
   比较不错的库，有一些兼容性问题
5. wkhtmltopdf
   比较不错的库，基于webkit，支持性好，分页需要特殊处理，服务器需要安装wkhtmltopdf环境，但是转换之后会存在图表加载偏离，分页不均匀的问题
6. node+puppeteer（无头浏览器） // 直接打印
   比较不错的解决方案，是和直接鼠标右键打印另存为pdf是一个效果，但是会出现排版问题
   目前还没有找到好的解决方案

示例代码

wkhtmltopdf

首先在这里下载wkhtmltopdf，并且要记住文件的下载位置，下面时python的代码示例：

import pdfkit
import osdef html2pdf():folder_path = "report_output"# 获取文件夹中的文件名file_names = os.listdir(folder_path)# 存储文件名的列表file_list = []# 遍历文件名for file_name in file_names:# 检查文件名是否以 .html 结尾if file_name.endswith(".html"):# 将 .html 后缀替换为 .pdfpdf_file_name = file_name[:-5] + ".pdf"path_wkthmltopdf = r'C:\\Program Files\\wkhtmltopdf\\bin\\wkhtmltopdf.exe'config = pdfkit.configuration(wkhtmltopdf=path_wkthmltopdf)input_html = f"./report_output/{file_name}"  # 替换为你的 HTML 文件路径# 替换为你要保存的 PDF 文件路径output_pdf = f"./report_output_pdf/{pdf_file_name}"# 将 HTML 打印为 PDFpdfkit.from_file(input_html, output_pdf, configuration=config)file_list.append(pdf_file_name)print(f"{pdf_file_name}！", f" 这是第{len(file_list)}个报告")if __name__ == "__main__":# 运行将本地 HTML 文件转换为 PDF 的函数html2pdf()

使用 puppeteer 进行html到pdf的转换

因为puppeteer是nodejs的一个库
要使用 Puppeteer 将当前页面转换为 PDF 文件，你可以按照以下步骤进行操作：

首先，确保你已经安装了 Puppeteer。你可以使用 npm 进行安装：

npm install puppeteer

在 JavaScript 文件中，引入 Puppeteer 并创建一个异步函数来处理 PDF 转换逻辑。以下是一个示例代码：

const puppeteer = require('puppeteer');async function convertPageToPDF() {// 启动 Puppeteerconst browser = await puppeteer.launch();// 创建一个新的页面const page = await browser.newPage();// 导航到指定的页面await page.goto('https://example.com');// 等待页面加载完成await page.waitForLoadState('networkidle0');// 将页面保存为 PDF 文件await page.pdf({ path: 'page.pdf', format: 'A4' });// 关闭浏览器await browser.close();console.log('PDF 文件已生成');
}

// 调用函数进行 PDF 转换

convertPageToPDF();

在上面的示例中，我们使用 puppeteer.launch() 启动了一个 Puppeteer 浏览器实例，然后通过 browser.newPage() 创建了一个新的页面。接下来，使用 page.goto() 导航到指定的页面，并使用 page.waitForLoadState() 等待页面加载完成。

一旦页面加载完成，我们使用 page.pdf() 将页面保存为 PDF 文件。在这个方法中，你可以指定保存的文件路径（path）和 PDF 的格式（format）。在示例中，我们将 PDF 格式设置为 A4。