View XPS and PDF in browser

Question

I need to set up document viewing in the browser. The documents could be either in PDF or XPS formats. I attempted to use an iframe. While PDF documents are being displayed, XPS ones are being immediately downloaded. My project is built on Django. Is there a way to display XPS files?

My 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

This is very simple if you have the correct browser configuration (for files including PDF or other document types).

So here is a sample web file of an XPS as seen by the browser when clicked on. http://file.fyicenter.com/b/sample.xps

Note there is (as with all files) simply no need for Java, JavaScript nor a popup (see the security settings are all set to block). Even images especially web bugs can be switched OFF.

The ability to use a frame or new tab or new window (if wanted or not wanted) is also the users choice. A server cannot "enforce" ability to use attachments.

Simply put the document is downloaded direct into the browser, based on correct Mime type.

Different Browser same enabled PDF viewer on right same link. But just to show it's down to the user The pull off tab in the middle is my choice of Acrobat Dc for some PDFs. The PDF frame on the left is an "Image" so I can switch that off if I wish too.

There are many online services where you can link a file transfer via a browser viewer carrier. So this one has download, print and search abilities. However for commercial use you would need to shop around.

Aspose web multi format viewers, have an exceptionally wide range of formats, so above Conholdate or Aspose or GroupDocs have much the same abilities see https://products.groupdocs.cloud/viewer/python/oxps/

You can host your own viewer (The above illustration was via simple client upload so temporary).

GroupDocs.Viewer Cloud is also available as Docker image which can be used to self-host the service. Or you may build your own services using GroupDocs.Viewer High-code APIs which currently drive both OXPS Free Viewer App and REST APIs.