├── .circleci ├── config.yml └── deploy.sh ├── .env ├── .gitignore ├── .nvmrc ├── LICENSE ├── README.md ├── babel.config.js ├── bin └── rake ├── package.json ├── public ├── favicon.ico └── index.html ├── screenshot-pdf-viewer.png ├── src ├── App.vue ├── assets │ ├── icon-download.svg │ ├── icon-expand.svg │ ├── icon-preview.svg │ ├── icon-print.svg │ ├── icon-shrink.svg │ ├── icon-zoom-in.svg │ ├── icon-zoom-out.svg │ └── logo.png ├── components │ ├── PDFData.vue │ ├── PDFDocument.vue │ ├── PDFPage.vue │ ├── PDFPaginator.vue │ ├── PDFPreview.vue │ ├── PDFThumbnail.vue │ ├── PDFUploader.vue │ ├── PDFViewer.vue │ ├── PDFZoom.vue │ ├── ScrollingDocument.vue │ └── ScrollingPage.vue ├── directives │ ├── scroll.js │ └── visible.js ├── main.js └── utils │ └── constants.js ├── vue.config.js └── yarn.lock /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | # This configuration was automatically generated from a CircleCI 1.0 config. 2 | version: 2 3 | jobs: 4 | build: 5 | docker: 6 | - image: circleci/node:8.11.2 7 | parallelism: 1 8 | environment: 9 | WEBPACK_PUBLIC_PATH: "/vue-pdfjs-demo/" 10 | working_directory: ~/rossta/vue-pdfjs-demo 11 | steps: 12 | - checkout 13 | - attach_workspace: 14 | at: ~/rossta/vue-pdfjs-demo 15 | - restore_cache: 16 | key: v1-yarn-{{ checksum "yarn.lock" }} 17 | - run: yarn install 18 | - save_cache: 19 | key: v1-yarn-{{ checksum "yarn.lock" }} 20 | paths: 21 | - ./node_modules 22 | - run: yarn build 23 | - persist_to_workspace: 24 | root: . 25 | paths: dist 26 | 27 | deploy: 28 | docker: 29 | - image: circleci/node:8.11.2 30 | parallelism: 1 31 | working_directory: ~/rossta/vue-pdfjs-demo 32 | steps: 33 | - checkout 34 | - attach_workspace: 35 | at: ~/rossta/vue-pdfjs-demo 36 | - run: ./.circleci/deploy.sh 37 | 38 | workflows: 39 | version: 2 40 | build-and-deploy: 41 | jobs: 42 | - build: 43 | filters: 44 | branches: 45 | ignore: gh-pages 46 | - deploy: 47 | requires: 48 | - build 49 | filters: 50 | branches: 51 | only: master 52 | -------------------------------------------------------------------------------- /.circleci/deploy.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | CWD=`pwd` 4 | BRANCH=gh-pages 5 | 6 | # Clone Pages repository 7 | cd /tmp 8 | git clone $CIRCLE_REPOSITORY_URL dist 9 | 10 | cd dist && git checkout -b $BRANCH origin/$BRANCH 11 | 12 | git rm -rf . 13 | 14 | cp -r $CWD/dist/* /tmp/dist 15 | cp -r $CWD/.circleci /tmp/dist 16 | 17 | cd /tmp/dist 18 | 19 | git config --global user.email "circleci@circleci.com" 20 | git config --global user.name "CircleCI" 21 | 22 | git add . 23 | 24 | git commit -m "Site updated to $(git log --pretty="%h" -n1)" 25 | 26 | git push -f origin $BRANCH 27 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | VUE_APP_PDF_URL=https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | build/ 23 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 8 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Ross Kaffenberger 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue PDF.js Demo 2 | 3 | This project demonstrates how a simple PDF viewer could be implemented using Vue and PDF.js. This is not a fully-featured PDF document viewer with sophisticated controls, but could serve as the basis for one. 4 | 5 | [![https://rossta.net/vue-pdfjs-demo](./screenshot-pdf-viewer.png)](https://rossta.net/vue-pdfjs-demo) 6 | 7 | To learn more, checkout [the series of posts](https://rossta.net/blog/series/pdf-viewer.html) describing how this project was implemented. 8 | 1. [Basic page rendering](https://rossta.net/blog/building-a-pdf-viewer-with-vue-part-1.html) 9 | 1. [Fetching and rendering lazily](https://rossta.net/blog/building-a-pdf-viewer-with-vue-part-2.html) 10 | 1. [Extracting a data component](https://rossta.net/blog/extracting-a-data-component-in-vue.html) 11 | 1. [Refactoring to nested abstract components](https://rossta.net/blog/refactoring-to-nested-abstract-components-vuejs-pdf-viewer.html) 12 | 13 | ## Setup 14 | 15 | To run the project locally: 16 | 17 | ``` 18 | $ git clone https://github.com/rossta/vue-pdfjs-demo 19 | $ cd vue-pdfjs-demo 20 | $ yarn install 21 | $ yarn serve 22 | ``` 23 | 24 | ## Documentation 25 | 26 | * [Vue.js](https://vuejs.org) 27 | * [PDF.js](https://mozilla.github.io/pdf.js/) 28 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } -------------------------------------------------------------------------------- /bin/rake: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | # frozen_string_literal: true 3 | 4 | # 5 | # This file was generated by Bundler. 6 | # 7 | # The application 'rake' is installed as part of a gem, and 8 | # this file is here to facilitate running it. 9 | # 10 | 11 | bundle_binstub = File.expand_path("../bundle", __FILE__) 12 | load(bundle_binstub) if File.file?(bundle_binstub) 13 | 14 | require "pathname" 15 | ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", 16 | Pathname.new(__FILE__).realpath) 17 | 18 | require "rubygems" 19 | require "bundler/setup" 20 | 21 | load Gem.bin_path("rake", "rake") 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-pdfjs-demo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve --open", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "debug": "^3.2.6", 12 | "filestack-js": "^0.11.4", 13 | "intersection-observer": "^0.5.1", 14 | "lodash": "^4.17.11", 15 | "pdfjs-dist": "^2.0.943", 16 | "vue": "^2.6.3" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "^3.4.0", 20 | "@vue/cli-plugin-eslint": "^3.4.0", 21 | "@vue/cli-service": "^3.4.0", 22 | "eslint-plugin-prettier": "^2.6.0", 23 | "vue-svg-loader": "^0.5.0", 24 | "vue-template-compiler": "^2.6.3" 25 | }, 26 | "babel": { 27 | "presets": [ 28 | "@vue/app" 29 | ] 30 | }, 31 | "eslintConfig": { 32 | "root": true, 33 | "env": { 34 | "node": true 35 | }, 36 | "extends": [ 37 | "plugin:vue/essential", 38 | "eslint:recommended" 39 | ], 40 | "rules": {}, 41 | "parserOptions": { 42 | "parser": "babel-eslint" 43 | } 44 | }, 45 | "postcss": { 46 | "plugins": { 47 | "autoprefixer": {} 48 | } 49 | }, 50 | "browserslist": [ 51 | "> 1%", 52 | "last 2 versions", 53 | "not ie <= 8" 54 | ] 55 | } 56 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rossta/vue-pdfjs-demo/0ba221c08a36582cddac38bbfd19003b01f5930d/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-pdfjs-demo 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /screenshot-pdf-viewer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rossta/vue-pdfjs-demo/0ba221c08a36582cddac38bbfd19003b01f5930d/screenshot-pdf-viewer.png -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 51 | 52 | 114 | -------------------------------------------------------------------------------- /src/assets/icon-download.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon-expand.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon-preview.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon-print.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon-shrink.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon-zoom-in.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon-zoom-out.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rossta/vue-pdfjs-demo/0ba221c08a36582cddac38bbfd19003b01f5930d/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/PDFData.vue: -------------------------------------------------------------------------------- 1 | 131 | -------------------------------------------------------------------------------- /src/components/PDFDocument.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 156 | 157 | 179 | -------------------------------------------------------------------------------- /src/components/PDFPage.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 155 | 161 | -------------------------------------------------------------------------------- /src/components/PDFPaginator.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 38 | 39 | 49 | -------------------------------------------------------------------------------- /src/components/PDFPreview.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 71 | 72 | 94 | -------------------------------------------------------------------------------- /src/components/PDFThumbnail.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 146 | 147 | 198 | -------------------------------------------------------------------------------- /src/components/PDFUploader.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 87 | 88 | 124 | -------------------------------------------------------------------------------- /src/components/PDFViewer.vue: -------------------------------------------------------------------------------- 1 | 51 | 52 | 136 | 137 | 179 | -------------------------------------------------------------------------------- /src/components/PDFZoom.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 66 | 67 | 82 | -------------------------------------------------------------------------------- /src/components/ScrollingDocument.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 109 | -------------------------------------------------------------------------------- /src/components/ScrollingPage.vue: -------------------------------------------------------------------------------- 1 | 98 | -------------------------------------------------------------------------------- /src/directives/scroll.js: -------------------------------------------------------------------------------- 1 | import throttle from 'lodash/throttle'; 2 | 3 | function inserted(el, binding) { 4 | const callback = binding.value; 5 | if (binding.modifiers.immediate) { 6 | callback(); 7 | } 8 | const throttledScroll = throttle(callback, 300); 9 | el.addEventListener('scroll', throttledScroll, true); 10 | } 11 | 12 | export default { 13 | inserted, 14 | }; 15 | -------------------------------------------------------------------------------- /src/directives/visible.js: -------------------------------------------------------------------------------- 1 | import 'intersection-observer' 2 | import debug from "debug" 3 | const log = debug("app:directives/visible") 4 | 5 | const instances = new WeakMap(); 6 | 7 | function createObserver(el, vnode, modifiers, callback) { 8 | const observer = new IntersectionObserver(entries => { 9 | const entry = entries[0]; 10 | if (entry.isIntersecting) { 11 | callback(); 12 | if (modifiers.once) { 13 | disconnectObserver(observer, el); 14 | } 15 | } 16 | }) 17 | 18 | // Observe when element is inserted in DOM 19 | vnode.context.$nextTick(() => observer.observe(el)) 20 | 21 | return observer; 22 | } 23 | function disconnectObserver(observer, el) { 24 | log('Disconnecting observer', el); 25 | if (observer) observer.disconnect(); 26 | } 27 | 28 | function bind(el, { value, modifiers }, vnode) { 29 | log("Binding element", el); 30 | if (typeof window.IntersectionObserver === 'undefined') { 31 | log('IntersectionObserver API is not available in your browser.') 32 | } else { 33 | const observer = createObserver(el, vnode, modifiers, () => { 34 | log("Element is visible", el) 35 | const callback = value; 36 | if (typeof callback === "function") callback(); 37 | }) 38 | instances.set(el, {observer}) 39 | } 40 | } 41 | 42 | function update(el, { value, oldValue }, vnode) { 43 | if (value === oldValue) return; 44 | 45 | const {observer} = instances.get(el) 46 | disconnectObserver(observer, el); 47 | bind(el, { value }, vnode); 48 | } 49 | 50 | function unbind(el) { 51 | if (instances.has(el)) { 52 | const {observer} = instances.get(el); 53 | disconnectObserver(observer, el); 54 | instances.delete(el); 55 | } 56 | } 57 | 58 | export default { 59 | bind, 60 | update, 61 | unbind 62 | } 63 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App) 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /src/utils/constants.js: -------------------------------------------------------------------------------- 1 | export const PIXEL_RATIO = window.devicePixelRatio || 1; 2 | export const VIEWPORT_RATIO = 0.98; 3 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const output = { 2 | globalObject: "this", 3 | }; 4 | 5 | const publicPath = process.env.WEBPACK_PUBLIC_PATH || '/'; 6 | 7 | module.exports = { 8 | publicPath, 9 | configureWebpack: { 10 | devServer: { 11 | watchOptions: { 12 | poll: true, 13 | }, 14 | }, 15 | output, 16 | }, 17 | chainWebpack: config => { 18 | config.module 19 | .rule('svg') 20 | .use('file-loader') 21 | .loader('vue-svg-loader') 22 | }, 23 | }; 24 | --------------------------------------------------------------------------------