Question

我想使用以下Angular 6代码实现文件下载：

其他API：

private static final Logger LOG = LoggerFactory.getLogger(DownloadsController.class);

private static final String EXTERNAL_FILE_PATH = "/Users/test/Documents/blacklist_api.pdf";

@GetMapping("export")
public ResponseEntity<FileInputStream> export() throws IOException {
    File pdfFile = Paths.get(EXTERNAL_FILE_PATH).toFile();

    HttpHeaders headers = new HttpHeaders();
    headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
    headers.add("Pragma", "no-cache");
    headers.add("Expires", "0");

    return ResponseEntity.ok().headers(headers).contentLength(pdfFile.length())
            .contentType(MediaType.parseMediaType("application/pdf"))
            .body(new FileInputStream(pdfFile));
}

服务：

import {Injectable} from '@angular/core';
import {HttpClient, HttpParams} from "@angular/common/http";
import {Observable} from "rxjs/index";
import {environment} from "../../../environments/environment";
import {HttpUtils} from "../common/http-utils";
import { map } from 'rxjs/operators';
import {Http, ResponseContentType} from '@angular/http';


@Injectable({
  providedIn: 'root'
})
export class DownloadService {

  constructor(private http: HttpClient) {
  }

  downloadPDF(): any {
    return this.http.get(environment.api.urls.downloads.getPdf, {
        responseType: 'blob'
      })
      .pipe(
        map((res: any) => {
          return new Blob([res.blob()], {
            type: 'application/pdf'
          })
        })
      );
    }  
}

组件：

import {Component, OnInit} from '@angular/core';
import {DownloadService} from "../service/download.service";
import {ActivatedRoute, Router} from "@angular/router";
import {flatMap} from "rxjs/internal/operators";
import {of} from "rxjs/index";
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-download',
  templateUrl: './download.component.html',
  styleUrls: ['./download.component.scss']
})
export class DownloadComponent implements OnInit {

  constructor(private downloadService: DownloadService,
              private router: Router,
              private route: ActivatedRoute) {
  }

  ngOnInit() {   
  }

  export() {               
    this.downloadService.downloadPDF().subscribe(res => {
      const fileURL = URL.createObjectURL(res);
      window.open(fileURL, '_blank');
    });         
  } 
}

该文件存在于目录中，但是当我尝试下载该文件时出现错误：

18:35:25,032 WARN  [org.springframework.web.servlet.mvc.support.DefaultHandlerExceptionResolver] (default task-2) Resolved [org.springframework.web.HttpMediaTypeNotAcceptableException: Could not find acceptable representation]

您知道如何解决此问题吗？我是否需要添加其他配置才能通过Angular Web UI下载文件？

我使用spring-boot-starter-parent版本2.1.0.RELEASE

Answer 1

FileSaver npmjs.com/package/ngx-filesaver是Angular6中最好的文件下载库，但在ios设备中存在许多问题。我们通过编写自己的方法并有条件地对其进行处理来对其进行修复。

组件

download() {
    this.downloadService.downloadPDF().subscribe(async (res: Blob) => {
      if (this.isIOSMobileDevice) {
        const file = new File([res], fileName, { type: 'application/pdf' });
        const dataStringURL: any = await this.fileService.readFile(file);
        this.hrefLink = this.sanitizer.bypassSecurityTrustUrl(dataStringURL);
      } else {
        saveFile(res, fileName);
      }
    });
  }

export const saveFile = (blobContent: Blob, fileName) => {
        const isIOS = (!!navigator.platform.match(/iPhone|iPod|iPad/)) || (navigator.userAgent.match(/Mac/) && navigator.maxTouchPoints && navigator.maxTouchPoints > 2);
        const blob = new Blob([blobContent], { type: 'application/pdf' });
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(blob, fileName);
        } else {
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            document.body.appendChild(link);
            link.href = url;
            link.target = '_self';
            link.download = fileName;
            link.click();
            document.body.removeChild(link);
        }
    };

文件服务

async readFile(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = () => {
                resolve(reader.result);
            };
            reader.onerror = reject;
            reader.readAsDataURL(file);
        });
    }

HTML代码

<a *ngIf="isIOSMobileDevice" [href]="hrefLink"
              target="_blank">Download</a>
            <a *ngIf="!isIOSMobileDevice" href="javascript:;" (click)="download"
              target="_blank">Download</a>

对于ios移动设备，必须先调用download方法，以便我们获取hrefLink。

找不到可接受的文件下载表示形式

1 个答案: