2 votes

Intégrer un fichier PDF dans une page Web à partir d'une source en ligne, ce qui nécessite le téléchargement du fichier avec la balise "Content-Disposition :" dans les en-têtes HTTP.

J'ai besoin d'afficher les fichiers PDF d'une tierce partie sur une page web. J'ai des liens vers les documents tels qu'ils apparaissent sur les pages sources. Malheureusement, aucun de ces liens n'est un lien réel vers les documents, mais plutôt des requêtes GET avec certains paramètres, ou d'autres références indirectes comme celles-ci :

http://cdm.unfccc.int/UserManagement/FileStorage/SNM7EQ2RUD4IA0JLO3HCZ8BTK1VX5P

Si le site web n'impose pas le téléchargement avec Content-Disposition: attachment; dans les en-têtes de réponse, comme celui ci-dessus, alors je peux facilement obtenir l'affichage nécessaire par :

<object width="90%" height="600" type="application/pdf"  
data="http://cdm.unfccc.int/UserManagement/FileStorage/SNM7EQ2RUD4IA0JLO3HCZ8BTK1VX5P"  
id="pdf_content">  
<p>Can't seem to display the document. Try <a href="http://cdm.unfccc.int/UserManagement/FileStorage/SNM7EQ2RUD4IA0JLO3HCZ8BTK1VX5P">  
downloading</a> it.</p>
<embed type="application/pdf" src="http://cdm.unfccc.int/UserManagement/FileStorage/SNM7EQ2RUD4IA0JLO3HCZ8BTK1VX5P"  
width="90%" height="600" />
</object>

Il s'adapte très bien à la majorité des navigateurs. L'utilisation de <object> y <embed> en même temps fonctionne pour moi, et, pour autant que j'ai testé, n'affecte pas le problème que je décris ci-dessous (dites-moi si je me trompe).

Le problème commence lorsque le site Web exige le téléchargement avec la balise susmentionnée dans les en-têtes HTTP. Par exemple, le document sur le lien suivant :

http://mer.markit.com/br-reg/PublicReport.action?getDocumentById=true&document_id=103000000000681

ne serait pas affiché par la structure HTML que j'ai montrée ci-dessus. Il tombe gracieusement et le lien pour le téléchargement fonctionne très bien, mais j'ai besoin de le visualiser !

Ça fait 3 jours que je me tape la tête contre le mur, je n'arrive pas à comprendre.

Il existe peut-être un moyen de capturer les en-têtes de la demande et de les ignorer, ou de forcer la "visualisation" dans la demande GET.

Pour des informations générales, il s'agit d'une partie d'une application Ruby on Rails, la solution devrait donc venir de là. Je ne donne pas de code ROR ici, car cela ne semble pas être une source de problèmes.

Toute solution simple serait la bienvenue, et toute autre solution serait la bienvenue.

Les solutions alternatives auxquelles j'ai pensé et les commentaires à rejeter :

  1. Télécharger tous ces fichiers au stockage local à l'avance et les servir à partir de là.
    La capacité de stockage nécessaire serait d'environ ~1TB et en augmentation, donc stocker sur le serveur serait coûteux pour un petit SaaS commercial qu'il est.

  2. Mettez ces documents en cache au moment où vous en aurez besoin. Par exemple, lorsqu'une personne ouvre la page du projet, le processus télécharge en arrière-plan les PDF associés, de sorte que si l'utilisateur clique sur le lien du document, il reçoit le document qui vient d'être téléchargé sur le stockage local. Le cache pourrait être conservé pendant quelques heures/jours, au cas où l'utilisateur reviendrait.
    Cela pourrait être viable, mais si la base d'utilisateurs était importante, cette solution aurait le même problème que la précédente. En outre, à l'heure actuelle, je ne saurais pas comment mettre en œuvre ce type d'algorithme (je suis un débutant, vous voyez).

-1voto

imjosh Points 579

Vous pouvez envisager d'utiliser http://pdfobject.com ou peut-être simplement adapter une partie de son code, car il semble être capable de faire ce que vous voulez. J'ai préparé une preuve de concept :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Embedding a PDF using PDFObject: Simple example with basic CSS</title>
  <!-- This example created for PDFObject.com by Philip Hutchison (www.pipwerks.com) -->
  <style type="text/css">
    body
    {
      font: small Arial, Helvetica, sans-serif;
      color: #454545;
      background: #F8F8F8;
      margin: 0px;
      padding: 2em;
    }
    h1
    {
      font-weight: normal;
      font-size: x-large;
    }
    a:link, a:visited
    {
      color: #3333FF;
      text-decoration: none;
      border-bottom: 1px dotted #3333FF;
    }
    a:hover, a:visited:hover
    {
      color: #FF3366;
      text-decoration: none;
      border-bottom: 1px solid #FF3366;
    }
    #pdf
    {
      width: 500px;
      height: 600px;
      margin: 2em auto;
      border: 10px solid #6699FF;
    }
    #pdf p
    {
      padding: 1em;
    }
    #pdf object
    {
      display: block;
      border: solid 1px #666;
    }
  </style>
  <script type="text/javascript" src="pdfobject.js"></script>
  <script type="text/javascript">
    window.onload = function () {
      var success =
        new PDFObject({ url: "http://mer.markit.com/br-reg/PublicReport.action?getDocumentById=true&document_id=103000000000681" }).embed("pdf");
    };
  </script>
</head>
<body>
  <h1>
    Embedding a PDF using PDFObject: Simple example with basic CSS</h1>
  <p>
    This example uses one line of JavaScript wrapped in a <em>window.onload</em> statement,
    with a little CSS added to control the styling of the embedded element.
  </p>
  <div id="pdf">
    It appears you don't have Adobe Reader or PDF support in this web browser. <a href="http://mer.markit.com/br-reg/PublicReport.action?getDocumentById=true&document_id=103000000000681">
      Click here to download the PDF </a>
  </div>
</body>
</html>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X