现在，许多应用程序允许其用户 上传 和 下载 文件。例如，抄袭检查工具允许用户上传一个带有一些文本的文档文件。之后，它检查是否有抄袭行为，并生成一份报告，用户可以下载。

每个人都知道使用输入型文件来创建一个上传文件按钮，但很少有开发者知道使用JavaScript/JQuery来创建一个文件下载按钮。

本教程将教授各种方法，在点击HTML按钮或JavaScript时触发文件下载。

只要我们在标签上添加下载属性，我们就可以使标签作为一个文件下载按钮工作。我们需要把文件的网址作为href属性的一个值传递给用户，让用户在点击链接时可以下载任何特定的文件。

用户可以按照下面的语法来使用标签来创建一个文件下载按钮。

在上面的语法中，我们已经添加了下载属性和文件名作为下载属性的值。

在下面的例子中，我们把图片的URL作为HTML 标签的href属性的值来传递。我们使用了下载按钮作为标签的锚文本。

每当用户点击这个按钮，他们可以看到它触发了文件的下载。

Click the below button to download the image file

window.open()方法在新标签中打开一个URL。我们可以把URL作为open()方法的一个参数来传递。

如果open()方法不能打开该URL，它就会触发文件下载。

用户可以按照下面的语法来使用window.open()方法来创建一个文件下载按钮。

在上面的语法中，我们把文件的URL作为window.open()方法的一个参数来传递。

在下面的例子中，只要用户点击了按钮，就会触发downloadFile()函数。在downloadFile()函数中window.open()方法触发了文件的下载。

Click the below button to download the image file

这种方法将允许用户在输入栏中写文字。之后，利用输入的文本，我们将创建一个新文件，并允许用户下载该文件。

用户可以按照下面的语法，从自定义文本中创建一个文件，并允许用户下载它。

在上面的语法中，我们对文本进行编码，将其附加到文件中，并使用标签来创建。

第2步 – 使用 JavaScript createElement() 方法创建一个自定义的 HTML 标签。

第3步 – 使用setAttribute()方法，为hidden_a这个HTML元素设置href属性。使用编码后的文本作为href属性的值。

第4步 – 再次使用setAttribute()方法，为hidden_a元素设置带有下载文件名的download属性。

第5步 – 将hidden_a元素追加到正文中。

第6步 – 使用click()方法来触发对hidden_a元素的点击。当它调用click()方法时，它开始下载。

第7步 – 使用removeChild()方法从文档主体中删除hidden_a元素。

在下面的例子中，用户可以在输入框中输入任何自定义文本，然后点击按钮，使用JavaScript触发文件下载。我们已经实现了上述算法来触发文件下载。

Click the below button to download the file with custom text.

axios库允许我们从任何URL中获取数据。因此，我们将从任何URL或文件路径中获取数据，之后，我们将把这些数据设置为标签的href属性的值。同时，我们将使用setAttribute()方法给标签添加一个下载属性，并触发click()方法来开始下载文件。

用户可以按照下面的语法来使用axios，用JavaScript来触发一个文件下载。

在上面的语法中，axios.get()方法允许我们从存储在结果变量中的file_path中获取数据。之后，我们使用new Blob()构造函数将数据转换为Bolb对象。

在下面的例子中，我们使用axios从URL中获取数据，将其转换为Blob对象，并将其设置为href属性的值。

之后，我们从JavaScript中点击了元素来触发文件下载。

Click the below button to download the file with custom text.