Existe-t-il de toute façon un fichier pdf/image pouvant être prévisualisé/affiché automatiquement dans l'iframe avant de le télécharger sans avoir besoin de cliquer sur le bouton de prévisualisation ?

function PreviewImage() {
    pdffile=document.getElementById("uploadPDF").files[0];
    pdffile_url=URL.createObjectURL(pdffile);
    $('#viewer').attr('src',pdffile_url);
}
<form name=f1 method=post enctype="multipart/form-data">
    <input id="uploadPDF" type="file" name="file"/>&nbsp;
    <input type="button" value="Preview" onclick="PreviewImage();" />

    <div style="clear:both">
       <iframe id="viewer" frameborder="0" scrolling="no" width="300" height="200"></iframe>
    </div>
    <button type="submit" name="submit" class="btn btn-success btn-sm">
      <i class="fa fa-dot-circle-o"></i> Add
    </button>&emsp;
</form>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
6
Ichida 15 mars 2019 à 09:21

3 réponses

Meilleure réponse

Vous pouvez utiliser la bibliothèque pdf javascript comme celle-ci (j'utilise pdf.js) à partir de ce lien : https://mozilla.github.io/pdf.js/examples /index.html#interactive-examples

// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';

$("#myPdf").on("change", function(e){
	var file = e.target.files[0]
	if(file.type == "application/pdf"){
		var fileReader = new FileReader();  
		fileReader.onload = function() {
			var pdfData = new Uint8Array(this.result);
			// Using DocumentInitParameters object to load binary data.
			var loadingTask = pdfjsLib.getDocument({data: pdfData});
			loadingTask.promise.then(function(pdf) {
			  console.log('PDF loaded');
			  
			  // Fetch the first page
			  var pageNumber = 1;
			  pdf.getPage(pageNumber).then(function(page) {
				console.log('Page loaded');
				
				var scale = 1.5;
				var viewport = page.getViewport({scale: scale});

				// Prepare canvas using PDF page dimensions
				var canvas = $("#pdfViewer")[0];
				var context = canvas.getContext('2d');
				canvas.height = viewport.height;
				canvas.width = viewport.width;

				// Render PDF page into canvas context
				var renderContext = {
				  canvasContext: context,
				  viewport: viewport
				};
				var renderTask = page.render(renderContext);
				renderTask.promise.then(function () {
				  console.log('Page rendered');
				});
			  });
			}, function (reason) {
			  // PDF loading error
			  console.error(reason);
			});
		};
		fileReader.readAsArrayBuffer(file);
	}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>

<input type="file" id="myPdf" /><br>
<canvas id="pdfViewer"></canvas>
10
scott6 15 mars 2019 à 07:05

Pdf.js et pdf.worker.js sont libres d'utilisation. ou toute restriction. je veux utiliser à des fins commerciales

-1
MAYUR SANCHETI 3 déc. 2020 à 07:06

Vous avez une entrée, vérifiez le onChange puis faites un

 src= URL.createObjectURL(event.target.files[0])

Pour créer une URL : puis l'utiliser pour prévisualiser avec l'intégration

<embed  
       src=src
       width="250"
       height="200">

En savoir plus ici https://developer.mozilla.org/en- US/docs/Web/HTML/Element/embed

7
Steve Phuc 7 oct. 2019 à 11:30