1

我有一个在单击时生成PowerPoint幻灯片的按钮，但是在生成过程中屏幕冻结了约1秒钟，这是流程：

(1)。用户点击按钮

(2)。打开微调器setIsGenerating(true)以表示生成正在进行中

(3)。触发异步请求以获取 base64 格式的图像数据

(4)。使用嵌套循环插入图像和文本的幻灯片

(5)。writeFile().then(()=> setIsGenerating(false)) 执行以下载和停止微调器。通过阅读我的控制台日志，冻结在 writeFile() 之前开始，它已经返回了一个承诺。注释掉 writeFile() 确实消除了冻结问题，但是这个函数是强制性的

(6) 另一个问题是在微调器消失后约 1 秒开始下载，但我希望下载在微调器消失的同时开始

(7) 下载的文件约为 120,000 KB，在我看来并没有那么大，但由于某些我不知道的原因，性能很差

创建PPT功能

    const createPPT = async () => {
        setIsGenerating(true)
        let cart = JSON.parse(localStorage.getItem('cart')) || []
        let pres = new pptxgen();
        let newCart = JSON.parse(JSON.stringify(cart))
        const imgList = []
        await Promise.all(newCart.map(async (d) => {
            if (d.img !== "") {
                let result = await axios.get(d.img, {
                    responseType: 'arraybuffer'
                })
                let image = Buffer.from(result.data, 'binary').toString('base64')
                image = `data:image/jpg;base64,${image}`
                imgList.push(image)
            }
        }))
        newCart.map((d, i) => {

            if (d.img !== "") {

                d.img = imgList[i]
                return d
            }
        })
        newCart.map(d => {
            let slide = pres.addSlide()
            d.img && slide.addImage({ data: d.img, w: "100%", sizing: { type: "crop" } });
            slide.addText(d.title, { x: '0', y: '0', w: '100%', h: '20%', align: 'center', valign: 'middle', color: "ffffff", });
            slide.background = { color: "#000000" };
            d.content.map(text => {
                let slide_2 = pres.addSlide();
                d.img && slide_2.addImage({
                    data: d.img,
                    w: "100%",
                    sizing: {
                        type: "crop"
                    }
                });
                slide_2.addText(text, { x: '0', y: '0', w: '100%', h: '20%', align: 'center', valign: 'middle', color: "ffffff", })
                slide_2.background = { color: "#000000" };
            })
        })


//This writeFile() function seems to cause UI to freeze for a short time
        pres.writeFile({ fileName: "Sample Presentation.pptx" })
            .then(() => {
                setIsGenerating(false)
            })
    }

按钮

<Button onClick={createPPT}> Create PPT </Button>
4

0 回答 0