PDF statt Download mit PDF ansehen js

Question

In meiner Seite versuche ich, eine Miniaturansicht meiner PDF mit PDF JS anzuzeigen und es funktioniert auf lokaler, aber wenn ich meinen Code auf meinem Webserver hochladen, wird die PDF-Datei automatisch heruntergeladen .

In meinem lokalen:

Code:

$(function() { 

     var filePath = "http://example.com/public/uploads/docs/Document_One_1.pdf"; 

     function Num(num) { 
      var num = num; 

      return function() { 
       return num; 
      } 
     }; 

     function renderPDF(url, canvasContainer, options) { 
      var options = options || { 
        scale: 1.1 
       },   
       func, 
       pdfDoc, 
       def = $.Deferred(), 
       promise = $.Deferred().resolve().promise(),   
       width, 
       height, 
       makeRunner = function(func, args) { 
        return function() { 
         return func.call(null, args); 
        }; 
       }; 

      function renderPage(num) {   
       var def = $.Deferred(), 
        currPageNum = new Num(num); 
       pdfDoc.getPage(currPageNum()).then(function(page) { 
        var viewport = page.getViewport(options.scale); 
        var canvas = document.createElement("canvas"); 
        canvas.setAttribute("id","pdfCanvas"+num); 
        canvas.setAttribute("onclick","popCanvas('{{url('/dashboard/showcanvas')}}','"+document.getElementById('pdfPath').innerHTML+"','"+num+"');"); 
        var ctx = canvas.getContext('2d'); 
        var renderContext = { 
         canvasContext: ctx, 
         viewport: viewport 
        }; 

        if(currPageNum() === 1) {     
         height = viewport.height; 
         width = viewport.width; 
        } 

        canvas.height = height; 
        canvas.width = width; 

        canvasContainer.appendChild(canvas); 

        page.render(renderContext).then(function() {           
         def.resolve(); 
        }); 
       }) 

       return def.promise(); 
      } 

      function renderPages(data) { 
       pdfDoc = data; 

       var pagesCount = pdfDoc.numPages; 
       for (var i = 1; i <= pagesCount; i++) { 
        func = renderPage; 
        promise = promise.then(makeRunner(func, i)); 
       } 
      } 

      PDFJS.disableWorker = true; 
      PDFJS.getDocument(url).then(renderPages);  
     }; 

     var body = document.getElementById("bodyofpdf"); 
     renderPDF(filePath, body); 
    }); 

Wenn ich die Filepath URL zu ändern, zum Beispiel: "https://www.tutorialspoint.com/bootstrap/bootstrap_tutorial.pdf", es funktioniert.

Kann mir jemand helfen ??

Entschuldigung für mein schlechtes Englisch.

Answer 1

Wenn Sie Laravel verwenden, können Sie das Verhalten der Routen, einschließlich der zu einem .pdf steuern. Für lokale Dateien haben Browser standardmäßig ein anderes Verhalten als für keine lokalen Dateien.

Ich habe viel PDF.js verwendet und ich weiß nicht, warum verbinden Sie den Benutzer direkt mit der Datei, könnten Sie wie eine Ansichtsseite erstellen, wo es einen Parameter wie die ID oder den Namen des Buches erhält und dann laden Sie es mit pdf.js. Wenn Sie eine URL mit einer Dateiendung verwenden, werden Sie den Browser wahrscheinlich verwirren.

yourpage.com/books/view/{id_book}