Stream saver cancel/abort download on User Event

I am using streamsaver.js to download larger files and it works perfectly fine.

In the meantime, I want to handle cancel events from the user to stop fetching the content from the server.

Is it possible with AbortController and AbortSignal to stop readable streams fetching data?

The sample code would be below for the download part.

fetch(url, { signal: abortSignal })
    .then(resp => {
        for (var pair of resp.headers.entries()) {
            console.log(pair[0] + ': ' + pair[1]);
        }
        total = Number(resp.headers.get('X-zowe-filesize'));
        return resp.body;
    })
    .then(res => {

        var progress = new TransformStream({
            transform(chunk, controller) {
                loaded += chunk.length;
                controller.enqueue(chunk);
                elem.style.width = (loaded / total) * 100 + '%';
                elem.innerHTML = (loaded / total) * 100 + '%';
            }
        })

        const readableStream = res
        // more optimized
        if (window.WritableStream && readableStream.pipeTo) {
            return readableStream
                .pipeThrough(progress)
                .pipeTo(fileStream, { signal: abortSignal })
                .then(() => console.log('done writing'))
        }

        window.writer = fileStream.getWriter()

        const reader = readableStream.getReader()
        const pump = () => reader.read()
            .then(res => res.done
                ? writer.close()
                : writer.write(res.value).then(pump))

        pump()
    })