ts将base64转成blob

可以使用以下代码将base64转成blob：

function base64ToBlob(base64: string): Blob {
  const byteString = atob(base64.split(',')[1]);
  const mimeString = base64.split(',')[0].split(':')[1].split(';')[0];
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ab], { type: mimeString });
}

这个函数接收一个base64字符串作为参数，返回一个blob对象。

相关问题

vue3 ts 预览base64word文件

### 回答1：
可以使用`<a>`标签的`href`和`download`属性来实现预览和下载base64编码的word文件。具体实现如下：

<template>
  <div>
    <button @click="previewBase64Word">预览</button>
    <button @click="downloadBase64Word">下载</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Base64WordPreview',
  data() {
    return {
      base64Word: '',
    };
  },
  methods: {
    previewBase64Word() {
      const blob = this.base64ToBlob(this.base64Word);
      const url = URL.createObjectURL(blob);
      window.open(url, '_blank');
    },
    downloadBase64Word() {
      const blob = this.base64ToBlob(this.base64Word);
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'word.docx';
      link.click();
    },
    base64ToBlob(base64: string) {
      const arr = base64.split(',');
      const mime = arr[0].match(/:(.*?);/)![1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
  },
});
</script>

在上面的代码中，我们定义了一个`<div>`元素，其中包含两个按钮，一个用于预览base64Word，另一个用于下载base64Word。在点击这两个按钮时，我们都会调用相应的方法。

`previewBase64Word()`方法将base64编码的word文件转换为Blob对象，然后使用`window.open()`方法在新窗口中打开该Blob对象的URL。这样，我们就可以在浏览器中预览word文件了。

`downloadBase64Word()`方法与`previewBase64Word()`方法类似，但是它将Blob对象的URL赋值给一个新创建的`<a>`元素的`href`属性，并将该元素的`download`属性设置为`'word.docx'`，以便在用户单击该元素时下载文件。最后，我们模拟单击该元素。

`base64ToBlob()`方法将base64编码的字符串转换为Blob对象。我们首先将字符串分成两部分：MIME类型和数据部分。然后，我们将数据部分解码为二进制字符串，并将其转换为Uint8Array类型。最后，我们使用该数组和MIME类型创建Blob对象。

### 回答2：
Vue3+Typescript可以使用FileReader读取base64编码的WORD文件，并进行预览操作。

首先，在Vue组件中引入FileReader，并声明一个data属性，用于存储读取到的base64编码。

import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      base64Data: '', // 存储base64编码
    };
  },
  methods: {
    // 选择文件触发的事件
    handleFileChange(event: Event) {
      const input = event.target as HTMLInputElement;
      const file = input.files[0];

      // 创建FileReader对象
      const reader = new FileReader();

      // 读取文件完成时触发的回调函数
      reader.onload = () => {
        this.base64Data = reader.result as string; // 将base64编码存储到data属性中
      };

      // 开始读取文件
      reader.readAsDataURL(file);
    },
  },
});

然后，在模板中添加一个文件选择框，绑定change事件到handleFileChange方法：

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <div>
      <iframe :src="base64Data" style="width:100%;height:500px;"></iframe>
    </div>
  </div>
</template>

在上述代码中，我们通过iframe组件将base64编码的内容显示出来，以预览WORD文件。

需要注意的是，浏览器对跨域资源的访问有安全限制，如果WORD文件的base64编码来自于不同的域名，可能会导致预览失败。在实际使用中，建议将WORD文件存储在与应用程序同源的服务器上，以避免跨域问题。

### 回答3：
在Vue3中，我们可以使用TypeScript（TS）来预览Base64格式的Word文件。下面是一个简单的示例：

首先，安装FileSaver库，它允许我们将文件保存到本地：

npm install file-saver --save

然后，我们需要在组件中创建一个方法来预览Base64格式的Word文件。假设我们已经有了一个包含Word文件Base64字符串的变量`base64Data`，方法如下：

import { saveAs } from 'file-saver';

export default {
  methods: {
    previewWord() {
      const byteString = atob(this.base64Data);
      const ab = new ArrayBuffer(byteString.length);
      const ia = new Uint8Array(ab);
      for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }

      const blob = new Blob([ab], { type: 'application/msword' });
      saveAs(blob, 'document.docx');
    }
  }
}

在这个方法中，我们首先使用`atob`函数将Base64字符串转换为二进制数据。然后，我们创建一个存放二进制数据的ArrayBuffer，然后将其转换为Uint8Array。接下来，我们使用这个Uint8Array创建一个Blob对象，并设置其类型为Word文件。最后，我们使用`saveAs`函数保存这个Blob对象为本地文件，并指定文件名为`document.docx`。

在Vue模板中，我们可以调用这个方法来预览Word文件。例如，我们可以在一个按钮上绑定`click`事件：

<template>
  <div>
    <!-- 其他内容 -->
    <button @click="previewWord">预览Word文件</button>
  </div>
</template>

这样，当用户点击按钮时，`previewWord`方法将会被调用，预览Base64格式的Word文件。

请注意，上述代码中假设`base64Data`变量已经包含了正确的Word文件Base64字符串。如果你的数据来源不同，你需要相应地修改代码来适应你的需求。

vue3 ts 在线预览base64 word

可以借助第三方库 `FileSaver.js` 和 `js-base64` 来实现将 Base64 编码的 Word 文件在前端进行预览和下载。具体实现步骤如下：

1. 安装依赖

npm install file-saver js-base64 --save

2. 创建一个能够将 Base64 编码的 Word 文件转换成 Blob 类型的方法：

import { Base64 } from 'js-base64';

function base64toBlob(base64: string): Blob {
  const byteString = atob(base64.split(',')[1]);
  const mimeString = base64.split(',')[0].split(':')[1].split(';')[0];
  const arrayBuffer = new ArrayBuffer(byteString.length);
  const uint8Array = new Uint8Array(arrayBuffer);
  for (let i = 0; i < byteString.length; i++) {
    uint8Array[i] = byteString.charCodeAt(i);
  }
  return new Blob([arrayBuffer], { type: mimeString });
}

3. 在 Vue 组件中定义一个变量用于存储 Base64 编码的 Word 文件，以及一个方法用于将其转换成 Blob 类型：

import { defineComponent } from 'vue';
import { saveAs } from 'file-saver';
import { Base64 } from 'js-base64';

export default defineComponent({
  data() {
    return {
      base64: '', // 存储 Base64 编码的 Word 文件
    };
  },
  methods: {
    // 将 Base64 编码的 Word 文件转换成 Blob 类型，并保存到本地
    downloadWord() {
      const blob = base64toBlob(this.base64);
      saveAs(blob, 'file.docx');
    },
  },
});

4. 在模板中添加一个用于预览的 `iframe` 元素和一个下载按钮：

<template>
  <div>
    <iframe :srcdoc="base64" frameborder="0" width="100%" height="500"></iframe>
    <button @click="downloadWord">下载</button>
  </div>
</template>

5. 在获取到 Base64 编码的 Word 文件后，将其赋值给 `base64` 变量即可：

// 获取 Base64 编码的 Word 文件，并赋值给 base64 变量
this.base64 = `data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,${Base64.encode(response.data)}`;

这样就可以实现在前端在线预览和下载 Base64 编码的 Word 文件了。