So verwenden Sie PDF.js in Ihrem Projekt

Dieses Mal zeige ich Ihnen, wie Sie PDF.js im Projekt verwenden und welche Vorsichtsmaßnahmen für die Verwendung von PDF.js im Projekt gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Es wurde einmal bei der Entwicklung einer Richtlinienvorschau auf WeChat verwendet. Da der Android-Mobilbrowser das Parsen von PDFs nicht unterstützt, wurde PDF.js verwendet, um das PDF zu parsen und anzuzeigen.

pdf.js ist ein technischer Prototyp, der hauptsächlich zur Anzeige von PDF-Dokumenten auf der HTML5-Plattform ohne lokale technische Unterstützung verwendet wird.

Online-Demo-Adresse: http://mozilla.github.com/pdf.js/web/viewer.html

PDF.js kann von der offiziellen Website-Adresse heruntergeladen werden: http:/ /mozilla.github.io/pdf.js/

Die Verzeichnisstruktur nach der Dekomprimierung ist:

Das Build-Verzeichnis ist die Kerndatei von PDF.js .

Das Webverzeichnis ist die Konfigurations- und Anzeigedatei von PDF.js.

viewer.html ist für die Anzeige von PDF verantwortlich, und viewer.js ist die Datei, die für die Konfiguration verantwortlich ist. In viewer.js:

wobei var DEFAULT_URL die standardmäßig analysierte PDF-Datei ist und ersetzt werden kann.

So verwenden Sie pdf.js (1):

Für die einfache Verwendung, bei der nur eine PDF-Datei angezeigt wird, müssen Sie nur den Standardpfad von

konfigurieren

Das ist in Ordnung, aber in vielen Fällen entspricht diese Methode nicht den Entwicklungsanforderungen.

So verwenden Sie pdf.js (2):

Geben Sie ?file=test.pdf hinter der Adressleiste ein, um die Änderung des Standardpfads abzuschließen

http://localhost:8080/pdfjs/web/viewer.html?file=test.pdf     //这种最好不要传输中文   具体我没用试过

Das test.pdf hier kann als relativer Pfad zu viewer.html verwendet werden (der absolute Pfad des gesamten Servers funktioniert auch)

Verwendung von pdf.js Methode (3):

Ändern Sie den Pfad der PDF, indem Sie window.localStorage.pdf einen Wert zuweisen (nach dem Test schreiben Sie am besten den Pfad des http-Protokolls)

Zum Beispiel:

window.localStorage.pdf= 'http://localhost:8080/pdf/20140620/000000091534588.pdf';
window.location.href=basePath+"jsTool/openPDF/web/viewer.html";

So verwenden Sie pdf.js (4):

Auszug aus (offizielles Website-Beispiel) http://mozilla .github.io/pdf.js/examples/

1. Die Seite stellt pdf.js vor.

2. Verwenden Sie die Methode PDFJS.getDocument('helloworld.pdf'), um die zu öffnende PDF-Datei zu laden.

