将 base64 文件内容处理为可查看的内容答案

【问题标题】：Handle base64 file content into something viewable将 base64 文件内容处理为可查看的内容
【发布时间】：2019-04-19 09:59:21
【问题描述】：

由于我对某些基本领域的知识缺乏了解，我只是被困了一段时间。我有一个用 vue.js 编写的应用程序并有一个外部服务，它有时会向我发送一个表示 pdf/img/txt 文档（无论如何）的 base64 字符串。我尝试做的是向我的用户显示此文档的内容，但不知道该怎么做。我现在实现的是获取 url。

async downloadPdf() {
    let res = await this.$store.dispatch('pdf/getBase64String')
    let base64String = res.status === 'ok' ? res.data : ''
    this.downloadUrl = 'data:application/pdf;base64,' + base64String
    // downloadUrl bind href on a button in my page
}

一旦我用这个 downloadUrl 变量设置了 href 值，Chrome 就会打开一个新标签，但仍然是空白并处于无限加载状态。我想这不是好方法。我也试过new Blob、new FileReader等等，没有成功。所以我正在寻找处理这种事情的正确方法：从 base64 字符串查看文档内容

【问题讨论】：

标签： javascript vue.js base64 blob filereader

【解决方案1】：

尝试下载：

async downloadPdf() {
    let res = await this.$store.dispatch('pdf/getBase64String')
    let base64String = res.status === 'ok' ? res.data : ''
    this.downloadUrl = 'data:application/pdf;base64,' + base64String
    // downloadUrl bind href on a button in my page
    open(this.downloadUrl);
    // or, if it is not encode
    open(btoa(this.downloadUrl));
}

【讨论】：