Question

我知道如何在HTML中使用<a href="file.jpg" download="name">块，但我担心这对此项目无效。

我想有一个下载链接（毫不奇怪）下载文件。我还想在屏幕上显示一个文本框，允许用户命名下载的文件。

网站看起来像这样：

＆＃13;

Name:<input type="text" name="Name" value="Custon Name">
<br>
<button type="button">Download</button>

＆＃13;

我希望<button>块使用onclick"function()"来下载文件。该函数将从文本框中获取文本，并在下载时使用它来命名文件。我需要帮助的是找到一种使用Javascript或JQuery命名文件的方法，方法与download="name"相同。

我已经找了一段时间来做这个，但没有运气。这个项目可能吗？如果是这样，它是如何完成的？

Answer 1

您可以通过动态创建a元素并将输入的名称设置为download属性来实现：

function downloadIt() {
  var name = document.getElementsByName("Name")[0].value;
  if (name && name !=='') {
    var link = document.createElement('a');
    link.download = name;
    link.href ="file.png";  
    link.click();
  }
}

这是working Demo，您也可以使用JavaScript检查my answer文件下载。

Answer 2

当然可以。让我们动态地在页面中添加一个隐藏的链接并单击它，从而模拟“下载”属性的效果。

HTML：

FROM heroku/heroku:16

# Ruby dependencies
RUN apt-get update -qq && \
  apt-get install -y -q --no-install-recommends \
    build-essential\
    libpq-dev\
    libxml2-dev\
    libxslt1-dev\
    nodejs\
    npm \
    qt5-default\
    libqt5webkit5-dev\
    gstreamer1.0-plugins-base\
    gstreamer1.0-tools\
    gstreamer1.0-x\
    xvfb \
  && rm -rf /var/lib/apt/lists/* \
  && truncate -s 0 /var/log/*log

# Ruby heroku
RUN apt remove -y --purge ruby && curl -s --retry 3 -L https://heroku-buildpack-ruby.s3.amazonaws.com/heroku-16/ruby-2.3.4.tgz | tar -xz

# Node heroku
RUN export NODE_VERSION=6.11.0 && \
  curl -s --retry 3 -L https://nodejs.org/dist/v$NODE_VERSION/node-v$NODE_VERSION-linux-x64.tar.gz -o /tmp/node-v$NODE_VERSION-linux-x64.tar.gz && \
  tar -xzf /tmp/node-v$NODE_VERSION-linux-x64.tar.gz -C /tmp && \
  rsync -a /tmp/node-v$NODE_VERSION-linux-x64/ / && \
  rm -rf /tmp/node-v$NODE_VERSION-linux-x64*

WORKDIR /var/app

JS：

Name:<input type="text" name="Name" id="myName" value="Custom Name">
<br>
<button type="button" onclick="download()">Download</button>

工作示例（在Chrome上测试）：https://jsfiddle.net/72qepvng/

使用Javascript或JQuery自定义下载名称

2 个答案: