...
| Bloque de código | ||
|---|---|---|
| ||
abrirPdf() {
const blob = new Blob([this.matriculaPdf], { type: 'application/pdf' });
// IE doesn't allow using a blob object directly as link href
// instead it is necessary to use msSaveOrOpenBlob
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob);
return;
}
// For other browsers:
// Create a link pointing to the ObjectURL containing the blob.
const data = window.URL.createObjectURL(blob);
// window.open(data, '_blank');
const link = document.createElement('a');
link.href = data;
link.target = '_blank';
link.click();
setTimeout(() => {
// For Firefox it is necessary to delay revoking the ObjectURL
window.URL.revokeObjectURL(data);
}, 100);
}, |
Visor de PDF
Para Vue, tenemos disponible el componente vue-pdf-embed, que podemos descargar con:
| Bloque de código |
|---|
npm i vue-pdf-embed |
Este componente requiere un objeto con un campo data que contenga el pdf, y lo utilizaríamos de esta forma:
...
| language | xml |
|---|
...
A este componente se le pasa el archivo en su propiedad source. Se le puede pasar tanto una url de donde obtenerlo como el arraybuffer del archivo, dentro del campo data de un objeto, es decir, de esta forma
| Bloque de código |
|---|
{ data: arraybuffer } |
Siendo arraybuffer los datos recibidos del servicio.
Lo malo de este visor es que se muestra el pdf tal cual, sin ningún tipo de layout para navegar sobre él ni nada, por lo que esta funcionalidad habría que implementarla aparte. Podemos consultar en la documentación todas las propiedades y eventos que proporciona para ello: https://github.com/hrynko/vue-pdf-embed.