vue调用下载接口弹出保存文件窗口

Posted 2023-04-12

参考技术A 在vue中实现多个文件下载1.1 window.open1.2 iframe方法1.3 使用a标签2 element ui 实现弹窗 1在vue中实现多个文件下载 后端返回多个URL,前端...

创建一个弹出窗口，用户可以在保存文件时选择名称

我有一个代码，用户可以保存txt文件。在我正在使用this.title +'txt'的函数中，但是根据请求，用户希望能够编写/选择文件的名称。为此，我在想一个带有输入文本字段的弹出框，在函数内部某处，而不更改现有的html。这意味着我只想在调用函数时这样做。可以吗？

html页面中的按钮

    <button _ngcontent-c1="" class="btn btn-success">Spara insats och odds</button>

在download.service.ts中

    // Specifies JSON download
    downloadJSON() {
      this.download(this.title + '.txt', this.JSON, this.fileText)
    }

    // Specifies XML download
    downloadXML() {
      this.download(this.title + '.xml', this.XML,   this.xmlFile['body']);
    }

    // Creates downloadable link and triggers download
    download(filename, type, text) {
      var element = document.createElement('a');
      element.setAttribute('href', type + encodeURIComponent(text));
      element.setAttribute('download', filename);

      element.style.display = 'none';
      document.body.appendChild(element);

      element.click();

      document.body.removeChild(element);
    }

答案

Bootbox.js可以帮助你。

随着：bootbox.prompt(message, callback)

用一个简单的：

bootbox.prompt("This is the default prompt!", function(result){ console.log(result); });

您可以设置一个输入框，供用户填写所需的文件名。

见Bootbox Prompt Examples