Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting Lazy with Vue and PDFs

Getting Lazy with Vue and PDFs

I share the most important lessons learned while building a PDF Viewer in Vue.

B0169a78f851962058d63337ad0147d6?s=128

Ross Kaffenberger

January 16, 2019
Tweet

Transcript

  1. Ross Kaffenberger @rossta Getting Lazy with Vue and PDFs

  2. Ross Kaffenberger @rossta Building a PDF Vue-er

  3. #dadjokes

  4. None
  5. • ross kaffenberger @rossta

  6. rossta.net/vue-pdfjs-demo

  7. None
  8. PDF.js fetching

  9. None
  10. PDF.js rendering

  11. None
  12. PDF.js in Vue

  13. None
  14. None
  15. Problem: Large PDFs

  16. •Lazy render: draw to canvas when visible •“Infinite” scroll: fetch

    pages in batches
  17. Iteration #1: Math!

  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. Problem: Vue cannot watch $el properties

  27. Manual work

  28. None
  29. None
  30. None
  31. None
  32. Next iteration:

  33. IntersectionObserver!

  34. None
  35. None
  36. Advantages

  37. •no $el property tracking •less code, fewer bugs •easier to

    extend
  38. Akryum/vue-observe-visibility

  39. Lesson: Opt for Vue-friendliness

  40. None
  41. Lesson: Be curious and flexible

  42. rossta/vue-pdfjs-demo

  43. @rossta rossta.net/talks ross@rossta.net