Javascript - 从 FileReader 或 base64 创建下载链接

Question

我使用以下代码在 FileReader 的 onLoad 上创建一个标签，并将 FileReader 的结果放入 href 中。这是一个 base64 字符串。

   let reader = new FileReader()
    reader.readAsDataURL(myInputTypeFile.files[0])

    reader.onloadend = (e) => {
        let file
        for (let i = 0; i < attachInput.files.length; i++) {
            file = attachInput.files[i]

            if (file.type === 'application/pdf'){
                let anchor = document.createElement('a')
                anchor.setAttribute('class', 'q-attached-file')
                anchor.setAttribute('title', file.name)
                anchor.setAttribute('href', reader.result)
                anchor.innerText = file.name
                myElement.appendChild(anchor)
            }
        }
    }

这是生成的 html：

但是当我单击该元素时，我只看到浏览器上加载了“about：blank”。

更新

这就是 reader.result 字符串在 console.log() 中的样子

Answer 1

如果您的用户使用的浏览器支持download 属性，您可以将其添加到您的锚标记中。

<a download href="...">

然而，并非所有浏览器都支持下载属性。检查支持表。

有一个库可以做一些棘手的事情来回避浏览器之间的一些差异。如果您不介意多一些 kb，请尝试使用DownloadJS。