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

Getting Lazy with Vue and PDFs

Avatar for Ross Kaffenberger Ross Kaffenberger
January 16, 2019
Programming
1.5k
2

Getting Lazy with Vue and PDFs

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

Avatar for Ross Kaffenberger

Ross Kaffenberger

January 16, 2019

More Decks by Ross Kaffenberger

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

Other Decks in Programming

See All in Programming
PHPだって関数型したい 〜できること、できないこと〜 / fp-in-php
Avatar for jsoizo jsoizo
0
210
共通化で考えるべきは、実装より公開する型だった
Avatar for code-egg codeegg
0
250
PHP に部分適用が来るぞ！……ところで何それ？おいしいの？ #phpcon / phpcon-2026
Avatar for shogogg shogogg
0
240
【やさしく解説 設計編・中級 #4】ルールの寿命と、システムの年輪
Avatar for HideyukiKitao panda728
PRO
2
140
AWS CDK を「作」ってみた 〜フルスクラッチで見えた CDK の裏側〜 / aws-cdk-from-scratch
Avatar for k.goto gotok365
3
440
yield再入門 #phpcon
Avatar for hideki kinjyo o0h
PRO
0
500
関数型プログラミングのメリットって何だろう？
Avatar for わんこ(Wanko_IT) wanko_it
0
180
霧の中の代数的エフェクト
Avatar for funnycat funnyycat
1
400
LaravelLive Japan の裏方のすべて — 第188回 PHP勉強会＠東京 (2026-06-24)
Avatar for Suguru Oki / スー suguruooki
2
150
『コードを書く以外の』エンジニアリング〜課金基盤移行プロジェクト推進のためのTips4選
Avatar for yuriko yuriko1211
0
510
信頼性について考えてみる（SRE NEXT 2026 miniLT）
Avatar for hayama hayama17
0
200
Claude Opus 4.6以後の受託開発エンジニアの変化(Claude Code開発ノウハウ大公開スペシャルbyクラスメソッド)
Avatar for t-iida iidatakuma
1
790

Featured

See All Featured
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
260
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
9.7k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
170
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.7k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
118
120k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.9k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
350
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
180

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]