vue3 純前端解碼base64亂碼

如果你在 Vue3 中使用 Base64 解码时遇到了乱码问题，可能是因为 Base64 字符串中包含了非 ASCII 字符，导致解码出来的二进制数据出现了问题。

要解决这个问题，可以尝试使用 `TextDecoder` 对解码后的二进制数据进行转换。修改第 3 步中的解码方法如下：

decodeBase64(base64) {
  const binary = Base64.atob(base64)
  const bytes = new Uint8Array(binary.length)
  for (let i = 0; i < binary.length; i++) {
    bytes[i] = binary.charCodeAt(i)
  }
  const decoder = new TextDecoder('utf-8')
  return decoder.decode(bytes)
}

这里使用了 `TextDecoder` 将二进制数据转换成了 UTF-8 编码的字符串。如果你知道 Base64 字符串的编码方式，也可以相应地修改解码方法中的 `TextDecoder` 参数。

这样，你就可以在 Vue3 中成功解码包含非 ASCII 字符的 Base64 字符串了。

相关问题

vue3 解码base64后预览文件内容

在 Vue3 中解码base64后预览文件内容，可以使用以下步骤：

1. 创建一个方法，用于将base64编码解码成二进制数据。可以使用 `atob()` 方法将base64编码解码成字符串，然后将字符串转换成二进制数据。示例代码如下：

decodeBase64(base64String) {
  const binaryString = atob(base64String);
  const byteArray = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    byteArray[i] = binaryString.charCodeAt(i);
  }
  return byteArray;
}

2. 在模板中，使用 `input` 元素选择base64编码的文件，并将文件内容传递给解码方法。示例代码如下：

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <div v-if="decodedFile">
      <p>文件名：{{decodedFile.name}}</p>
      <p>文件类型：{{decodedFile.type}}</p>
      <p>文件大小：{{decodedFile.size}} 字节</p>
      <p>文件内容：</p>
      <pre>{{decodedFile.content}}</pre>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      decodedFile: null
    };
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = () => {
        const content = this.decodeBase64(reader.result.split(',')[1]);
        this.decodedFile = {
          name: file.name,
          type: file.type,
          size: file.size,
          content: content
        };
      };
      reader.readAsDataURL(file);
    },
    decodeBase64(base64String) {
      const binaryString = atob(base64String);
      const byteArray = new Uint8Array(binaryString.length);
      for (let i = 0; i < binaryString.length; i++) {
        byteArray[i] = binaryString.charCodeAt(i);
      }
      return byteArray;
    }
  }
};
</script>

在上述示例代码中，我们使用 `FileReader` 对象读取选择的文件，并在其 `onload` 方法中调用解码方法将base64编码解码成二进制数据。解码后的二进制数据存储在 `decodedFile.content` 中，可以在模板中显示。

vue3 純前端解碼base64后預覽pdf

要在 Vue3 中前端解码 Base64 并预览 PDF 文件，可以使用以下步骤：

1. 安装 `pdfjs-dist` 和 `base64-js` 依赖：

npm install pdfjs-dist base64-js

2. 在 Vue3 组件中引入依赖：

import pdfjsLib from 'pdfjs-dist'
import Base64 from 'base64-js'

3. 定义一个方法来将 Base64 解码成二进制数据：

decodeBase64(base64) {
  const binary = Base64.atob(base64)
  const array = new Uint8Array(binary.length)
  for (let i = 0; i < binary.length; i++) {
    array[i] = binary.charCodeAt(i)
  }
  return array
}

4. 加载 PDF 文档并渲染：

loadPdf(doc) {
  const loadingTask = pdfjsLib.getDocument({ data: this.decodeBase64(doc) })
  loadingTask.promise.then(pdf => {
    pdf.getPage(1).then(page => {
      const viewport = page.getViewport({ scale: 1.0 })
      const canvas = this.$refs.pdfCanvas
      const context = canvas.getContext('2d')
      canvas.height = viewport.height
      canvas.width = viewport.width
      page.render({ canvasContext: context, viewport: viewport })
    })
  })
}

其中，`doc` 是 Base64 编码的 PDF 文档，`this.$refs.pdfCanvas` 是用于显示 PDF 的 Canvas 元素。

这样，你就可以在 Vue3 中成功解码 Base64 并预览 PDF 文件了。