Question

我已经从base64构造了一个文件，我想将其保存到本地系统

dataURLtoFile(dataurl, filename, format) {
    const arr = dataurl.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type: format});
  }

使用此功能，我可以将base64转换为File。但是我想将此下载到我的本地系统。如何在Angle 2及以上版本中执行此操作？

Answer 1

您可以尝试下面的功能。 IT可以在IE10 +和其他常绿兼容的浏览器上运行

 createImageFromBlob(image: Blob) {
    if (window.navigator.msSaveOrOpenBlob) // IE10+
      window.navigator.msSaveOrOpenBlob(image, "myFile.jpg");
    else {
      var url = window.URL.createObjectURL(image);
      window.open(url);
    }
  }

Answer 2

指定下载位置对话框完全取决于浏览器。通过Javascript，您无法指定用户的桌面位置来下载文件。使用Javascript访问目录位置将导致严重的安全风险。最多可以更改浏览器设置，以每次都询问下载位置。

要在默认下载位置实现正常下载，可以使用filesaver

只需将其导入您的代码中即可：

import { saveAs } from 'file-saver'

并在您的downloadUrlToFile方法中使用saveAs。

dataURLtoFile(dataurl, filename, format) {
    const arr = dataurl.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    saveAs(new File([u8arr], filename, {type: format}));
}

在此处查看示例：https://stackblitz.com/edit/angular-xrubur?file=src%2Fapp%2Fapp.component.ts

Answer 3

不需要外部库来触发“另存为...”窗口（例如file-saver，这与提到的节点filesaver不同）在这里的另一个答案中，是出于其他目的。

我发现的最简单的方法是在组件的一种方法中创建一个<a>元素：

saveAFile(): void {
  const dlink: HTMLAnchorElement = document.createElement('a');
  dlink.download = 'myfile.txt'; // the file name
  const myFileContent: string = 'I am a text file! ?';
  dlink.href = 'data:text/plain;charset=utf-16,' + myFileContent;
  dlink.click(); // this will trigger the dialog window
  dlink.remove();
}

哪些可以通过模板中的click事件来调用，例如：

<button (click)="saveAFile()">Save file</button>

我最初也将文件的内容转换为Blob，但是我很快注意到，即使使用正确的字符集，复杂的字符也可能在翻译中丢失（例如?）。

您可能还会发现complete list of media/MIME types对于创建非纯文本文件（例如 text / csv 或 application / json ）很有用。

如何将文件保存到我的桌面文件夹angular 6

3 个答案: