svelte 渲染 DOM 后执行函数

Question

我需要运行在 DOM 完全更新后发出事件的函数。我将 Svelte 与 Electron.js 结合起来。该页面用作PDF生成器，它从主进程加载数据，然后更新自身，最后通知主进程所有内容都已加载，并且主进程截图了该内容（PDF进程）。所以代码：

\n\n

PDF进程渲染器：

\n\n

\n    onMount(() => {\n        // Asks for the data, emits event\n        ipc.send(\'PDFWindowReady\');\n    });\n\n    ipc.on(\'PDFLoadContent\',(event,data)=>{\n        // Gets the data, event listener\n        const content = data.data;\n\n        // Assigns the data to a particular variable\n        contractorEnterprise = content.contractor.enterprise;\n        contractorAddress = content.contractor.street;\n        contractorCity = content.contractor.city;\n\n        //long list of assignments\n\n        output = data.output;\n        // Renders empty PDF, that means, that DOM has not re-rendered yet\n        // I need to ensure that it has, then execute function below\n        //ipc.send(\'makePDF\',data.output)\n    });\n\n    beforeUpdate(async () => {\n        // This doesn\'t work, empty PDF\n        await tick();\n        if (output) {\n            await tick();\n            ipc.send(\'makePDF\',output);\n            console.log(output);\n        }\n    });\n\n    /*\n    afterUpdate(() => {\n        // This neither\n        if (output) {\n            ipc.send(\'makePDF\',output)\n        }\n    });\n    */\n\n    ipc.on(\'PDFCreated\',()=>{\n        // after PDF is generated, window will be closed\n        /* I even tried timeouts, but that is unreliable and could cause unloaded content\n           on big data load */\n        //setTimeout(() => {\n        window.close()\n        //},1000);\n    });\n\n

\n\n

电子.js（主.js）：

\n\n

ipcMain.on(\'makePDF\', (event,aux)=>{\n    const pdfPath = path.join(appRoot.pdfPath,aux.file);\n    const content = BrowserWindow.fromWebContents(event.sender);\n    content.webContents.printToPDF({\n        pageSize: "A4",\n        landscape: false\n    }).then(data => {\n        fs.writeFile(pdfPath, data, (error) => {\n            event.sender.send(\'PDFCreated\');\n            if (error) throw error;\n            new Notification({\n                title: \'PDF je hotov\xc3\xa9\',\n                body: `Exportovanie dodacieho listu do ${pdfPath}.pdf bolo ukon\xc4\x8den\xc3\xa9.`\n            }).show();\n            shell.openExternal(`file://${pdfPath}`);\n            console.log(`New delivery note:${pdfPath}`);\n        })\n    }).catch(error => {\n        console.log(error.message)\n    })\n});\n\n//triggered by primary process\nipcMain.on(\'openPDFWindow\',(event,data)=>{\n    //opens new invisible browser window\n    fpt.createPDFWindow();\n    ipcMain.once(\'PDFWindowReady\',(event)=>{\n        //as soon as is window ready event is emmited\n        event.sender.send(\'PDFLoadContent\',data);\n    });\n});\n\n

\n\n

第 76 行的输出，console.log(output)：

\n\n

包含输出文件名称的对象

\n\n

正如您所看到的，我在页面加载后发送事件的尝试均无效。问题是它呈现空 PDF。以前我使用 jQuery，并通过超时解决了它，但这是愚蠢的、容易出错的解决方案。我需要在渲染完所有内容后运行此函数：

\n\n

ipc.send(\'makePDF\',output)\n

\n\n

问题是它呈现空 PDF，似乎页面尚未重新呈现并且屏幕截图拍摄得太早。\n 有可靠的解决办法吗？

\n