Streaming writes to a downloading file from JavaScript

Question

I'm trying to generate very large PDF files in a browser and it is not feasible to do this with very large amounts of data, because browsers end up running out of memory before the document is completed. Therefore, I'm looking into a way to stream writes into a file, one page at a time, so that I can free up memory once I finish writing a page.

While I obviously don't get file managing capabilities in browsers (obviously), Jimmy Wärting came up with a most interesting solution in StreamSaver.js . The main idea here is to use a ServiceWorker to mock an HTTP request with Content-Disposition: Header, which will start a download, and then pipe the data through it.

The issues with these approach are mainly of compatibility: Service Workers aren't supported in all browsers, nor are Web Streams, and they force us to use HTTPS, which may not be feasible in some scenarios. So I wonder whether there is an alternative approach that doesn't involve the use cutting-edge features?

Answer 1

I don't think you can achieve streamserver kind of things with legacy web capabilities without a hacky way(may be storing the streamed data in IndexDB which has relatively more support , still not all), there is a reason to not choose latest web standards like PWA-service workers. IndexedDB is pretty much part of PWA as well, but the question is what suits as your solution better.

Service workers are available in most major browsers now . If you are still concerned of supporting users in older versions of browser, you can consider using polyfill to support service worker for them. With less developers concerned of supporting old browsers on such use cases, you might find less documentation/support around such polyfill implementation.