18008 sujets

Questions générales et questions de débutants

[Résolu] Inclure un fichier pdf dans une page

Bonjour à tous
Nous avons décidé pour le prochain concert de donner aux spectateurs la possibilité de télécharger le programme du concert sur leur téléphone en leur donnant un QR-code affiché à l'entrée de la salle : https://www.alma-musica.net/html/concerts/2023-06-16/EProg-04.pdf

On m'a demandé ensuite d'ajouter les textes des pièces du concert, ce qui donne
https://www.alma-musica.net/html/concerts/2023-06-16/EProg-04+textes.pdf
Pour faire cela, j'ai mis les textes dans un fichier texte par copier/coller et j'ai fusionné les deux fichiers pdf. Cette technique n'est pas satisfaisante, car je peux beaucoup plus facilement afficher ces textes, qui sont dans la base de données, par quelques lignes de PHP, SQL, JS et CSS.
Mais si je veux afficher en tête le fichier pdf, il faudrait que je puisse l'inclure par programme.
Pour le moment, j'ai fait des images à partir du fichier EProg-04.pdf et je les inclus dans
https://www.alma-musica.net/html/concerts/prog-texts.php?progID=Concert-2023-06-16

Voyez vous un moyen simple d'inclure le fichier EProg-04.pdf lui-même sans passer par des images ?
Merci pour votre aide
Bonjour,
Mais à la base ce n'est pas un PDF, ce sont des jpg posées dans un pdf si je comprend bien.
Alors je n'ai pas trop compris ce que vous cherchez à faire, mais pour ma part j'aurais tout passé en version texte, et crée une page web qui aurais eu la même forme que le PDF et qui contenais la possibilités de télécharger la version PDF.

Ce que je ne comprend pas c'est pourquoi passer par une base de données ?
Réponses :
1) le programme à proprement parler (4 pages) est destiné à être imprimé.
Pour cela j'utilise le produit Scribus sui permet de faire des mises en pages précises pour une page de dimensions fixes et qui produit du PDF.
Reprendre cela pour le faire en html/css serait un très gros travail, et je ne suis pas sûr de pouvoir le faire.
2) pour permettre aux spectateurs de charge UNIQUEMENT le programme, il suffit de leur donner l'url du fichier pdf
3) les textes des œuvres au programme du chœur sont, depuis une dizaine d'années, disponibles sur la base de données du site, au même niveau que les partitions, les enregistrements et autres fichiers. Quand on décide de mettre une œuvre au programme d'un concert, les choristes ont directement accès à ces fichiers.
Voilà pourquoi les textes sont dans la base de données.

Ce n'est pas comme si je n'avais pas de solution : transformer un pdf de 4 pages en 4 images prend quelques secondes. Mais j'aimerais mieux ne pas avoir à le refaire chaque fois que l'on fait des modifications dans le programme.
Modérateur
Salut,

Je ne vois pas de solution simple. Regarde du côté de fpdf et fpdi. tu peux surcharger le document. Scribus est un excellent logiciel de mise en page (d'ailleurs, je m'étonne du rendu que tu produis => mise au point du texte inexistante). Mais ce n'était peut-être pas la solution finale (le temps de réalisation).
Modifié par niuxe (09 Jun 2023 - 13:19)
J'en arrive à la même conclusion fpdf,
Scribus à la possibilités d'importer certains éléments depuis la base de données mais ca plus dans une optique de csv.

L'autre possibilités pour l'avenir, serais de créer un gabarit en html/css, et d'importer les textes via d du php en les affichant avec echo.
En sois la sortie du texte brut depuis la base de données n'est pas le plus complexe.

Vu que les dossiers du serveur du site ne sont pas fermés, il serais possible d'y poser les textes brut dans le dossier 2023-06-16 pour faire quelques testes ?
Modérateur
uniuc a écrit :

L'autre possibilités pour l'avenir, serais de créer un gabarit en html/css, et d'importer les textes via d du php en les affichant avec echo.
En sois la sortie du texte brut depuis la base de données n'est pas le plus complexe.


La solution annexe serait de faire une page html avec une css screen et print. Le but étant que les utilisateurs puissent lire le contenu (que ce soit en pdf ou en html, on s'en fout. C'est le contenu qui compte).

