javascript 为什么buffer中的Uint8Array()返回空值?

vcirk6k6  于 2023-06-20  发布在  Java
关注(0)|答案(1)|浏览(315)

我正在尝试加载一个字体供pdf-lib使用。为了使用它,我必须为pdfDoc.embedFont(font);提供一个Uint 8Array。出于某种原因,每当我创建UInt 8Array时,它都返回空。ArrayBuffer返回了一些东西,所以我很困惑。我是新的JS,所以我道歉,如果这是一个愚蠢的问题。

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);

    const customFont = fetch('./resources/fonts/arialnb.ttf').then((response) => {
        const buffer = response.arrayBuffer();
        return new Uint8Array(buffer);
    }).then((buffer) => {
        return fontkit.create(buffer);
    }).then((font) => {
        return pdfDoc.embedFont(font);
    }).then((customFont) => {
        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),
        })
        return pdfDoc;
    }).then((pdfDoc) => {
        const pdfBytes = pdfDoc.save();
        download(pdfBytes, "character_sheet.pdf");
    })
}

我已经尝试在.then()之前和之后从数组缓冲区创建一个新的Uint 8Array

p4rjhz4m

p4rjhz4m1#

arrayBuffer()返回Promise。所以你应该写

fetch('./resources/fonts/arialnb.ttf').then((response) => {
    return response.arrayBuffer();
}).then((buffer) => {
    return fontkit.create(buffer);
})

将fetch调用的结果分配给const customFont是没有意义的,因为链中的最后一个then块没有返回任何内容。
还可以考虑使用async/await syntax,这使得promise代码更直观。实际上,你已经在函数的前半部分使用了async/await。为什么要切换回then链?

const response = await fetch('./resources/fonts/arialnb.ttf');
const buffer = await response.arrayBuffer();
const font = await fontkit.create(buffer);
const customFont = await pdfDoc.embedFont(font);
//... continue to work with customFont

相关问题