在Angular项目中保存excel文件时，有没有办法强制提示另存为对话框

Question

在我的 Angular 6 项目中，每当用户尝试下载 excel 文件（我正在使用 blob）时，我都会尝试强制打开另存为对话框。有没有办法在不手动更改浏览器设置的情况下做到这一点？

谢谢。感谢您的帮助。

Answer 1

当我的用户下载文件时，我通常只是为文件名添加时间戳。 至少它保证文件名是唯一的。

为了在 Angular 中触发这个，我使用了这个不可见的 href 技巧。

public onDownloadClick() {
    const filename = `${new Date().toISOString()}.txt`;

    // create invisible download link.
    const element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(sgf));
    element.setAttribute('download', filename);
    element.style.display = 'none';
    document.body.appendChild(element);

    // click it, and remove it.
    element.click();
    document.body.removeChild(element);
}

但它并没有真正显示“另存为”对话框，它只是立即开始下载文件。

如果你真的想使用另存为对话框，你需要在你的 Angular 项目中添加一个依赖项。

npm install file-saver
npm install @types/file-saver --save-dev

接下来，您可以在组件中导入依赖项。

import { saveAs } from 'file-saver';

public onDownloadClick() {
    const blob = new Blob(...);
    saveAs(blob, 'defaultFilename.xlsx');.
}

github 页面显示了有关saveAs 函数使用的更多详细信息。