Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Getting Lazy with Vue and PDFs

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Ross Kaffenberger Ross Kaffenberger
January 16, 2019
Programming
1.6k
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
500
Enumerator - Enumerable's Ugly Cousin
Avatar for Ross Kaffenberger rossta
1
610
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
パズルゲームの作り方 / how to make puzzle games
Avatar for kaityo256 kaityo256
PRO
2
240
wkhtmltopdfの次どうするか問題2026
Avatar for Shinichi Maeshima willnet
2
1.8k
MVNOの申込からeSIM開通までをiOSアプリでつなぐ- 本人確認・MNP・通信事業者基盤をまたぐ実装
Avatar for Sato Takeshi satotakeshi
0
480
Snowflakeで業務アプリを作ろう。 Snowflakeのアプリ機能解説&実践ガイド
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
2
300
スマート反転とウェブアクセシビリティ
Avatar for KAMIHARA Takumi camiha
0
210
選挙速報を多くのユーザーへ 届ける Live Activities 設計
Avatar for kengo saito hamayokokuririn
0
170
個人開発基盤をまるごとCloudflareに引っ越して爆速で総合的体験を向上させた話
Avatar for Tsubasa SEKIGUCHI tinykitten
0
210
大喜利で理解するLLM as a Judge / Understanding LLM-as-a-Judge through Ogiri
Avatar for rockname rockname
0
160
SREの越境 / SRE Collaboration
Avatar for y-ohgi y0hgi
2
280
【高い買い物LT会】初任給で話題の国産フィジカルAIを買った話
Avatar for 赤神青空 akagami
PRO
0
170
ハーネス設計入門 〜 基礎知識の整理から実務へのステップアップ 〜
Avatar for kinopee kinopeee
18
17k
[2026-09-26]空論ジェネリックプロセス～テスト資産とAIで紡ぐ、再現可能なパフォーマンスチューニングの話～
Avatar for tosite tosite
0
110

Featured

See All Featured
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
390
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
490
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.7k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
440
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
460
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.6k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
600
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
42k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
25k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
10
1.1k

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]