Question

Ich hätte gerne einen Link, der ein Bild/PDF im Browser öffnet und nachdem es geladen ist, zeige einen Optionsdialog, um es herunterzuladen. Ist es möglich?

meine aktuelle Anker:

echo "<a href='".base_url()."assets/uploads/".$record->file_upload.".".substr($record->original_name, -3)."' id='txt_upl' download>"; 
echo $record->original_name; 
echo "</a>"; 

Answer 1

Ich fand diese Pdf.js Libary, vielleicht ist das, was Sie suchen:

http://mozilla.github.io/pdf.js/getting_started/

Answer 2

Sie müssen sich für eine JavaScript-Bibliothek verwenden Parsen und Rendern von PDFs. Sie können pdf.js für diesen Zweck verwenden.

Überblick über, was Sie tun müssen:

• Pdf.js Bibliothek zu Beginn Ihrer Seite
• den pdf-Download-Link auf der Seite halten hinzufügen, aber es versteckt
• Last machen und macht das pdf mit pdf.js nach dem übergeben der pdf URL dazu.
• pdf.js gibt promises zurück, damit Sie nach dem Laden oder Rendern der PDF-Datei zusätzliche Daten eingeben können.
• Jetzt zeigen Sie den Download-Link.

gab ich ein Beispiel dafür, wie Pdf.js zu verwenden und wie es wieder Versprechungen (beachten Sie die Konsolenprotokolle nach ‚run-Code-Snippet‘ klicken)

Ich habe auch einen Kommentar in JS-Code hinzugefügt, wo Sie kann den zusätzlichen Code hinzufügen, um den Download-Link anzuzeigen.

var url = '//cdn.mozilla.net/pdfjs/helloworld.pdf'; 
 
//load the pdf 
 
var loadingTask = PDFJS.getDocument(url); 
 
loadingTask.promise.then(function(pdf) { 
 
    console.log('PDF loaded'); 
 
    //load the page 
 
    var pageNumber = 1; 
 
    pdf.getPage(pageNumber).then(function(page) { 
 
    console.log('Page loaded'); 
 
    var scale = .5; 
 
    var viewport = page.getViewport(scale); 
 
    // Prepare canvas using PDF page dimensions 
 
    var canvas = document.getElementById('the-canvas'); 
 
    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.then(function() { 
 
     console.log('Page rendered. changing the visibility of download link'); 
 
     //====================================================================== 
 
     //SO NOW THE PDF IS LOADED AND RENDERED. HERE YOU NEED TO ADD EXTRA JAVASCRIPT CODE TO SHOW THE DOWNLOAD LINK 
 
     document.getElementById("dlink").style.visibility = "visible"; 
 
     //====================================================================== 
 
    }); 
 
    }); 
 
}, function (reason) { 
 
    // PDF loading error 
 
    console.error(reason); 
 
});

#the-canvas { 
 
    border:1px solid black; 
 
} 
 
#dlink { 
 
    visibility:hidden; 
 
}

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script> 
 
<canvas id="the-canvas"></canvas> 
 
<br> 
 
<a href="//cdn.mozilla.net/pdfjs/helloworld.pdf" id="dlink" download>Download</a>