为何从ArrayBuffer创建的Uint8Array为空？pdf-lib字体加载问题

你的核心问题出在字体加载环节：response.arrayBuffer()是异步方法，返回的是Promise对象而非直接的ArrayBuffer。你直接把这个Promise传给Uint8Array构造函数，相当于用非ArrayBuffer的对象创建Uint8Array，自然会得到空结果。

利用你已经在async函数中的优势，用await替代链式then，代码更易读且能正确处理异步操作：

var request = new XMLHttpRequest();

request.open("GET", "./resources/skill_positioning.json", false);
request.send(null)
const positionData = JSON.parse(request.responseText);

async function createPdf() {
    var fontkit = window.fontkit;
    var pdflib = window.PDFLib;
    const url = './resources/character_sheet_blank.pdf';
    const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer());

    const pdfDoc = await pdflib.PDFDocument.load(existingPdfBytes)
    pdfDoc.registerFontkit(fontkit);

    // 修正字体加载逻辑：用await获取实际的ArrayBuffer
    const fontResponse = await fetch('./resources/fonts/arialnb.ttf');
    const fontArrayBuffer = await fontResponse.arrayBuffer();
    const fontUint8Array = new Uint8Array(fontArrayBuffer);
    
    const font = fontkit.create(fontUint8Array);
    const customFont = await pdfDoc.embedFont(font);

    // 后续绘制逻辑
    const pages = pdfDoc.getPages()
    const firstPage = pages[0]
    const { width, height } = firstPage.getSize()

    var curRow = 1;
    var curCollumn = 0;
    firstPage.drawText('This text was added with JavaScript!', {
        x: positionData.boxes[0].x,
        y: height - (positionData.boxes[0].y + curRow * positionData.row_height),
        size: 110,
        font: customFont,
        color: pdflib.rgb(0.0, 0.0, 0.0),
    })

    const pdfBytes = await pdfDoc.save(); // save()为异步方法，需await
    download(pdfBytes, "character_sheet.pdf");
}

• 用await等待response.arrayBuffer()执行完成，拿到实际的ArrayBuffer后再创建Uint8Array
• 将链式then拆为同步风格的await代码，避免异步嵌套导致的逻辑错误
• 注意pdfDoc.save()是异步方法，必须加await确保拿到完整的PDF字节数据

内容的提问来源于stack exchange，提问作者skelyvelocirap