pdf2svg.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. /* Copyright 2014 Mozilla Foundation
  2. *
  3. * Licensed under the Apache License, Version 2.0 (the "License");
  4. * you may not use this file except in compliance with the License.
  5. * You may obtain a copy of the License at
  6. *
  7. * http://www.apache.org/licenses/LICENSE-2.0
  8. *
  9. * Unless required by applicable law or agreed to in writing, software
  10. * distributed under the License is distributed on an "AS IS" BASIS,
  11. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. * See the License for the specific language governing permissions and
  13. * limitations under the License.
  14. */
  15. const PDF_PATH = "../../web/compressed.tracemonkey-pldi-09.pdf";
  16. const PAGE_NUMBER = 1;
  17. const PAGE_SCALE = 1.5;
  18. const SVG_NS = "http://www.w3.org/2000/svg";
  19. pdfjsLib.GlobalWorkerOptions.workerSrc =
  20. "../../node_modules/pdfjs-dist/build/pdf.worker.js";
  21. function buildSVG(viewport, textContent) {
  22. // Building SVG with size of the viewport (for simplicity)
  23. const svg = document.createElementNS(SVG_NS, "svg:svg");
  24. svg.setAttribute("width", viewport.width + "px");
  25. svg.setAttribute("height", viewport.height + "px");
  26. // items are transformed to have 1px font size
  27. svg.setAttribute("font-size", 1);
  28. // processing all items
  29. textContent.items.forEach(function (textItem) {
  30. // we have to take in account viewport transform, which includes scale,
  31. // rotation and Y-axis flip, and not forgetting to flip text.
  32. const tx = pdfjsLib.Util.transform(
  33. pdfjsLib.Util.transform(viewport.transform, textItem.transform),
  34. [1, 0, 0, -1, 0, 0]
  35. );
  36. const style = textContent.styles[textItem.fontName];
  37. // adding text element
  38. const text = document.createElementNS(SVG_NS, "svg:text");
  39. text.setAttribute("transform", "matrix(" + tx.join(" ") + ")");
  40. text.setAttribute("font-family", style.fontFamily);
  41. text.textContent = textItem.str;
  42. svg.append(text);
  43. });
  44. return svg;
  45. }
  46. async function pageLoaded() {
  47. // Loading document and page text content
  48. const loadingTask = pdfjsLib.getDocument({ url: PDF_PATH });
  49. const pdfDocument = await loadingTask.promise;
  50. const page = await pdfDocument.getPage(PAGE_NUMBER);
  51. const viewport = page.getViewport({ scale: PAGE_SCALE });
  52. const textContent = await page.getTextContent();
  53. // building SVG and adding that to the DOM
  54. const svg = buildSVG(viewport, textContent);
  55. document.getElementById("pageContainer").append(svg);
  56. // Release page resources.
  57. page.cleanup();
  58. }
  59. document.addEventListener("DOMContentLoaded", function () {
  60. if (typeof pdfjsLib === "undefined") {
  61. // eslint-disable-next-line no-alert
  62. alert("Please build the pdfjs-dist library using\n `gulp dist-install`");
  63. return;
  64. }
  65. pageLoaded();
  66. });