html2pdf-image-merger
v1.1.0
Published
A library for merging multiple images into a beautiful PDF file in the browser using html2pdf.js
Maintainers
zt-kebeiReadme
html2pdf-image-merger
A library for merging multiple images into a beautiful PDF file in the browser using html2pdf.js.
Installation
npm install html2pdf-image-mergerUsage
Basic Usage
const HTML2PDF = require('html2pdf-image-merger');
const pdfMerger = new HTML2PDF();
// 添加图片
await pdfMerger.addImage(file1);
await pdfMerger.addImages([file2, file3]);
// 生成并下载 PDF
await pdfMerger.generatePDF({
filename: 'merged.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2, useCORS: true },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
});Browser Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="node_modules/html2pdf-image-merger/src/styles.css">
</head>
<body>
<input type="file" id="fileInput" accept="image/*" multiple>
<button id="generateBtn">Generate PDF</button>
<div id="pdfContent"></div>
<script type="module">
const HTML2PDF = (await import('html2pdf-image-merger')).default;
const pdfMerger = new HTML2PDF();
document.getElementById('fileInput').addEventListener('change', async (e) => {
const files = Array.from(e.target.files);
await pdfMerger.addImages(files);
});
document.getElementById('generateBtn').addEventListener('click', async () => {
const container = document.getElementById('pdfContent');
pdfMerger.renderPdfContent(container);
await pdfMerger.generatePDF({ filename: 'merged.pdf' });
});
</script>
</body>
</html>Vue Component Example
<template>
<div>
<Html2Pdf title="自定义标题" />
</div>
</template>
<script>
import Html2Pdf from 'html2pdf-image-merger/vue';
export default {
components: {
Html2Pdf
}
}
</script>
<style>
/* 引入全局样式 */
@import 'html2pdf-image-merger/styles';
/* 或者在 main.js 中引入 */
/* import 'html2pdf-image-merger/styles'; */
</style>React Component Example
import React from 'react';
import Html2Pdf from 'html2pdf-image-merger/react';
import 'html2pdf-image-merger/styles';
const App = () => {
return (
<div>
<Html2Pdf title="自定义标题" />
</div>
);
};
export default App;Next.js Component Example
// pages/html2pdf.js
import dynamic from 'next/dynamic';
import 'html2pdf-image-merger/styles';
// 动态导入，仅在客户端渲染
const Html2Pdf = dynamic(() => import('html2pdf-image-merger/react'), {
ssr: false
});
export default function Html2PdfPage() {
return (
<div>
<Html2Pdf title="多图片合成 PDF 工具" />
</div>
);
}API
Constructor
const pdfMerger = new HTML2PDF();Methods
addImage(file)
添加单张图片。
- 参数:
file(File) - 图片文件对象 - 返回: Promise - 图片的URL
addImages(files)
批量添加图片。
- 参数:
files(File[]) - 图片文件数组 - 返回: Promise<string[]> - 图片URL数组
removeImage(index)
移除指定索引的图片。
- 参数:
index(number) - 图片索引
moveImage(index, delta)
移动图片位置。
- 参数:
index(number) - 当前索引delta(number) - 移动距离（-1向上，1向下）
getImages()
获取当前图片列表。
- 返回: Array<{file: File, url: string}> - 图片列表
clearImages()
清空图片列表。
renderPdfContent(container)
渲染PDF内容到指定容器。
- 参数:
container(HTMLElement) - PDF内容容器
generatePDF(options)
生成并下载PDF。
- 参数:
options(Object) - 配置选项filename(string) - 文件名，默认: 'images.pdf'image(Object) - 图片配置，默认: { type: 'jpeg', quality: 0.98 }html2canvas(Object) - html2canvas配置，默认: { scale: 2, useCORS: true }jsPDF(Object) - jsPDF配置，默认: { unit: 'mm', format: 'a4', orientation: 'portrait' }
- 返回: Promise
generatePDFBlob(options)
生成PDF并返回Blob对象。
- 参数:
options(Object) - 配置选项（同generatePDF） - 返回: Promise - PDF的Blob对象
destroy()
销毁实例，清理资源。
Options
Image Options
type: 图片类型，支持 'jpeg', 'png' 等quality: 图片质量，0-1之间
html2canvas Options
scale: 缩放比例，默认2useCORS: 是否允许跨域图片，默认true- 更多选项请参考 html2canvas文档
jsPDF Options
unit: 单位，支持 'mm', 'cm', 'in', 'pt' 等format: 页面格式，支持 'a4', 'letter', 'legal' 等orientation: 页面方向，'portrait' 或 'landscape'- 更多选项请参考 jsPDF文档
Examples
查看 example/example.html 获取完整的浏览器示例。
Features
- ✅ 支持单张和批量图片添加
- ✅ 支持调整图片顺序
- ✅ 支持移除图片
- ✅ 可自定义PDF配置
- ✅ 生成并下载PDF
- ✅ 返回PDF Blob对象
- ✅ 自动清理资源
- ✅ 支持多种图片格式
- ✅ 响应式设计
Browser Support
- Chrome (推荐)
- Firefox
- Safari
- Edge
Notes
- 此库在客户端生成PDF，适合隐私或无需上传到服务器的场景
- 大量高分辨率图片可能会导致内存占用高或生成速度变慢
- 若需服务端合并或更复杂排版，可考虑使用其他服务端工具
License
ISC
Dependencies
- html2pdf.js - 基于
html2canvas+jsPDF
Contributing
欢迎提交Issue和Pull Request！