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

Question

我正在使用以下代码在FileReader的onLoad函数中创建一个a标签，并将FileReader的结果（即base64字符串）放入href中。

   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字符串如下所示：。

- CommonSenseCode

---

href中的Base64字符串是完全有效的 - 你确定你的Base64确实是正确的吗？你也确定你的浏览器的“打开方式”中已经指定了一个PDF查看器吗？ - undefined

看起来你的数据URI缺少一个逗号。这是Mozilla文档中的数据URI格式：data:[<mediatype>][;base64],<data> https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs可能不是你的问题，但我总是喜欢从小事开始解决。 - undefined

@ObsidianAge 请查看更新内容 - undefined

Answer 1

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

<a download href="...">

然而，并非所有的浏览器都支持download属性。请查看支持表格。

有一个库可以通过一些技巧来规避不同浏览器之间的差异。如果你不介意增加一些kb的体积，请尝试使用DownloadJS。

- posit labs

---

疯狂的是，现在它竟然能工作了，之前它不工作。谢谢，会让它在iOS和IE11上与其他库一起运行。 - undefined