React 应用中将大尺寸 Base64 编码图片转换为 PDF 的实践指南

npm install pdf-lib
# 或者
yarn add pdf-lib

import { PDFDocument } from "pdf-lib";

import { PDFDocument } from "pdf-lib";

/**
 * 将 Base64 编码的图片转换为 PDF 并触发下载。
 * @param {string} base64ImageString Base64 编码的图片字符串。
 */
export const makeDownloadToPDF = async (base64ImageString) => {
    try {
        // 1. 解码 Base64 字符串为二进制数据
        // window.atob() 将 Base64 字符串解码为二进制字符串
        const binaryString = window.atob(base64ImageString);

        // 2. 将二进制字符串转换为 Uint8Array
        // Uint8Array 是处理二进制数据的标准方式，用于表示原始字节数据
        const imageBytes = Uint8Array.from([...binaryString].map((char) => char.charCodeAt(0)));

        // 3. 创建一个新的 PDF 文档
        const pdfDoc = await PDFDocument.create();

        // 4. 嵌入图片到 PDF 文档
        // pdf-lib 支持多种图片格式，这里以 PNG 为例，如果图片是 JPG，应使用 embedJpg
        const image = await pdfDoc.embedPng(imageBytes);

        // 5. 添加一个新页面，并设置页面尺寸为图片尺寸
        // 确保图片在页面上不会被裁剪或拉伸
        const page = pdfDoc.addPage([image.width, image.height]);

        // 6. 将图片绘制到页面上
        // x, y 坐标通常设置为 0, 0 以便图片从页面左下角开始填充
        page.drawImage(image, {
            x: 0,
            y: 0,
            width: image.width,
            height: image.height,
        });

        // 7. 保存 PDF 文档为字节数组
        const pdfBytes = await pdfDoc.save();

        // 8. 创建一个 Blob 对象，类型为 'application/pdf'
        const pdfBlob = new Blob([pdfBytes], { type: 'application/pdf' });

        // 9. 创建一个下载链接并模拟点击
        const downloadLink = document.createElement('a');
        downloadLink.href = URL.createObjectURL(pdfBlob);
        downloadLink.download = 'converted_image.pdf'; // 设置下载文件名

        // 将链接添加到 DOM 并触发点击
        document.body.appendChild(downloadLink);
        downloadLink.click();

        // 10. 清理资源
        // 释放 Blob URL 占用的内存，并移除下载链接
        URL.revokeObjectURL(downloadLink.href);
        document.body.removeChild(downloadLink);

    } catch (error) {
        console.error('Error converting image to PDF:', error);
        // 在实际应用中，您可能需要向用户显示错误消息
        alert('转换图片到 PDF 失败，请稍后再试。');
    }
};

import React from 'react';
import { makeDownloadToPDF } from './pdfConverter'; // 假设函数保存在 pdfConverter.js

const MyComponent = ({ base64Data }) => {
    const handleConvertClick = () => {
        if (base64Data) {
            // 确保 base64Data 是一个有效的 Base64 编码图片字符串
            // 例如：不带 "data:image/png;base64," 前缀的纯 Base64 数据
            makeDownloadToPDF(base64Data);
        } else {
            alert('请提供 Base64 图片数据！');
        }
    };

    return (
        <div>
            <button onClick={handleConvertClick}>
                下载图片为 PDF
            </button>
        </div>
    );
};

export default MyComponent;