Javascript Blob anchortag下载产生损坏的文件

Question

下面的代码下载了一个无法打开（损坏）的文件，我完全不知道为什么。 我已经在很多方面尝试了这个但它永远不会工作，它总是会产生一个损坏的文件。 原始文件不是问题，因为它打开正常。 我正在尝试打开mp4，mp3和图像文件。

//$scope.fileContents是一个字符串

$scope.fileContents = $scope.fileContents.join(",");
        var blob = new Blob([$scope.fileContents], {type: $scope.file.fileDetails.type});
        var dlURL = window.URL.createObjectURL(blob);
        document.getElementById("downloadFile").href = dlURL;
        document.getElementById("downloadFile").download = $scope.file.fileDetails.name;
        document.getElementById("downloadFile").click();
        window.URL.revokeObjectURL(dlURL);

Answer 1

您需要使用ArrayBuffer将文件内容下载为二进制文件，例如

$http.get(yourFileUrl, { responseType: 'arraybuffer' })
    .then(function (response) {
        var blob = new Blob([response.data], {type: $scope.file.fileDetails.type});
        // etc...
    });

资料来源：

• 角度解
• 普通的JavaScript解决方案