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 字符串了。

相关问题

vue2 RSA 分段解密乱码

在 Vue.js 中使用 RSA 进行分段解密时，如果遇到乱码问题，可能是因为字符编码不匹配导致的。RSA 解密通常涉及到二进制数据的操作，而文本解码过程中如果没有正确设置字符集，可能会将二进制数据当作非ASCII字符处理，从而出现乱码。

以下是一些可能导致乱码的原因和解决方法：

1. **字符集问题**：确保在解密时使用的字符集与加密时一致。比如，如果你用UTF-8编码加密，那么解密时也应使用UTF-8。

2. **Base64解码**：在从RSA解密得到的是Base64编码的数据，先解码成二进制，然后再转换为字符串。

const text = window.atob(rsaDecryptedBase64);

3. **分段解密**：如果数据被分段，确保每部分解密后正确拼接，然后一次性解码。

4. **AES解密**：如果使用了AES作为RSA之后的进一步解密，检查AES的key和iv是否正确配置。

5. **异常字符处理**：在解码过程中，可能会遇到无法识别的字符，可以尝试过滤或替换这些字符。

如果你正在使用第三方库如`crypto-js`或`jsencrypt`等，确保正确使用其提供的API，并查阅文档中关于字符编码和处理的部分。

vue jszip读取zip文件防止乱码并输出里面的图片，提供vue代码

可以使用JSZip库来读取zip文件，并使用FileSaver库将文件下载到本地。以下是一个Vue组件示例，该组件读取zip文件并将其中的图片文件解压并下载到本地：

<template>
  <div>
    <input type="file" @change="selectZipFile">
    <button @click="downloadImages">Download Images</button>
  </div>
</template>

<script>
import JSZip from 'jszip';
import FileSaver from 'file-saver';

export default {
  name: 'ZipReader',
  data() {
    return {
      zipFile: null,
      images: [],
    };
  },
  methods: {
    selectZipFile(event) {
      this.zipFile = event.target.files[0];
    },
    async downloadImages() {
      if (!this.zipFile) {
        alert('Please select a zip file!');
        return;
      }

      const zip = new JSZip();
      const zipFile = await zip.loadAsync(this.zipFile);

      const imagePromises = [];
      zipFile.forEach((relativePath, zipEntry) => {
        if (zipEntry.dir) {
          return;
        }

        const ext = relativePath.split('.').pop();
        if (['jpg', 'jpeg', 'png', 'gif'].includes(ext.toLowerCase())) {
          const imagePromise = zipEntry.async('base64')
            .then((base64Data) => {
              this.images.push({
                name: zipEntry.name,
                data: base64Data,
              });
            });
          imagePromises.push(imagePromise);
        }
      });

      await Promise.all(imagePromises);

      this.images.forEach((image) => {
        const byteCharacters = atob(image.data);
        const byteNumbers = new Array(byteCharacters.length);
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        const blob = new Blob([byteArray], { type: 'image/jpeg' });
        FileSaver.saveAs(blob, image.name);
      });
    },
  },
};
</script>

该组件包含一个input元素，以便用户选择zip文件。当用户选择zip文件后，组件将其加载到JSZip对象中。然后，组件遍历zip文件中的所有文件，并仅选择图片文件。对于每个图片文件，组件将其解码为Base64字符串，并将其添加到images数组中。最后，组件遍历images数组，并使用FileSaver库将每个图像文件下载到本地。