test.html 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. var pdfjsLib = window['pdfjs-dist/build/pdf'];
  2. //pdfjsLib.disableWorker = true;
  3. pdfjsLib.getDocument(url).then(function(pdf){
  4. var page_num = 1;
  5. pdf.getPage(page_num).then(function(page){
  6. var scale = 1.5;
  7. var viewport = page.getViewport(scale);
  8. var canvas = $('#the-canvas')[0];
  9. var context = canvas.getContext('2d');
  10. canvas.height = viewport.height;
  11. canvas.width = viewport.width;
  12. var canvasOffset = $(canvas).offset();
  13. var $textLayerDiv = $('#text-layer').css({
  14. height : viewport.height+'px',
  15. width : viewport.width+'px',
  16. top : canvasOffset.top,
  17. left : canvasOffset.left
  18. });
  19. page.render({
  20. canvasContext : context,
  21. viewport : viewport
  22. });
  23. page.getTextContent().then(function(textContent){
  24. console.log( textContent );
  25. var textLayer = new TextLayerBuilder({
  26. textLayerDiv : $textLayerDiv.get(0),
  27. pageIndex : page_num - 1,
  28. viewport : viewport
  29. });
  30. textLayer.setTextContent(textContent);
  31. textLayer.render();
  32. });
  33. });
  34. });
  35. var loadingTask = pdfjsLib.getDocument(url);
  36. loadingTask.promise.then(function(pdf) {
  37. console.log('PDF loaded');
  38. // Fetch the first page
  39. var pageNumber = 1;
  40. pdf.getPage(pageNumber).then(function(page) {
  41. console.log('Page loaded');
  42. var scale = 1.5;
  43. var viewport = page.getViewport({scale: scale});
  44. // Prepare canvas using PDF page dimensions
  45. var canvas = document.getElementById('the-canvas');
  46. var context = canvas.getContext('2d');
  47. canvas.height = viewport.height;
  48. canvas.width = viewport.width;
  49. // Render PDF page into canvas context
  50. var renderContext = {
  51. canvasContext: context,
  52. viewport: viewport
  53. };
  54. var renderTask = page.render(renderContext);
  55. renderTask.promise.then(function () {
  56. console.log('Page rendered');
  57. });
  58. });
  59. }, function (reason) {
  60. // PDF loading error
  61. console.error(reason);
  62. });