Javascript 使用Fetch()设置文件下载的文件名

Javascript 使用Fetch()设置文件下载的文件名,javascript,node.js,reactjs,express,Javascript,Node.js,Reactjs,Express,尝试了具有标题的不同解决方案,但无法设置下载文件的文件名: NodeJs服务器端(express): 客户端(React+JS): 我在客户端收到一个正确的文件,但文件名类似于“93e43995-e4c2-4184-af62-a268d0b456e2.xlsx” 在客户端控制台(网络选项卡)中,我可以看到: Request URL: blob:https://192.168.0.34:8443/e60d73fb-b423-4176-beb3-103028f8f225 Request Method

尝试了具有标题的不同解决方案,但无法设置下载文件的文件名:

NodeJs服务器端(express):

客户端(React+JS):

我在客户端收到一个正确的文件,但文件名类似于“93e43995-e4c2-4184-af62-a268d0b456e2.xlsx”

在客户端控制台(网络选项卡)中,我可以看到:

Request URL: blob:https://192.168.0.34:8443/e60d73fb-b423-4176-beb3-103028f8f225
Request Method: GET
Status Code: 200 OK
Referrer Policy: strict-origin-when-cross-origin
Content-Length: 5823
Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
Provisional headers are shown
Upgrade-Insecure-Requests: 1
如何设置标题以设置文件名?可能是某个地方的syntex出错了?请不要使用JS a href对象提供答案,如a.click。这是我无法忍受的

Apoorva的更新,谢谢,看起来不错,但出现了一些错误:

 Unexpected token, expected ","

  252 |              const filename =  response.headers.get('Content-Disposition').split('filename=')[1];
  253 |              return {response: res.blob(), filename: filename}})
> 254 |       .then( ({response, filename} => {
      |                                    ^

能否请您再次检查?

在将响应转换为blob之前,您需要从标题中获取它

const options = {
      headers: {
        'Content-Disposition': 'attachment; filename="filename.xlsx";'
      }
    };
    fetch("/api", options)
      .then( res => {
             const filename =  res.headers.get('Content-Disposition').split('filename=')[1];
             return {response: res.blob(), filename: filename}})
      .then( ({response, filename}) => {
        var file = window.URL.createObjectURL(response);
        window.location.assign(filename);
        console.log(filename)
    }).catch((e) => {console.log(e)})


谢谢你的回复,很有帮助,但是出现了错误。请检查更新的问题。我试着自己调试,但你的编辑可能会更快?现在检查,我已经更新了答案,这只是一个打字错误。它现在可以工作了吗?它会抛出任何错误吗?此外,请尝试检查文件名。现在应该可以了。然后放入一个调试器并检查它的运行情况。这是因为响应可能是尝试以下`window.URL.createObjectURL(新Blob(响应,{type:“提供类型”});`。可能接下来的响应不是blob,这就是为什么尝试放置控制台来检查这些对象的值可能有助于调试的原因。
 Unexpected token, expected ","

  252 |              const filename =  response.headers.get('Content-Disposition').split('filename=')[1];
  253 |              return {response: res.blob(), filename: filename}})
> 254 |       .then( ({response, filename} => {
      |                                    ^
const options = {
      headers: {
        'Content-Disposition': 'attachment; filename="filename.xlsx";'
      }
    };
    fetch("/api", options)
      .then( res => {
             const filename =  res.headers.get('Content-Disposition').split('filename=')[1];
             return {response: res.blob(), filename: filename}})
      .then( ({response, filename}) => {
        var file = window.URL.createObjectURL(response);
        window.location.assign(filename);
        console.log(filename)
    }).catch((e) => {console.log(e)})