在React中将Base64图像转换为PDF：使用pdf-lib库的专业指南

const convertToPdfDirectly = (b64) => {
    try {
        const byteCharacters = window.atob(b64);
        const byteArrays = [];

        // 分块处理，避免内存溢出，但核心问题依然存在
        for (let offset = 0; offset < byteCharacters.length; offset += 512) {
            const slice = byteCharacters.slice(offset, offset + 512);
            const byteNumbers = new Array(slice.length);
            for (let i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }
            byteArrays.push(new Uint8Array(byteNumbers));
        }

        const pdfFile = new Blob(byteArrays, { type: 'application/pdf' });
        const pdfUrl = URL.createObjectURL(pdfFile);

        const downloadLink = document.createElement('a');
        downloadLink.href = pdfUrl;
        downloadLink.download = 'converted_failed.pdf';
        document.body.appendChild(downloadLink);
        downloadLink.click();
        URL.revokeObjectURL(pdfUrl);
        document.body.removeChild(downloadLink);
    } catch (error) {
        console.error("直接转换PDF失败:", error);
    }
};

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

import { PDFDocument } from "pdf-lib";

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

        // 2. 将二进制字符串转换为Uint8Array，这是pdf-lib嵌入图像所需的格式
        // 注意：这里假设b64是PNG图像。如果可能是JPEG，需要相应地使用pdfDoc.embedJpg()
        const imageBytes = Uint8Array.from([...binaryString].map((char) => char.charCodeAt(0)));

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

        // 4. 嵌入图像到PDF文档中
        // pdf-lib会自动识别图像类型（PNG/JPEG），并返回一个可绘制的图像对象
        const image = await pdfDoc.embedPng(imageBytes); // 如果是JPEG，请使用 embedJpg(imageBytes)

        // 5. 添加一个新页面，并设置页面尺寸与图像尺寸一致
        const page = pdfDoc.addPage([image.width, image.height]);

        // 6. 将图像绘制到页面上
        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');
        const pdfUrl = URL.createObjectURL(pdfBlob); // 创建Blob URL
        downloadLink.href = pdfUrl;
        downloadLink.download = 'converted_image.pdf'; // 设置下载文件名

        // 10. 模拟点击下载链接
        document.body.appendChild(downloadLink); // 必须将链接添加到DOM才能点击
        downloadLink.click();

        // 11. 清理：释放Blob URL和移除下载链接
        URL.revokeObjectURL(pdfUrl);
        document.body.removeChild(downloadLink);
    } catch (error) {
        console.error('转换图像到PDF时发生错误:', error);
        // 可以根据需要添加用户友好的错误提示
    }
};

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

const MyComponent = () => {
    // 这是一个示例的Base64 PNG图像数据（非常小，仅作演示）
    // 实际应用中，b64会从API或其他来源获取
    const sampleBase64Image = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

    const handleConvertClick = () => {
        makeDownloadToPDF(sampleBase64Image);
    };

    return (
        <div>
            <h1>Base64 Image to PDF Converter</h1>
            <button onClick={handleConvertClick}>
                下载PDF（包含Base64图像）
            </button>
        </div>
    );
};

export default MyComponent;