在浏览器中查看XPS和PDF

Question

我需要在浏览器中设置文档查看。文档可以是 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);
      });
}

Answer 1

如果您有正确的浏览器配置（对于包括 PDF 或其他文档类型的文件），这非常简单。

这是一个 XPS 的示例 Web 文件，点击浏览器即可看到。

注意（与所有文件一样）根本不需要 Java、JavaScript 也不需要弹出窗口（请参阅安全设置全部设置为阻止）。

使用框架或新选项卡或新窗口的能力（如果想要或不想要）也是用户的选择。

简单地说，基于正确的 Mime 类型，将文档直接下载到浏览器中。