...
| 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 conHay algunos componentes Vue de visor de pdf disponibles, pero estos son bastante limitados, pues muestran el pdf "a pelo", no proporcionan ningún tipo de interfaz para navegar o ejecutar acciones como guardar el pdf. Por lo tanto, la mejor opción que tenemos es mostrar el pdf en un iframe, de modo que se utilice el visor nativo del navegador:
| Bloque de código |
|---|
npm i vue-pdf-embed |
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.
<iframe :src="pdf" /> |
En la propiedad src podemos pasarle el pdf en base64, precedido por "data:application/pdf;base64,". Si recibimos el pdf a mostrar como array de bytes, podemos transformarlo así:
| Bloque de código |
|---|
this.pdf = `data:application/pdf;base64, ${btoa(String.fromCharCode.apply(null, new Uint8Array(arraybuffer)),)}`; |
Siendo la variable arraybuffer el array de bytes del pdf que hemos recibidoLo 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.