Comment utiliser PDF.js dans votre projet

Cette fois, je vais vous montrer comment utiliser PDF.js dans le projet, et quelles sont les précautions à prendre pour utiliser PDF.js dans le projet. Ce qui suit est un cas pratique, jetons un coup d'œil.

Il était autrefois utilisé lors du développement d'un aperçu de la politique sur WeChat. Étant donné que le navigateur mobile Android ne prend pas en charge l'analyse des PDF, PDF.js a été utilisé pour analyser le PDF et l'afficher.

pdf.js est un prototype technique principalement utilisé pour afficher des documents PDF sur la plateforme HTML5 sans aucun support technique local.

Adresse de démonstration en ligne : http://mozilla.github.com/pdf.js/web/viewer.html

PDF.js peut être téléchargé à partir de l'adresse du site officiel : http:/ /mozilla.github.io/pdf.js/

La structure des répertoires après décompression est :

Le répertoire de construction est le fichier principal de PDF.js. .

Le répertoire web est le fichier de configuration et d'affichage de PDF.js.

viewer.html est responsable de l'affichage du PDF, et viewer.js est le fichier responsable de la configuration. Dans viewer.js :

où var DEFAULT_URL est le fichier PDF analysé par défaut et peut être remplacé.

Comment utiliser pdf.js (1) :

Pour une utilisation simple de l'affichage uniquement d'un fichier PDF, il vous suffit de configurer le chemin par défaut de

C'est bien, mais dans de nombreux cas, cette méthode ne répond pas aux besoins de développement.

Comment utiliser pdf.js (2) :

Passez ?file=test.pdf derrière la barre d'adresse pour finaliser la modification du chemin par défaut

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

Le test.pdf ici peut être considéré comme un chemin relatif vers viewer.html (le chemin absolu de l'ensemble du serveur fonctionnera également)

Utilisation de pdf.js Méthode (3) :

Modifier le chemin du PDF en attribuant une valeur à window.localStorage.pdf (après test, il est préférable d'écrire le chemin du protocole http)

Par exemple :

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

Comment utiliser pdf.js (4) :

Extrait de (exemple de site officiel) http:/ /mozilla.github.io/pdf.js/examples/

1 La page présente pdf.js.

2. Utilisez la méthode PDFJS.getDocument('helloworld.pdf') pour charger le fichier PDF à ouvrir.

3. Traitez les méthodes suivantes via PDFJS.getDocument('helloworld.pdf').then(function(pdf){// vous pouvez maintenant utiliser *pdf* ici}); 4. pdf.getPage(1).then(function(page){// vous pouvez maintenant utiliser *page* ici}); Chargez la première page du PDF

5 via l'exposition sur toile h5.

Exemple complet :

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);

Voir page par page en cliquant sur :

//引入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); 
});

Page :

js :

<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>

La fonction de ce plug-in est très puissante. Il existe de nombreux téléchargements (le téléchargement n'est pas disponible sur la version mobile) ou la fonction d'accès à la page si vous ne souhaitez pas que les clients la voient. dessus, vous pouvez aller sur viewer.html et modifier le correspondant. Le bouton peut être masqué ou supprimé

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); 
});

Point supplémentaire : la visionneuse consomme des ressources système lors de l'analyse et du rendu du PDF, en particulier des ressources CPU, je ne sais pas si. c'est à cause de la faible configuration de mon notebook. Lorsque la page est chargée. En attendant, le processus IE consomme 50 à 60 % des ressources CPU. En cliquant sur l'opération de rotation de page ou en modifiant la taille de la fenêtre d'IE, le spectateur devra réanalyser et restituer le PDF. Parfois, le déplacement d'une fenêtre de programme (comme un txt) la bloquant sur le front-end d'IE entraînera également un nouveau rendu, mais il n'est pas déclenché à chaque fois pour des raisons inconnues.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser le plug-in d'installation dans des projets pratiques

Utiliser vue2.0+boostrap dans le cas

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!