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

Getting Lazy with Vue and PDFs

Ross Kaffenberger
January 16, 2019
Programming
2
1.3k

Getting Lazy with Vue and PDFs

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

Ross Kaffenberger

January 16, 2019
Tweet

More Decks by Ross Kaffenberger

See All by Ross Kaffenberger
A Webpack Survival Guide for Rails Developers
rossta
1
2.4k
What I look for in a Junior Developer
rossta
2
1k
Progressive Web Apps on Rails
rossta
0
2.2k
Enumerable's Ugly Cousin - GORUCO Microtalk
rossta
0
340
Enumerator - Enumerable's Ugly Cousin
rossta
1
490
Recurring Events with Montrose
rossta
3
1.9k
Enumerable - How I Fell in Love with Ruby
rossta
20
4.6k
Create and Deploy an Ember App in 5 Minutes
rossta
7
3.7k

Other Decks in Programming

See All in Programming
Bedrock×MCPで社内ブログ執筆文化を育てたい！
har1101
6
960
PHPで書いたAPIをGoに書き換えてみた 〜パフォーマンス改善の可能性を探る実験レポート〜
koguuum
0
150
フロントエンドテストの育て方
quramy
11
3k
タイムゾーンの奥地は思ったよりも闇深いかもしれない
suguruooki
1
610
Java 24まとめ / Java 24 summary
kishida
3
500
リアルタイムレイトレーシング + ニューラルレンダリング簡単紹介 / Real-Time Ray Tracing & Neural Rendering: A Quick Introduction (2025)
shocker_0x15
1
300
AHC045_解説
shun_pi
0
520
ComposeでWebアプリを作る技術
tbsten
0
100
Develop Faster With FrankenPHP
dunglas
2
3.2k
「”誤った使い方をすることが困難”な設計」で良いコードの基礎を固めよう / phpcon-odawara-2025
taniguhey
0
130
CRE Meetup！ユーザー信頼性を支えるエンジニアリング実践例の発表資料です
tmnb
0
640
Deoptimization: How YJIT Speeds Up Ruby by Slowing Down / RubyKaigi 2025
k0kubun
0
710

Featured

See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
We Have a Design System, Now What?
morganepeng
52
7.5k
Being A Developer After 40
akosma
91
590k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Become a Pro
speakerdeck
PRO
27
5.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
A designer walks into a library…
pauljervisheath
205
24k
Building Adaptive Systems
keathley
41
2.5k

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 [email protected]