Good question, I have two potential work arounds but still doing some testing to get this working how you would like.
I thought the issue might be your use or dataURL.data, since utils.serializePage() should return a string.
But that did work to download an image file but it was corrupted... and without the .data at the end it didn't work.
I am able to download a PDF components contents with utils.downloadPage("filename", {componentsToInclude: ["pdf1"]});
But this is low resolution.
My other work around was similar to what you have, to first serialize the component and then download the file from the base64 encoded string which I thought would work.
But for some reason even though I can return dataURL it it shows that it is a string, which is after 'base64,' using the string method of .split to grab only the base64 encoded file string and not the extra data before doesn't seem to be working
Ok so did some more research and the reason I needed to chain together two queries is because utils.serializePage is async and needs to have an await before it
I tried using the scale input for the utils.downloadPage method, which does improve the quality when I do utils.downloadPage("filename", {componentsToInclude: ["pdf1"], scale: 8} );
But runs into a cap with larger numbers, when I used 50 and 100 it renders an empty white page as you reported. But this seems to be the best option for downloading a higher quality image.