为服务器上生成的文件创建“另存为”按钮

Question

在我们的 UI 上，我们允许用户填写一些详细信息，然后我们需要他们根据输入的详细信息生成 PDF 文件。因此，我对服务器进行 WebAPI 调用，发布一些详细信息，然后生成二进制文件。

我们不希望保存二进制文件，而是生成一个“立即下载”按钮，它会在 PDF 准备好时下载它。

我希望生成文件，并将结果返回给状态变量。

this.setState({ myFile: result });

结果是我从 API 返回的结果。

然后当'result != null'，启用下载按钮。当用户单击该按钮时，this.state.myFile 将下载 ... 使用我提供的名称（通过代码）。

我不确定是否可以在 state 中保存二进制数据。

有没有办法让按钮触发从状态变量下载？最后的手段是在服务器上生成并存储文件，然后提供一个链接 - 但如果我们可以将它存储在状态中并允许用户在文件处于状态时单击“下载”按钮（它们很小- 大约在 100k 和 300k 之间）。

Answer 1

你可以使用类似下面的东西

var file = window.URL.createObjectURL(result);
var a = document.createElement("a");
a.href = file;
a.download = "Name of PDF";
document.body.appendChild(a);
a.click();