Question

我有一个href链接，可从我的应用程序下载模板。它可以在Chrome和IE上正常运行，但不能在移动设备（Android和iPhone）上运行

我有此功能，可通过单击链接来调用。

fileUrl: any;

getFileTemplate(): any {
    this.productService.getFile().subscribe((response) => {
      const fileContent = response;
      // An application or a document that must be opened in an application
      const blob = new Blob([fileContent], { type: 'application/octet-stream' });
      if (window.navigator.msSaveBlob) {
        // to download in IE
        window.navigator.msSaveBlob(blob, 'abcd.csv');
      } else {
        this.fileUrl= this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(blob));
        const a = document.createElement('a');
        a.href = window.URL.createObjectURL(blob);
        a.download = 'abcd.csv';
        a.click();
      }
    });
  }

在HTML文件中

`<a href="javascript:void(null)"
   (click)="getFileTemplate();"
   id="link-inline-excel"
   class="u-text--document u-text--document-link"
   download="abcd.csv"><span>Title my file (7MB)</span></a>`

这不适用于移动设备。我在这里想念东西吗？

Answer 1

您或多或少都在正确的轨道上。为了使您的代码正常工作，我可以做的最小修改是在getFileTemplate上增加一行：

getFileTemplate(): any {
  this.productService.getFile().subscribe((response) => {
    const fileContent = response;
    // An application or a document that must be opened in an application
    const blob = new Blob([fileContent], { type: 'application/octet-stream' });
    if (window.navigator.msSaveBlob) {
        // to download in IE
      window.navigator.msSaveBlob(blob, 'abcd.csv');
    } else {
      this.fileUrl= this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(blob));
      const a = document.createElement('a');
      a.href = window.URL.createObjectURL(blob);
      a.download = 'abcd.csv';

      document.body.appendChild(a); //<-- Need to add the link to the DOM

      a.click();
    }
  });
}

当然，尽管这可行，但这不是一个很干净的解决方案。首先，用户将能够看到新添加的链接。另外，Angular文档建议使用Renderer2来避免直接进行DOM操作。

这里是StackBlitz example，牢记这两个方面。

该示例创建一个单独的Downloader组件，该组件的作用类似于基本锚元素，但封装了触发下载的逻辑。然后，您可以在想要触发文件下载的任何地方使用此组件。

答案的要点是以下代码段：

...

constructor(
  private element: ElementRef,
  private renderer: Renderer2
) {}

...

download(data: Blob, filename: string) {
  if(!data) {
    return;
  }

  //Create the anchor element
  const link: any = this.renderer.createElement('a');

  //Create the URL
  const url: any = URL.createObjectURL(data);

  //Set the attributes for the anchor
  this.renderer.setProperty(link, 'href', url);
  this.renderer.setProperty(link, 'download', filename);

  //Ensure that the anchor will be hidden, both visibly and from screen readers
  this.renderer.setStyle(link, 'display', 'none');

  //Add the anchor element to the DOM
  this.renderer.appendChild(this.element.nativeElement, link);

  //Trigger click on the anchor element to trigger the download
  link.click();

  //Cleanup by removing the element and revoking the URL.
  this.renderer.removeChild(this.element.nativeElement, link);
  URL.revokeObjectURL(url);

  //Note: This is just a basic example, which does do DOM manipulation
  //on every download. You could, instead, append the element in OnInit,
  //adjusting its attributes when a download is triggered, and then
  //remove the element in OnDestroy.
}

Angular / Javascript-下载文件链接在移动设备上不起作用

1 个答案: