Vue document viewer component

documentViewer.vue

<template>
	<div>
		<v-layout row align-center @click="show = true" style="cursor:pointer;">
			<v-flex shrink class="mr-3">
				<v-icon>insert_drive_file</v-icon>
			</v-flex>
			<v-flex>
				<div>
					<strong>{{ document.tipoAnexo.descricao }}</strong>
				</div>
				<div>
					<small>{{ document.anexo.dataHoraCriacao }}</small>
				</div>
			</v-flex>
			<v-flex></v-flex>
		</v-layout>

		<v-dialog persistent scrollable content-class="dialog-document-viewer" :value="true" v-if="show">
			<v-card>
				<v-toolbar flat dark color="secondary">
					<v-toolbar-title>{{ document.tipoAnexo.descricao }}</v-toolbar-title>
					<v-spacer></v-spacer>
					<v-btn :href="documentDownloadURL" color="primary">download</v-btn>
					<v-icon class="ml-3" @click="show = false">close</v-icon>
				</v-toolbar>
				<v-card-text class="pa-0" style="overflow:hidden;">
					<iframe
						:src="documentURL"
						style="min-width: 100%; border: none;"
						@load="resizeIframe($event.target)"
					></iframe>
				</v-card-text>
			</v-card>
		</v-dialog>
	</div>
</template>

<script>
	export default {
		props: {
			document: {
				default() {
					return {
						anexo: {
							id: null,
							dataHoraCriacao: null,
							nome: null
						},
						tipoAnexo: {
							descricao: null
						}
					};
				}
			}
		},

		data() {
			return {
				show: false
			};
		},

		computed: {
			documentURL() {
				return `${window.Config.BASE_URL}/inscricao/anexo/${this.document.anexo.id}?download=false`;
			},

			documentDownloadURL() {
				return `${window.Config.BASE_URL}/inscricao/anexo/${this.document.anexo.id}?download=true`;
			}
		},

		methods: {
			resizeIframe(el) {
				try {
					let dialogEl = document.querySelector('.dialog-document-viewer');
					let height = dialogEl.clientHeight;
					let width = dialogEl.clientWidth;

					el.style.height = `${height - 60}px`;
					el.style.width = `${width}px`;

					el.contentWindow.document.body.style.textAlign = 'center';
					el.contentWindow.document.querySelector('img').style.maxWidth = '100%';
					el.contentWindow.document.querySelector('img').style.height = '100%';
				} catch (error) {}
			}
		}
	};
</script>

<style>
	.dialog-document-viewer {
		height: 90% !important;
	}
</style>