Vue.js 2 template

by Ronny Amarante

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://npmcdn.com/pdfjs-dist/build/pdf.js"></script>
<script type="x-template" id="main">
	<div>
		<input type="number" v-model.number="page"> /{{numPages}}
    <pdf src="https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/calrgb.pdf" 
      :page="page" 
      @num-pages="numPages = $event" 
      style="width:75%"></pdf>
  </div>
</script>

<div id="app"></div>

CSS

<style>
/* resize-sensor.vue */
@keyframes resizeSensorVisibility {
	from { top: 0; }
}

/* pdf.vue */
.annotationLayer {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
.annotationLayer section {
  position: absolute;
}
.annotationLayer .linkAnnotation > a {
  position: absolute;
  font-size: 1em;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.annotationLayer .linkAnnotation > a /* -ms-a */  {
  background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") 0 0 repeat;
}
.annotationLayer .linkAnnotation > a:hover {
  opacity: 0.2;
  background: #ff0;
  box-shadow: 0px 2px 10px #ff0;
}
.annotationLayer .textAnnotation img {
  position: absolute;
  cursor: pointer;
}
.annotationLayer .textWidgetAnnotation input,
.annotationLayer .textWidgetAnnotation textarea,
.annotationLayer .choiceWidgetAnnotation select,
.annotationLayer .buttonWidgetAnnotation.checkBox input,
.annotationLayer .buttonWidgetAnnotation.radioButton input {
  background-color: rgba(0, 54, 255, 0.13);
  border: 1px solid transparent;
  box-sizing: border-box;
  font-size: 9px;
  height: 100%;
  padding: 0 3px;
  vertical-align: top;
  width: 100%;
}
.annotationLayer .textWidgetAnnotation textarea {
  font: message-box;
  font-size: 9px;
  resize: none;
}
.annotationLayer .textWidgetAnnotation input[disabled],
.annotationLayer .textWidgetAnnotation textarea[disabled],
.annotationLayer .choiceWidgetAnnotation select[disabled],
.annotationLayer .buttonWidgetAnnotation.checkBox input[disabled],
.annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] {
  background: none;
  border: 1px solid transparent;
  cursor: not-allowed;
}
.annotationLayer .textWidgetAnnotation input:hover,
.annotationLayer .textWidgetAnnotation textarea:hover,
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation.checkBox input:hover,
.annotationLayer .buttonWidgetAnnotation.radioButton input:hover {
  border: 1px...

Babel + JSX

/*
######################################
Most of this code is just inline imports due to jsfiddle limitations, the code 
you would actually use is in the HTML and in the new Vue block all the way at 
the bottom. No custom CSS is used for this demo, all the css used here are just 
imports that would be included automatically by vue. For more information 
please see https://github.com/FranckFreiburger/vue-pdf/blob/master/README.md

HOW TO UPDATE THIS DEMO:

  1. inline the resizeSensor script 
  2. change export default to `const resizeSensor = {`
  3. inline the pdf.vue script
  4. remove import and PDFJS lines form the pdf.js headers
  5. Find the export default line and change it to `const pdf =`
  6. inline the syles for resize-sensor.vue and pdf.vue
  
######################################
*/

// ############################# resizesensor.js #############################
const resizeSensor = {

	// thanks to https://github.com/marcj/css-element-queries
	props: {
		initial: {
			type: Boolean,
			default: false,
		}
	},
	data: function() {
		return {
			size: {
				width: -1,
				height: -1
			}
		}
	},
	methods: {
		reset: function() {

			var expand = this.$el.firstChild;
			var shrink = this.$el.lastChild;
			expand.scrollLeft = 100000;
			expand.scrollTop = 100000;
			shrink.scrollLeft = 100000;
			shrink.scrollTop = 100000;
		},
		update: function() {
			
			this.size.width = this.$el.offsetWidth;
			this.size.height = this.$el.offsetHeight;
		}
	},
	watch: {
		size: {
			deep: true,
			handler: function(size) {
				
				this.reset();
				this.$emit('resize', { width: this.size.width, height: this.size.height });
			}
		}
	},
	render: function(create) {
		
		var style = 'position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;';
		var styleChild = 'position: absolute; left: 0; top: 0;';

		return create('div', {
			style: style + 'animation-name: resizeSensorVisibility;',
			on: {
				'~animationstart':...