3. Verarbeiten Sie nachfolgende Methoden über PDFJS.getDocument('helloworld.pdf').then(function(pdf){// Sie können jetzt *pdf* hier verwenden}); 4. pdf.getPage(1).then(function(page){// Sie können jetzt *page* hier verwenden}); Laden Sie die erste Seite von PDF

5.

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; 
 
var renderContext = { 
 canvasContext: context, 
 viewport: viewport 
}; 
page.render(renderContext);

Vollständiges Beispiel:

//引入pdf.js之后 
var url = '//cdn.mozilla.net/pdfjs/helloworld.pdf'; 
//加载核心文件 
PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js'; 
 
var loadingTask = PDFJS.getDocument(url); 
loadingTask.promise.then(function(pdf) { 
 console.log('PDF loaded'); 
  
 var pageNumber = 1; 
 pdf.getPage(pageNumber).then(function(page) { 
  console.log('Page loaded'); 
   
  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; 
 
  var renderContext = { 
   canvasContext: context, 
   viewport: viewport 
  }; 
  var renderTask = page.render(renderContext); 
  renderTask.then(function () { 
   console.log('Page rendered'); 
  }); 
 }); 
}, function (reason) { 
 console.error(reason); 
});

Klicken Sie, um Seite für Seite anzuzeigen:

Seite:

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script> 
 
<h1>PDF.js Previous/Next example</h1> 
 
<p> 
 <button id="prev">Previous</button> 
 <button id="next">Next</button> 
    
 <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span> 
</p> 
 
<canvas id="the-canvas"></canvas>

js:

var url = '//cdn.mozilla.net/pdfjs/tracemonkey.pdf'; 
 
PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js'; 
 
var pdfDoc = null, 
  pageNum = 1, 
  pageRendering = false, 
  pageNumPending = null, 
  scale = 0.8, 
  canvas = document.getElementById('the-canvas'), 
  ctx = canvas.getContext('2d'); 
 
function renderPage(num) { 
 pageRendering = true; 
 pdfDoc.getPage(num).then(function(page) { 
  var viewport = page.getViewport(scale); 
  canvas.height = viewport.height; 
  canvas.width = viewport.width; 
 
  var renderContext = { 
   canvasContext: ctx, 
   viewport: viewport 
  }; 
  var renderTask = page.render(renderContext); 
 
  renderTask.promise.then(function() { 
   pageRendering = false; 
   if (pageNumPending !== null) { 
    // New page rendering is pending 
    renderPage(pageNumPending); 
    pageNumPending = null; 
   } 
  }); 
 }); 
 
 document.getElementById('page_num').textContent = pageNum; 
} 
 
function queueRenderPage(num) { 
 if (pageRendering) { 
  pageNumPending = num; 
 } else { 
  renderPage(num); 
 } 
} 
 
function onPrevPage() { 
 if (pageNum <= 1) { 
  return; 
 } 
 pageNum--; 
 queueRenderPage(pageNum); 
} 
document.getElementById(&#39;prev&#39;).addEventListener(&#39;click&#39;, onPrevPage); 
 
function onNextPage() { 
 if (pageNum >= pdfDoc.numPages) { 
  return; 
 } 
 pageNum++; 
 queueRenderPage(pageNum); 
} 
document.getElementById('next').addEventListener('click', onNextPage); 
 
PDFJS.getDocument(url).then(function(pdfDoc_) { 
 pdfDoc = pdfDoc_; 
 document.getElementById('page_count').textContent = pdfDoc.numPages; 
 
 renderPage(pageNum); 
});

Die Funktion Dieses Plug-in ist sehr leistungsfähig. Es gibt viele Downloads (Downloads sind auf Mobiltelefonen nicht verfügbar) oder die Funktion, zur Seite zu springen. Wenn Sie nicht möchten, dass Kunden es sehen, können Sie die entsprechende Schaltfläche ausblenden oder löschen in viewer.html

Zusätzlicher Punkt: Wenn der Viewer PDF analysiert und rendert, verbraucht er Systemressourcen, insbesondere CPU-Ressourcen. Ich weiß nicht, ob das daran liegt, dass meine Notebook-Konfiguration niedrig ist Beim Warten verbraucht der IE-Prozess 50–60 % der CPU-Ressourcen und geht verloren. Wenn Sie auf den Umblättervorgang klicken oder die Fenstergröße des IE ändern, wird der Betrachter dazu veranlasst, die PDF-Datei erneut zu analysieren und zu rendern. Manchmal führt das Verschieben eines Programmfensters (z. B. eine TXT-Datei), das es im IE-Frontend blockiert, ebenfalls zu einem erneuten Rendern, wird jedoch aus unbekannten Gründen nicht jedes Mal ausgelöst.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie das Installations-Plug-in in praktischen Projekten

Verwendung von vue2.0+boostrap im Fall

Das obige ist der detaillierte Inhalt vonSo verwenden Sie PDF.js in Ihrem Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!