vue如何将base64流数据转成pdf文件并在新页面打开

下面是将base64流数据转成pdf文件并在新页面打开的详细攻略：

1. 将base64流数据转成blob数据

首先，需要在vue组件中定义一个方法，将base64流数据转成blob数据。

function base64ToBlob(base64Data, contentType) {
  contentType = contentType || '';
  const sliceSize = 1024;
  const byteCharacters = window.atob(base64Data);
  const bytesLength = byteCharacters.length;
  const slicesCount = Math.ceil(bytesLength / sliceSize);
  const byteArrays = new Array(slicesCount);

  for (let sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
    const begin = sliceIndex * sliceSize;
    const end = Math.min(begin + sliceSize, bytesLength);

    const bytes = new Array(end - begin);
    for (let offset = begin, i = 0; offset < end; ++i, ++offset) {
      bytes[i] = byteCharacters[offset].charCodeAt(0);
    }
    byteArrays[sliceIndex] = new Uint8Array(bytes);
  }

  return new Blob(byteArrays, {
    type: contentType
  });
}

2. 将blob数据生成pdf文件并打开

接下来，还需要在vue组件中定义一个方法，将blob数据生成pdf文件并打开。

function openPdf(blob) {
  const objectUrl = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = objectUrl;
  a.target = '_blank';
  a.click();
  URL.revokeObjectURL(objectUrl);
}

3. 在vue组件中使用上述方法

最后，在vue组件中使用上述方法将base64流数据转成pdf文件并在新页面打开。

<template>
  <div>
    <button @click="openPdfData">Open PDF</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pdfData: '...base64 pdf data...'
    };
  },
  methods: {
    openPdfData() {
      const blob = this.base64ToBlob(this.pdfData, 'application/pdf');
      this.openPdf(blob);
    },
    base64ToBlob(...) {
      ...
    },
    openPdf(...) {
      ...
    }
  }
};
</script>

以上是一条示例，下面再给出另一条示例详解：

示例1：使用axios获取数据

<template>
  <div>
    <button @click="openPdfData">Open PDF</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      pdfData: ''
    };
  },
  methods: {
    async getPdfData() {
      const response = await axios.get('http://example.com/getPdfData', {
        responseType: 'arraybuffer'
      });
      return new Uint8Array(response.data);
    },
    async openPdfData() {
      const uint8Array = await this.getPdfData();
      const blob = new Blob([uint8Array], { type: 'application/pdf' });
      this.openPdf(blob);
    },
    openPdf(...) {
      ...
    }
  }
};
</script>

在这个示例中，我们使用axios发送GET请求获取pdf文件的二进制数据，并将数据转成Uint8Array类型的数据。最后，使用Blob将数据转成blob类型的数据，并调用openPdf()方法打开pdf文件。

示例2：使用File API获取选择文件的二进制数据

<template>
  <div>
    <input type="file" @change="onFileChange">
    <button @click="openPdfData">Open PDF</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileData: null
    };
  },
  methods: {
    onFileChange(e) {
      this.fileData = e.target.files[0];
    },
    async openPdfData() {
      if (!this.fileData) {
        return;
      }
      const uint8Array = await this.getFileData(this.fileData);
      const blob = new Blob([uint8Array], { type: 'application/pdf' });
      this.openPdf(blob);
    },
    getFileData(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => {
          resolve(new Uint8Array(reader.result));
        };
        reader.onerror = () => {
          reject(reader.error);
        };
        reader.readAsArrayBuffer(file);
      });
    },
    openPdf(...) {
      ...
    }
  }
};
</script>

在这个示例中，我们使用File API获取选择文件的二进制数据，并将数据转成Uint8Array类型的数据。然后，使用Blob将数据转成blob类型的数据，并调用openPdf()方法打开pdf文件。