Versiones comparadas

Clave

  • Se ha añadido esta línea.
  • Se ha eliminado esta línea.
  • El formato se ha cambiado.


Advertencia
titleEN REVISIÓN

Ahora mismo este código da problemas, lo estamos revisando, actualizaremos la guía en cuanto lo tengamos solucionado.

Tabla de contenidos

...

Recibir PDF y darle el formato necesario

...

Bloque de código
languagejs
return axios.getapiRequest({ url, { responseType: "arraybuffer" });

...

Bloque de código
languagejs
export default {
  // Descargar un  b64ToUint6(nChr) {
    return nChr > 64 && nChr < 91 ? nChr - 65 : nChr > 96 && nChr < 123 ? nChr - 71 : nChr > 47 && nChr < 58 ? nChr + 4 : nChr === 43 ? 62 : nChr === 47 ? 63 : 0;
  },
  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) {
    varconst 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 (varlet nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx ++= 1) {
      // eslint-disable-next-line no-bitwise
      nMod4 = nInIdx & 3;
      // eslint-disable-next-line no-bitwise
      nUint24 |= this.b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << (18 - 6 * nMod4);
      if (nMod4 === 3 || nInLen - nInIdx === 1) {
        for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3 ++= 1, nOutIdx ++= 1) {
          // eslint-disable-next-line no-bitwise
          taBytes[nOutIdx] = (nUint24 >>> ((16 >>> nMod3) & 24)) & 255;
        }
        nUint24 = 0;
      }
    }

    return taBytes;
  },

  descargarPdf(pdfArrayBuf, nombre) {
    var blob = new Blob([pdfArrayBuf], { type: "application/pdf" });// Función auxiliar para la anterior
  base64ToUint6(nChr) {
    //if IE doesn't allow using a blob object directly as link href
    // instead it is necessary to use msSaveOrOpenBlob(nChr > 64 && nChr < 91) {
      return nChr - 65;
    }
    if (window.navigatornChr > 96 && window.navigator.msSaveOrOpenBlob nChr < 123) {
      window.navigator.msSaveOrOpenBlob(blob);
      returnreturn nChr - 71;
    }
    //if For(nChr other> browsers:
47 && nChr < // Create a link pointing to the ObjectURL containing the blob.58) {
      return nChr + 4;
    const data = window.URL.createObjectURL(blob);}
    varif link(nChr = document.createElement("a");
== 43) {
     link.href =return data62;
    link.download}
 = nombre;
  if  link.click();
    setTimeout(function((nChr === 47) {
      // For Firefox it is necessary to delay revoking the ObjectURL
      window.URL.revokeObjectURL(data)return 63;
    }, 100);
  },
  pdfVisor(pdfArrayBuf) {
      return { data: pdfArrayBuf }return 0;
  },
};

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

...

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

En el parámetro src le tenemos que indicar un objeto con una estructura, que podemos obtener con pdfUtil.pdfVisor(pdfArrayBuffer).

...