获取 blob 不处理文件名中带有 # 字符的 url

Question

我使用此 javascript 代码从后端下载二进制文件。

        // This is only a helper class for Ajax request
        new SimpleAjaxRequest().safeRequest("mainpage/downloaddocument.php",
        {
            questionnaireid: questionnaire.id
        }, true, false, (response) =>
        {
            fetch(response.data.url) // This url is like "xxxx.com/download/filename #1.xlsx"
                .then(resp => resp.blob())
                .then(blob =>
                {
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = url;
                    // the filename you want
                    a.download = response.data.name;
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                })
                .catch(() => alert('Document not found!'));
        });
}

但是 link 正在尝试获取名为“xxxx.com/download/filename”的文件。所以它停在“#”字符处。有什么方法可以让它工作，还是我必须用其他东西替换整个代码？

Answer 1

在url中，#表示发送到服务器的url部分的结尾和“散列”或“片段”的开始在页面上滚动到哪个标题的客户端。因此，# 之后的任何内容都将被服务器忽略。

通过将 # 替换为 url-encoded 版本来修复它：%23。使用 encodeURIComponent.

自动执行此操作

encodeURIComponent('abc#.xlsx') === 'abc%23.xlsx'.

您只想编码最后一个 / 之后的部分，而不是整个 url。

获取 blob 不处理文件名中带有 # 字符的 url

Fetch blob is not handling url with # character inside the filename

javascript

blob

fetch