angular - 如何使用 blob 在新选项卡中显示 pdf

Question

我在 TypeScript/Angular 中有这个方法，它生成我的文件

 imprimir() {

            this.service.emitirAdvertencia({ parametros: [{ name: 'CODIGO', value: 880 }] })
            .subscribe((response) => {
                console.log(response);             
                var fileURL = window.URL.createObjectURL(response);                        

                //this not display my pdf document in a new tab.
                window.open(fileURL, '_blank');

                //this display my document pdf, but in current tab
                window.location.href = fileURL; 
            }, error => {
                console.log(error);
            });
        }

这是我的服务

emitirAdvertencia(parametros: Object): any {
        parametros['dbenv'] = ApplicationContext.getInstance().getDbenv();
        parametros['usuario'] = ApplicationContext.getInstance().getUser().codigoUsuario;
        parametros['nome_relatorio'] = 'RelAdvertenciaDB';
        var httpOptions = {

            headers: new HttpHeaders({
                'Authorization': this.localStorage.get('token'),
            }),
            responseType: 'blob' as 'blob',
        };
        return this.http.get(ApplicationContext.URL + '/adiantamento/gerar-relatorio/', httpOptions)
            .map((res) => {
                var report = new Blob([res], { type: 'application/pdf' });
                return report;
            });

就像代码中的注释一样，当我尝试在新选项卡中打开时，不起作用，仅当我在当前选项卡中打开时才有效

如何在新选项卡中打开这个 blob pdf 文件？

Answer 1

To open file in new Tab, you need to create anchor Element in Typescript and add your file url in href attribute of this element.

在我的示例中，服务响应为 data._body对于文件 blob，您可以将其安排为服务的输出响应。

var newTab = true;
var inputData = { parametros: [{ name: 'CODIGO', value: 880 }] };

    this.service.emitirAdvertencia(inputData).subscribe(
                    (data: any) => {
                        var contentType = data.headers._headers.get('content-type')[0];
                        var blob = new Blob([data._body], { type: contentType });
                        var url = window.URL.createObjectURL(blob, { oneTimeOnly: true });

                        //window.open(url, '_blank', '');
                        var anchor = document.createElement('a');
                        anchor.href = url;
                        if (newTab)
                            anchor.target = '_blank';

                        anchor.click();
                    },
                    error => {
                        //TODO
                    },
                    () => { 
                        //TODO 
                    });