De nos jours, je crois qu'un pdf est plutôt orienté vers des documents plus officiels (factures, devis, contrats, etc.) . exemple : je vais dans mon espace de mon FAI et je souhaite consulter ma dernière facture. Je la vois et le contenu est édité en html. Je souhaite sauvegarder en local cette facture, je télécharge un pdf.

Dans ton exemple JP, ton document va rester que quelques jours. Fin juin, il n'aura plus raison d'être.
Modifié par niuxe (09 Jun 2023 - 13:43)
Merci de vos réponses

Ce que je déduis de vos réponses c’est que ma technique à base d’images est celle qui me convient le mieux. Ce n'est pas un problème, Scribus peut générer directement des images aussi bien que du PDF.

Le document en Scribus n’a pas besoin d’être très bien présenté. Je le fais en quelques minutes par des copier/coller des versions précédentes à l'exception de la couverture qui est la reproduction d'une affiche conçue par une professionnelle de la communication.
Pour le reste, tout ce qui compte c’est que les différentes parties tiennent sur les pages aux bons endroits.

J’en fait un pdf pour le transmettre à la personne qui va les imprimer. Ils sont distribués gratuitement à l’entrée dunconcert.
Permettre de les télécharger c’est éviter d’en imprimer trop et de passer du temps à les ramasser à la fin du concert avant de les jeter.
Modifié par PapyJP (10 Jun 2023 - 10:00)
Modérateur
Bonjour,

On peut mettre le pdf dans un iframe.

Exemple :
<body>
  <iframe src="programme.pdf"></iframe>
  <article>
    <header>
      <h1>Javier Busto</h1>
        ...
    </header>
    <section>
      ...
    </section>
  </article>
</body>

Amicalement,
Modérateur
Bonjour,

Ci-dessous un petit test complet avec pdf.js (https://mozilla.github.io/pdf.js/). Ça a l'air de marcher pas trop mal. Il suffit de remplacer les balises <img> de la page https://www.alma-musica.net/html/concerts/prog-texts.php?progID=Concert-2023-06-16 par une balise <div id="pdf_container"></div>, et un peu de js (ici une trentaine de lignes, mais on peut peut-être faire plus court).
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Programme</title> 
<style>
main
{
	width: 110mm;
	max-width: 98%;
	margin: 0 auto;
}
#pdf_container
{
	width: 100%;
}
#pdf_container canvas
{
	display: block;
	width: 100%;
	margin: 1em 0;
}
article
{
	text-align: center;
	border: 1px solid gray;
	border-radius: 0.5em;
	margin: 0.5em;
}
</style>
</head>
<body>
<main>
<div id="pdf_container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.7.107/pdf.min.js"></script>
<script>
(function(pdfName){
	const pdfJs = window['pdfjs-dist/build/pdf'];
	pdfJs.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.7.107/pdf.worker.min.js';
	function renderPage(page, container) {
		let viewport = page.getViewport({scale: 4}),
			canvas = document.createElement('canvas');
		canvas.height = viewport.height;
		canvas.width = viewport.width;
		container.appendChild(canvas);
		page.render({
			canvasContext: canvas.getContext('2d'),
			viewport: viewport
		});
	}
	function renderPDF(pdf, container) {
		container.textContent = '';
		for(let k = 1; k <= pdf.numPages; k++)
			pdf.getPage(k).then(page => {renderPage(page, container)});
	}
	function initPDF(pdfURL, container) {
		return pdfJs.getDocument(pdfURL).promise.then(pdf => {
			renderPDF(pdf, container);
		});
	}
	initPDF(pdfName, document.querySelector("#pdf_container"));})("2023-06-16/EProg-04.pdf");
</script>
<article>Javier Busto<br>...</article>
<article>Morten Lauridsen<br>...</article>
<article>Pietro Mussino<br>...</article>
</main>
</body>
</html>
Amicalement,
Meilleure solution
Merci pour cette réponse, ça correspond à ma question initiale et je garde cette solution sous le coude pour une prochaine fois.
Je savais que cette techno existait mais je n’avais pas trouvé comment on pouvait la mettre en œuvre.

En réfléchissant je me suis rendu compte que ce que je voulais faire c’est intégrer des pages générées par Scribus, peut importe que ce soit du pdf ou des images puisque Scribus génère les deux formats, et même plus car le format des images peut être du svg ce qui donne le résultat souhaité.
Prévenir un modérateur
Répondre au sujet
Aller à