如何解决在 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
函数用法的更多详细信息。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。