...

return apiRequest({ url, responseType: "arraybuffer" });

El otro caso posible es que dicho array de bytes sea parte de un objeto, sólo un campo entre otros. Para transformarlo al formato de arraybuffer que queremos es más complicado. Para ello, podemos utilizar unas funciones auxiliares que hay definidas en este archivo: pdfUtil.js. Además, también se incluyen los métodos para devolver un objeto con el formato del visor de pdfs, y para descargarlo.

Este archivo lo podemos colocar en nuestro proyecto en src/util/pdfUtil.js. Contiene el siguiente código.Una vez recibido, para descargarlo podemos utilizar el código de la siguiente función, pasándole el pdf y el nombre del archivo a descargar:

export default {
  // Descargar un pdf (arraybuffer)
  descargarPdf(pdfArrayBuf, nombre) {
    const blob = new Blob([pdfArrayBuf], {
      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);
    const link = document.createElement('a');
    link.href = data;
    link.download = nombre;
    link.click();
    setTimeout(() => {
      // For Firefox it is necessary to delay revoking the ObjectURL
      window.URL.revokeObjectURL(data);
    }, 100);
  },

  // Pasar un arraybuffer a un objeto con el fomato para el visor vue-pdf
  pdfVisor(pdfArrayBuf) {
    return {
      data: pdfArrayBuf,
    };
  },

  // Pasar de base 64 a array de bytes - Si viene como string en base 64,
  // por ejemplo dentro de un objeto,tendremos que transformarlo
  base64DecToArr(sBase64, nBlocksSize) {
    const sB64Enc = sBase64.replace(/[^A-Za-z0-9+/]/g, '');
    const nInLen = sB64Enc.length;
    const nOutLen = nBlocksSize
    // eslint-disable-next-line no-bitwise
      ? Math.ceil(((nInLen * 3 + 1) >> 2) / nBlocksSize) * nBlocksSize
      // eslint-disable-next-line no-bitwise
      : (nInLen * 3 + 1) >> 2;
    const taBytes = new Uint8Array(nOutLen);

    for (let nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx += 1) {
      // eslint-disable-next-line no-bitwise
      nMod4 = nInIdx & 3;},

Si lo que queremos es abrirlo en otra pestaña del navegador, lo podemos hacer con esta otra función:

abrirPdf() {
      const blob = new Blob([this.matriculaPdf], { type: 'application/pdf' });
      // IE doesn't allow using a blob object directly as link href
      // eslint-disable-next-line no-bitwise
      nUint24 |= this.b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << (18 - 6 * nMod4);instead it is necessary to use msSaveOrOpenBlob
      if (nMod4 === 3 || nInLen - nInIdx === 1) {
        for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3 += 1, nOutIdx += 1window.navigator && window.navigator.msSaveOrOpenBlob) {
          // eslint-disable-next-line no-bitwise
          taBytes[nOutIdx] = (nUint24 >>> ((16 >>> nMod3) & 24)) & 255window.navigator.msSaveOrOpenBlob(blob);
        }
        nUint24 = 0return;
      }
    }

    return taBytes;
  },

  // FunciónFor auxiliar para la anteriorother browsers:
  base64ToUint6(nChr) {
   // ifCreate (nChra >link 64pointing &&to nChrthe <ObjectURL 91)containing {
      return nChr - 65;the blob.
    }
  const data if= (nChr > 96 && nChr < 123) {
      return nChr - 71window.URL.createObjectURL(blob);
    }
    if (nChr > 47 && nChr < 58) {
      return nChr + 4// window.open(data, '_blank');
    }
  const link if= (nChr === 43) {
      return 62document.createElement('a');
    }
    if (nChr === 47) {
      return 63link.href = data;
    }
    return 0;
  },
};

Para utilizarlo en nuestros componentes, sólo tendríamos que importarlo y ya podríamos usarlo con pdfUtil.metodo(), así:

<script>
import pdfUtil from "@/util/pdfUtil.js";

export default {
  ...
  computed: {
    // Para el visor de pdf
    pdfVisor: function() {
      if(this.objConPdf) {
        return pdfUtil.pdfVisor(this.objConPdf.pdf)  link.target = '_blank';
      link.click();
      }
      return null
    }
  },
  methods: {
    getObjConPdf() {
      this.servicioRest.getPdf().then((response)setTimeout(() => {
        if (response.status == 200) {
          this.objConPdf = response.data;// For Firefox it is necessary to delay revoking the ObjectURL
          thiswindow.objConPdf.pdf = pdfUtil.base64DecToArr(this.objConPdf.pdf).buffer;
 URL.revokeObjectURL(data);
       }
      }, 100);
    },
	// Mapeamos el método del pdfUtil a uno del componente, pues desde el <template> no se pueden acceder a los métodos importados
    descargarPdf: pdfUtil.descargarPdf,
  },
};
</script>

Visor de PDF

Para Vue tenemos disponible vue-pdf, que podemos descargar con:

npm i vue-pdf

Y lo utilizaríamos de esta forma:

<div class="visorPdf" style="width: 60%; margin-left:auto; margin-right:auto">
  <pdf v-if="objConPdf" :src="pdfVisor" style="border: solid 1px grey" />
</div>

Visor de PDF

Hay 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:

<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í:

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 recibidoEn el parámetro src le tenemos que indicar un objeto con una estructura, que podemos obtener con pdfUtil.pdfVisor(pdfArrayBuffer).