Unable to download files with the correct name in chrome on ios

I want to download "example.mp4" to my iPhone using FileSaver.js.
But when I download it in chrome, it downloads the file as "document".
donwload in chrome

Does anyone know how to solve this problem?

my code

<!doctype html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>Download Sample</title>
    <script src="js/FileSaver.js"></script>
    <script type="text/javascript">
        const contents_url = "a.mp4";
        const file_reader = new FileReader();
        var out;

        file_reader.onload = function (e) {
            saveAs(e.target.result, "example.mp4");
        }

        function handleDownload() {
            out = new Blob([contents_url], { type: 'video/mp4' });
            file_reader.readAsDataURL(out);
        }
    </script>
</head>

<body>
    <a href="#" onclick="handleDownload()">Download</a>
</body>

</html>

my environment

• iOS : 14.1
• chrome version : 86.0.4240.93

things to try

I tried downloading in safari and was able to download in "example.mp4".