如何使用 AngularJS 从网络下载文件？

Question

我使用 AngularJS 从网络获取 a 并将其存储在数据库中（我将其转换为字节数组）。

现在我想使用 AngularJS 下载该文件。我怎样才能做到这一点？我是否必须将字节数组转换为其他内容？文件扩展名可以是 pdf、doc/docx 或 jpg。

Answer 1

成功时请执行此操作，否则服务将被阻止。

var a = document.createElement('a');
a.href = 'data:here goes the mime type of file,' + encodeURI(response);
a.target = '_blank';
a.download = 'file name . extension ';
document.body.appendChild(a);
a.click();

例如：我正在从 base64 字符串下载 csv 文件

var a = document.createElement('a');
a.href = 'data:attachment/csv,' + encodeURI(response);
a.target = '_blank';
a.download = 'Export.csv';
document.body.appendChild(a);
a.click();

这里我是字符串base64作为响应

Answer 2

这里是在不同类型的浏览器中下载任何文件（例如：PDF）的示例代码

$http.get("/displayPdf", {responseType: 'arraybuffer', params: {id: 1}}).success(function(data) {
    var blob = new Blob([data], {type 'application/pdf'});
    var anchor = document.createElement("a");
    if(navigator.userAgent.indexOf("Chrome") != -1||navigator.userAgent.indexOf("Opera") != -1){
                    $window.open(URL.createObjectURL(file,{oneTimeOnly:true}));
    }else if(navigator.userAgent.indexOf("iPad") != -1){
                    var fileURL = URL.createObjectURL(file);
                    //var anchor = document.createElement("a");
                    anchor.download="myPDF.pdf";
                    anchor.href = fileURL;
                    anchor.click();
    }else if(navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Safari") != -1){
                        var url = window.URL.createObjectURL(file);
                        anchor.href = url;
                        anchor.download = "myPDF.pdf";
                        document.body.appendChild(anchor);
                        anchor.click();
                        setTimeout(function(){
                            document.body.removeChild(anchor);
                            window.URL.revokeObjectURL(url);  
                        }, 1000);
      }
   });

Answer 3

这是我的角度控制器

angular
.module('viewCvForm')
.component('viewCvForm', {

    templateUrl: 'view-cv-form/view-cv-form.template.html',
    controller: ['$scope','$routeParams','Applicant',
        function ApplicantController($scope,$routeParams,Applicant) {
            console.log('Cv Controller');
            console.log($routeParams.id);

            var self=this;

            fetchCV();
            function fetchCV() {
                var applicant={
                        firstName: "",
                        lastName: "",
                        email: "",
                        phoneNumber: "",
                        jobId:0,
                        id:$routeParams.id

                }

                return Applicant.fetchCV(JSON.stringify(applicant))
                    .then(function (response) {
                        console.log(response);

                            var a = document.createElement('a');
                            a.href = 'data:application/txt,' + encodeURI(response.data);
                            a.target = '_blank';
                            a.download = 'cv.txt';
                            document.body.appendChild(a);
                            a.click();
                            d.resolve(response);
                    },
                        function (errResponse) {
                            console.error('Error while creating Interview');
                        }
                    );
            }

        }
    ]
});

response 是一个对象，它有一个名为“data”的字段，其类型为 byte[]（在 Java 控制器中）。我使用此字段将文件保存到数据库中。

如何转换response.data以显示该文件内的内容？因为现在它只显示 base64 字符。