相关疑难解决方法(0)

我想为jquery ajax响应下载pdf文件.Ajax响应包含pdf文件数据.我试过这个解决方案.我的代码如下,但我总是得到一个空白的pdf.

$(document).on('click', '.download-ss-btn', function () {

    $.ajax({
        type: "POST",
        url: 'http://127.0.0.1:8080/utils/json/pdfGen',
        data: {
            data: JSON.stringify(jsonData)
        }

    }).done(function (data) {
        var blob = new Blob([data]);
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = "Sample.pdf";
        link.click();
    });


});

我是Javascript的新手,我想在承诺的结果后下载来自动态网址的文件,它是生成的pdf,我试图通过以下调用下载,但无法使其工作,因为下载没有开始

<button (click)='downloadMyFile()'>Download</button>

downloadMyFile(){
  //url 
  .then((result)=>{
   //result is contains a url www.abc.com/file234
    window.location.href = result
})
  .catch((error)=>{
   //myerror
})
}

这是插件

我有一个按钮定义为:

<button pButton type="button" label="Download" data-icon="fa-cloud-download" (click)="download()"></button>

其中download方法委托给服务,并且服务调用与后法的API:

download(model:GlobalModel) {
        let downloadURL = base + "rest/process/download";
        let body = JSON.stringify(model);
        let headers = new Headers({'Content-Type': 'application/json'});
        let options = new RequestOptions({headers: headers});   

        this.http.post('http://localhost:48080/rest/process/download', body, options)
            .toPromise()
            .then(
                response => {
                    console.log(response);       
                    var mediaType = 'application/zip';
                    var blob = new Blob([response.blob()], {type: mediaType});
                    var filename = 'project.zip';
                    saveAs(blob, filename);//FileSaver.js libray
                });

    }

但到目前为止,该blob()方法尚未实现,并且还有其他答案,_body但有一个打字稿错误,如"_body is private".

浏览器显示下载窗口,但是当我下载文件已损坏且无法打开时(我检查postman并且文件从服务器生成正常).

我怎样才能正确下载文件？...如果不可能,有可用的解决方法吗？

由于某种原因,fileSaver未被映射.angular2-jwt工作正常.

我做npm install file-saver -save了文件保护程序,然后引用如下(我有一个gulp任务将js文件移动到libs目录,我看到那里的文件)

在index.htmlI中已将脚本包含在src和system.config中

    <script src="libs/file-saver/FileSaver.js"></script>

<!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          } 
        } ,
        map: {
          "angular2-jwt": "libs/angular2-jwt/angular2-jwt.js"
          ,"fileSaver":"libs/file-saver/FileSaver.js"
        }
      });
      System.import('app/bootstrap')
            .then(null, console.error.bind(console));
    </script>

component.ts

这里没有找到fileSaver

import {SaveAs} from 'fileSaver';     

我得到的错误就是这个

 error TS2307: Cannot find module 'fileSaver'.   

知道这里有什么问题吗？

我目前正致力于在我的系统中以角度2(beta)版本使用安全API下载文件(PDF/excel/text).

我使用了带有身份验证标头的post API,并尝试使用收到的数据字节创建blob.

我尝试使用以下代码

return this.http.get(url, { headers: this.headers}).map( response => response.blob())

但是,我得到的错误是在角度2 HTTP中没有实现blob方法.

所以我正在尝试下面的代码,我需要将字符串转换为字节数组.

return this.http.get(Configuration.API_URL + url, { headers: this.headers }).map(
            response => {
                var bytes = [];

                var utf8 = encodeURIComponent(response.text());
                for (var i = 0; i < utf8.length; i++) {
                    bytes.push(utf8.charCodeAt(i));
                }    
                var data = new Blob([bytes], { type: 'application/pdf' });
                var fileURL = URL.createObjectURL(data);
                window.open(fileURL);
            }
        );

这里我面临一些字节数组的问题.字节数组与API发送的字节数组不同.

在将字符串转换为字节数组或在angular 2 HTTP get请求中使用blob时需要帮助.

响应具有图像数据,但我无法从响应中提取它.

客户代码 -

download() {
    this._http.get('http://localhost:9000/download/' + this._fileid)
    .subscribe(
    data => {
        this.image = data;
    },
    err => console.log('Error is..:' + err)
    );
}

服务器代码 -

app.get('/download/:fileid', function(req, res) {
    var id = req.params.fileid;
    res.set('Content-Type', 'image/jpeg');
    gfs.createReadStream({_id: id}).pipe(res);
});

[编辑] - 我已经调整了我的代码以使用CustomXhr但是我得到一个没有数据的空blob.

CUSTOM XHR代码 -

@Injectable()
export class CustomBrowserXhr extends BrowserXhr {
  build(): any {
    let xhr = super.build();
    xhr.responseType = "blob";
    return <any>(xhr);
  }
}

BOOTSTRAP CODE-导出函数main(initialHmrState？:any):Promise {

export function main(initialHmrState?: any): Promise<any> {

  return bootstrap(App, [
    ...ENV_PROVIDERS,
    ...PROVIDERS, …

我xlsx在Angular2应用程序中保存时遇到一些问题:

this._http.get('/api/file).subscribe(success=>{
                var blob = new Blob([success.json()], {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                });
                var downloadUrl= window.URL.createObjectURL(blob);
                window.open(downloadUrl);

            }, error=>{

            });

我从后端收到的回复如下:

PK?q?H_rels/.rels???j?0??}
?{?1F?^??2??l%1I,c?[??3?l
l?????H??4??R?l???????q}*?2???????;?*??
t"?^?l;1W)?N?iD)ejuD?cKz[?:}g????@:?.... etc

我做错的任何想法？

我无法在任何地方找到答案,希望有人可以提供帮助.

我在模板中定义了一个Angular2点击事件,在表格的单元格中:

<td (click)="click2Download()">fileName.txt</td>

在typescript组件中,我需要帮助来定义一个方法click2Download(),它会自动开始将fileName.txt下载到客户端的浏览器.注意:文件位于同一个域中,例如:

http://example.com/fileName.txt

用Angular2做这个的任何方法？

前一个问题有一些很好的解决方法:

Angular 2从API下载PDF并在View中显示它

但是现在RC5已经出来了,我们可以使用arrayBuffer().我似乎无法随心所欲.我如何从这个转到一个不错的pdf blob:

return this._authHttp.get(this.fileUrl+id)
        .map((res:Response) => res.arrayBuffer())
        .subscribe(
            data => {
                console.log(data);
                var blob = new Blob([data], {type: 'application/pdf'});
                console.log(blob);
                saveAs(blob, "testData.pdf");

        },
            err => console.error(err),
        () => console.log('done')
    );

数据最终是我预期的两倍.我缺少什么想法？