Как я могу устранить ошибку «доступ запрещен» в браузерах IE при загрузке PDF из моего приложения angular7?

Question

В моем приложении angular 7 у меня есть API, при вызове которого я буду загружать PDF.

Вот мои методы получения PDF:

getPdf() {
  const payload = { applicantId: this.idHeader, codes: 
  this.codeHeader + ':0', genderType: this.gender, data: this.data }

  this.service.getPdfConfirmationView(payload).subscribe((pdfResponse: 
  any) => {
    let dataType = 'application/pdf';
    let binaryData = [];
    binaryData.push(pdfResponse);
    let downloadLink = document.createElement('a');
    downloadLink.href = window.URL.createObjectURL(new Blob(binaryData, { type: dataType }));
    if (pdfResponse)
      downloadLink.setAttribute('download', 'ConfirmationReport');
    document.body.appendChild(downloadLink);
    downloadLink.click();
    })
  }

Вот мой сервис для подключения к API

  getPdfConfirmationView(payload) {
    return this.http.get(environment.apiUrl + 
    '/v1/report/getPdfConfirmationView',
    { headers: this.getSearchApiHeaders(payload), responseType: 'blob' });
  }

Это прекрасно работает в браузерах Chrome, яЯ могу нажать на ссылку и загрузить файл PDF на мой компьютер. Однако в Internet Explorer 11 появляется следующее сообщение об ошибке:

ERROR Error: Access is denied.
  "ERROR"
    [object Error]{description: "Access is d...", message: "Access is d...", name: "Error", number: -2147024891, stack: "Error: Acce..."}
    [functions]
    __proto__[object Error] {...}
    description"Access is denied. ...
    message"Access is denied. ...
    name"Error"
    number-2147024891
    stack"Error: Access is denied. ...

Что можно сделать, чтобы решить эту проблему в браузерах IE?

Answer 1

IE не поддерживает URL.createObjectURL(), который вы используете в своих методах для получения PDF-файлов. IE имеет собственный API для создания и загрузки файлов, который называется msSaveBlob или msSaveOrOpenBlob.

Разница между методами msSaveBlob и msSaveOrOpenBlob заключается в том, что первый предоставляет пользователю только кнопку Сохранить , тогда как последний предоставляет как Сохранить , так и Кнопка открытия . Вы можете использовать их в IE следующим образом:

window.navigator.msSaveOrOpenBlob(blobData, fileName);  

Для получения дополнительной информации вы можете обратиться к этой статье в Microsoft и этой теме .

---------------------------------------------------Редактировать-------------------------------------------------------

Чтобы сделать его кросс-браузерным, код выглядит следующим образом:

if(window.navigator.msSaveOrOpenBlob) {
    //IE11 & Edge
    window.navigator.msSaveOrOpenBlob(blobData, fileName); 
}
else{
   //Other browsers
    window.URL.createObjectURL(blobData);
    ...
}

Вы также можете сослаться на этот простой пример, который я сделал: https://stackblitz.com/edit/angular-coueov