Просмотр XPS и PDF в браузере

Мне нужно настроить просмотр документов в браузере. Документы могут быть в форматах PDF или XPS. Я попытался использовать iframe. В то время как PDF-документы отображаются, XPS-документы сразу загружаются. Мой проект построен на Django. Есть ли способ отображать XPS-файлы?

Мой JS:

function displayFile(element) {
  var objectId = element.id.substring('categories_'.length);
  var project_id = '{{ project.id }}';
  var url = `/pilot_doc/get_file/${objectId}/${project_id}/`;
  var options = {
      method: 'GET', 
      headers: {
          'Accept': 'application/octet-stream' 
      }
  };

  fetch(url, options)
      .then(response => {
          if (!response.ok) {
              throw new Error('Network response was not ok');
          }
          return response.json(); 
      })
      .then(data => {
          if (data.status === 'success') {
            var byteCharacters = atob(data.file);
            var byteNumbers = new Array(byteCharacters.length);
            for (var i = 0; i < byteCharacters.length; i++) {
              byteNumbers[i] = byteCharacters.charCodeAt(i);
            }
            var byteArray = new Uint8Array(byteNumbers);
            fileName = data.file_name;
            fileExtension = getFileExtension(fileName);
            console.log(fileExtension);
            var contentType;
            if (fileExtension === 'pdf') {
              contentType = 'application/pdf';
            } else if (fileExtension === 'xps') {
              contentType = 'application/vnd.ms-xpsdocument';
            } else {
              throw new Error('Unsupported file format');
            }
            var blob = new Blob([byteArray], {type: contentType}); 
            var url = URL.createObjectURL(blob);
            var iframe = document.createElement('iframe');
            var docBox = document.querySelector('.box.doc');
            var heightInPixels = docBox.offsetHeight;
            iframe.style.width = "100%";
            iframe.style.height = `${heightInPixels-30}px`; 
            iframe.src = url; 
            docBox.innerHTML = ''; 
            docBox.appendChild(iframe); 
          }
      })
      .catch(error => {
          console.error('There was a problem with your fetch operation:', error);
          alert('Ошибка при загрузке файла: ' + error.message);
      });
}

Вернуться на верх