inital commit

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["env", { "modules": false }],
+    "stage-3"
+  ],
+  "plugins": ["syntax-dynamic-import"]
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

@@ -0,0 +1,12 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
+yarn-error.log
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

README.md

@@ -0,0 +1,18 @@
+# test
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+```
+
+For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "pdfvuer",
+  "description": "A PDF viewer for Vue using Mozilla's PDF.js",
+  "version": "1.0.0",
+  "author": "Gaurav Koley <[email protected]>",
+  "license": "MIT",
+  "main": "./src/Pdfvuer.vue",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
+    "build-bundle": "vue-cli-service build --target lib --name pdfvuer ./src/App.vue"
+  },
+  "dependencies": {
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "pdfjs-dist": "^2.0.489",
+    "raw-loader": "^0.5.1",
+    "vue-resize-sensor": "^2.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ],
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-stage-3": "^6.24.1",
+    "cross-env": "^5.0.5",
+    "css-loader": "^0.28.7",
+    "file-loader": "^1.1.4",
+    "vue-loader": "^13.0.5",
+    "vue-template-compiler": "^2.4.4",
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^2.9.1"
+  }
+}

src/Pdfvuer.vue

@@ -0,0 +1,181 @@
+<template>
+	<div id="viewerContainer" ref="container">
+		<div id="viewer" class="pdfViewer"></div>
+		<resizeSensor :initial="true" />
+	</div>
+</template>
+<script>
+'use strict';
+
+import pdfjsLib from 'pdfjs-dist/webpack.js';
+import {PDFLinkService, PDFPageView, PDFFindController, DefaultAnnotationLayerFactory, DefaultTextLayerFactory } from 'pdfjs-dist/web/pdf_viewer.js';
+import resizeSensor from 'vue-resize-sensor'
+
+const DEFAULT_SCALE_DELTA = 1.1;
+const MIN_SCALE = 0.25;
+const MAX_SCALE = 10.0;
+const DEFAULT_SCALE_VALUE = 'auto';
+const CSS_UNITS = 96.0 / 72.0;
+
+function isPDFDocumentLoadingTask(obj) {
+	return typeof(obj) === 'object' && obj !== null && obj.__PDFDocumentLoadingTask === true;
+}
+
+function createLoadingTask(src, options) {
+	var source;
+	if ( typeof(src) === 'string' )
+		source = { url: src };
+	else
+	if ( typeof(src) === 'object' && src !== null )
+		source = Object.assign({}, src);
+	else
+		throw new TypeError('invalid src type');
+
+	// see https://github.com/mozilla/pdf.js/blob/628e70fbb5dea3b9066aa5c34cca70aaafef8db2/src/display/dom_utils.js#L64
+	source.CMapReaderFactory = function() {
+
+		this.fetch = function(query) {
+
+			return import('raw-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap' /* webpackChunkName: "noprefetch-[request]" */)
+			.then(function(bcmap) {
+
+				return {
+					cMapData: bcmap,
+					compressionType: CMapCompressionType.BINARY,
+				};
+			});
+		}
+	};
+
+
+	var loadingTask = pdfjsLib.getDocument(source);
+	loadingTask.__PDFDocumentLoadingTask = true; // since PDFDocumentLoadingTask is not public
+
+	if ( options && options.onPassword )
+		loadingTask.onPassword = options.onPassword;
+
+	if ( options && options.onProgress )
+		loadingTask.onProgress = options.onProgress;
+
+	return loadingTask;
+}
+
+export default {
+	createLoadingTask: createLoadingTask,
+	components: {
+		resizeSensor
+	},
+	data() {
+		return {
+			pdf: null,
+			pdfViewer: null
+		}
+	},
+	props: {
+		src: {
+			type: [String, Object],
+			default: '',
+		},
+		page: {
+			type: Number,
+			default: 1,
+		},
+		rotate: {
+			type: Number,
+			default: 0,
+		},
+		scale: {
+			type: [Number, String],
+			default: 1,
+		},
+
+	},
+	watch: {
+		pdf: function(val) {
+      this.$emit('numpages', val.pdfInfo.numPages);
+		},
+		page: function(val) {
+			var self = this;
+			this.pdf.getPage(val).then(function (pdfPage) {
+		    self.pdfViewer.setPdfPage(pdfPage);
+				self.pdfViewer.draw();
+			});
+		},
+    scale: this.drawScaled,
+		rotate: function(newRotate) {
+			if (this.pdfViewer) {
+				this.pdfViewer.update(this.scale,newRotate);
+				this.pdfViewer.draw();
+			}
+		}
+	},
+  methods: {
+		drawScaled: function(newScale) {
+			if (this.pdfViewer) {
+        let pageWidthScale = (this.$refs.container.offsetWidth) /
+                              this.pdfViewer.viewport.width * 1;
+        let pageHeightScale = (this.$refs.container.height) /
+                              this.pdfViewer.viewport.height * 1;
+        newScale = newScale === 'page-width' ? pageWidthScale : newScale;
+				this.pdfViewer.update(newScale,this.rotate);
+				this.pdfViewer.draw();
+			}
+		}
+  },
+	// doc: mounted hook is not called during server-side rendering.
+	mounted: function() {
+		var self = this;
+		if(!isPDFDocumentLoadingTask(self.src)){
+				self.src = createLoadingTask(self.src);
+		}
+
+		var SEARCH_FOR = 'Mozilla'; // try 'Mozilla';
+
+		var container = this.$refs.container;
+
+		// (Optionally) enable hyperlinks within PDF files.
+		var pdfLinkService = new PDFLinkService();
+
+		// self.pdf = pdfSinglePageViewer;
+		// console.log(self.pdf.currentScaleValue);
+		// pdfLinkService.setViewer(self.pdf);
+		//
+		// // (Optionally) enable find controller.
+		// var pdfFindController = new PDFFindController({
+		//   pdfViewer: self.pdf,
+		// });
+		// self.pdf.setFindController(pdfFindController);
+		//
+		// container.addEventListener('pagesinit', function () {
+		//   // We can use pdfSinglePageViewer now, e.g. let's change default scale.
+		//   self.pdf.currentScaleValue = 'page-width';
+		//
+		//   if (SEARCH_FOR) { // We can try search for things
+		//     pdfFindController.executeCommand('find', {query: SEARCH_FOR});
+		//   }
+		// });
+		//
+		self.src
+		.then(function(pdfDocument) {
+		  // Document loaded, retrieving the page.
+			self.pdf = pdfDocument;
+		  return pdfDocument.getPage(self.page)
+		}).then(function (pdfPage) {
+	    // Creating the page view with default parameters.
+	    self.pdfViewer = new PDFPageView({
+	      container: container,
+	      id: self.page,
+	      scale: 1,
+	      defaultViewport: pdfPage.getViewport(1),
+	      // We can enable text/annotations layers, if needed
+	      textLayerFactory: new DefaultTextLayerFactory(),
+	      //annotationLayerFactory: new DefaultAnnotationLayerFactory(),
+	    });
+	    // Associates the actual page with the view, and drawing it
+	    self.pdfViewer.setPdfPage(pdfPage);
+      self.drawScaled("page-width");
+    })
+  },
+}
+</script>
+<style src="../node_modules/pdfjs-dist/web/pdf_viewer.css"></style>