Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Getting Lazy with Vue and PDFs
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Ross Kaffenberger
January 16, 2019
Programming
2
1.5k
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
Share
More Decks by Ross Kaffenberger
See All by Ross Kaffenberger
A Webpack Survival Guide for Rails Developers
rossta
1
2.7k
What I look for in a Junior Developer
rossta
2
1.1k
Progressive Web Apps on Rails
rossta
0
2.3k
Enumerable's Ugly Cousin - GORUCO Microtalk
rossta
0
410
Enumerator - Enumerable's Ugly Cousin
rossta
1
550
Recurring Events with Montrose
rossta
3
2k
Enumerable - How I Fell in Love with Ruby
rossta
20
4.7k
Create and Deploy an Ember App in 5 Minutes
rossta
7
3.7k
Other Decks in Programming
See All in Programming
Unicodeどうしてる? PHPから見たUnicode対応と他言語での対応についてのお伺い
youkidearitai
PRO
1
1k
2年のAppleウォレットパス開発の振り返り
muno92
PRO
0
190
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
gekko0114
2
410
Denoのセキュリティに関する仕組みの紹介 (toranoana.deno #23)
uki00a
0
270
ゆくKotlin くるRust
exoego
1
220
MDN Web Docs に日本語翻訳でコントリビュート
ohmori_yusuke
0
620
KIKI_MBSD Cybersecurity Challenges 2025
ikema
0
1.3k
TerraformとStrands AgentsでAmazon Bedrock AgentCoreのSSO認証付きエージェントを量産しよう!
neruneruo
4
2.6k
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
azukiazusa1
1
610
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
mackey0225
3
360
Grafana:建立系統全知視角的捷徑
blueswen
0
310
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
shibayu36
2
4.1k
Featured
See All Featured
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
170
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
230
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
270
The Art of Programming - Codeland 2020
erikaheidi
57
14k
Writing Fast Ruby
sferik
630
62k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
71
Chasing Engaging Ingredients in Design
codingconduct
0
110
jQuery: Nuts, Bolts and Bling
dougneiner
65
8.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
7.9k
Transcript
Ross Kaffenberger @rossta Getting Lazy with Vue and PDFs
Ross Kaffenberger @rossta Building a PDF Vue-er
#dadjokes
None
• ross kaffenberger @rossta
rossta.net/vue-pdfjs-demo
None
PDF.js fetching
None
PDF.js rendering
None
PDF.js in Vue
None
None
Problem: Large PDFs
•Lazy render: draw to canvas when visible •“Infinite” scroll: fetch
pages in batches
Iteration #1: Math!
None
None
None
None
None
None
None
None
Problem: Vue cannot watch $el properties
Manual work
None
None
None
None
Next iteration:
IntersectionObserver!
None
None
Advantages
•no $el property tracking •less code, fewer bugs •easier to
extend
Akryum/vue-observe-visibility
Lesson: Opt for Vue-friendliness
None
Lesson: Be curious and flexible
rossta/vue-pdfjs-demo
@rossta rossta.net/talks
[email protected]