React中高效将Base64字符串转换为PDF的教程

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

import { PDFDocument, rgb, StandardFonts } from "pdf-lib";

/**
 * 将Base64编码的图像数据转换为PDF并触发下载。
 * @param {string} b64 Base64编码的图像字符串。
 * @param {number} [height] 图像在PDF中的高度（可选，默认为图像原始高度）。
 * @param {number} [width] 图像在PDF中的宽度（可选，默认为图像原始宽度）。
 */
export const makeDownloadToPDF = async (b64, height, width) => {
    try {
        // 1. 解码Base64字符串为二进制数据
        // window.atob() 将 Base64 字符串解码为二进制字符串
        const binaryString = window.atob(b64);
        // 将二进制字符串转换为 Uint8Array，这是 pdf-lib 嵌入图像所需的格式
        const imageBytes = Uint8Array.from([...binaryString].map((char) => char.charCodeAt(0)));

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

        // 3. 嵌入图像到PDF文档
        // pdf-lib 提供了 embedPng, embedJpg 等方法来嵌入不同格式的图像
        const image = await pdfDoc.embedPng(imageBytes); // 假设是PNG格式，如果是JPG则使用embedJpg

        // 4. 添加页面并绘制图像
        // 创建一个新页面，页面尺寸可以根据图像的原始尺寸设置，或者自定义
        const page = pdfDoc.addPage([image.width, image.height]); // 页面尺寸与图像尺寸一致
        // 在页面上绘制图像
        page.drawImage(image, {
            x: 0, // 图像的x坐标
            y: 0, // 图像的y坐标
            width: width || image.width, // 图像宽度，可自定义或使用原始宽度
            height: height || image.height, // 图像高度，可自定义或使用原始高度
        });

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

        // 6. 创建Blob对象
        const pdfBlob = new Blob([pdfBytes], { type: 'application/pdf' });

        // 7. 创建下载链接并触发下载
        const downloadLink = document.createElement('a');
        downloadLink.href = URL.createObjectURL(pdfBlob);
        downloadLink.download = 'converted.pdf'; // 设置下载文件名

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

        // 8. 清理资源
        // 释放URL对象，避免内存泄漏
        URL.revokeObjectURL(downloadLink.href);
        // 从DOM中移除下载链接
        document.body.removeChild(downloadLink);

    } catch (error) {
        console.error('Error converting image to PDF:', error);
        // 可以添加用户友好的错误提示
        alert('转换PDF失败，请稍后再试或联系管理员。');
    }
};