Konvertieren von PDF-Datei in Bild in Javascript/Jquery

Question

Wir haben ein PDF-Dokument und wir müssen eine Miniaturansicht des Dokuments anzeigen. Die einzige Möglichkeit besteht darin, das PDF-Dokument in eine Bilddatei zu konvertieren und das Bild als Miniaturansicht anzuzeigen.

Kann mir jemand helfen, die PDF in Bilddatei zu konvertieren? Gibt es ein Plugin? Danke

Answer 1

Um eine PDF in img zu konvertieren, können Sie JS nicht verwenden (außer für nur anzeigen).

Sie müssen eine Bibliothek wie ImageMagick (PHP) oder Ghostscript (Befehlszeile) verwenden.

Besuchen GhostScript

Ein bisschen hart, aber extrem leistungsfähig.

Answer 2

Sie können ImageMagick PHP API für diesen Zweck verwenden. Hier habe ich Beispielcode für Ihre Referenz enthalten.

<?php 
    $location = "/usr/local/bin/convert"; // Binaries Location 
    $name  = "myfile.pdf"; //Source PDF File 
    $nameto  = "myfile.jpg"; // Output File 
    $convert = $location . " " . $name . " ".$nameto; // Command creating 
    exec ($convert); // Execution of complete command. 

    echo "PDF converted to JPEG!!"; 
    ?> 

Auch refer this page, finden Sie weitere Informationen

Answer 3

Verwendung

<script src="@Url.Content("~/Scripts/pdf.js")" type="text/javascript"></script> 
 
<script src="@Url.Content("~/Scripts/pdf.worker.js")" type="text/javascript"></script> 
 
<script src="@(Url.Content("~/Scripts/common.js"))"></script> 
 

 

 
PDFJS.disableWorker = true; 
 
        if (filesName[i].name.trim().substring(filesName[i].name.trim().lastIndexOf('.')).toLowerCase()==".pdf") { 
 
         PDFJS.getDocument(fileVal[i]).then(function getPdfHelloWorld(pdf) { 
 
          debugger; 
 
          pdf.getPage(pageNoForConversion).then(function getPageHelloWorld(page) { 
 
           debugger; 
 
           try { 
 
            var scale = 1.5; 
 
            var viewport = page.getViewport(scale); 
 
            var canvas = document.getElementById('the-canvas'); 
 
            var context = canvas.getContext('2d'); 
 
            canvas.height = viewport.height; 
 
            canvas.width = viewport.width; 
 
            page.render({ canvasContext: context, viewport: viewport }).then(function() { 
 
             passDataToGenerateGrid(i); 
 
             //setTimeout(passDataToGenerateGrid(i), 50000); 
 
            }); 
 
           } catch (e) { 
 

 
           } 
 
          }).then(function() { 
 

 
          });