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

问题描述

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

谢谢。感谢您的帮助。

解决方法

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

为了在 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 函数用法的更多详细信息。

angular save-as