如何在HTML中创建下载链接?

我对HTML有一个基本的概念。我想在我的样本网站创建下载链接，但我不知道如何创建它。我如何制作一个下载文件的链接而不是访问它?

774301 次浏览
小开
最佳答案

这个答案已经过时了。我们现在有download属性。(另见this 链接到MDN)

如果你所说的“下载链接”是指下载文件的链接，那就使用

  <a href="http://example.com/files/myfile.pdf" target="_blank">Download</a>

target=_blank会在下载开始前出现一个新的浏览器窗口。当浏览器发现该资源是一个文件下载时，该窗口通常会关闭。

请注意，浏览器已知的文件类型(例如JPG或GIF图像)通常会在浏览器中打开。

你可以尝试发送正确的头文件来强制下载，比如在这里。(需要服务器端脚本或访问服务器设置。)

小开

下载链接是指向您想要下载的资源的链接。它的构造方式与其他链接相同:

<a href="path to resource.name of file">Link</a>


<a href="files/installer.exe">Link to installer</a>
小开

像这样

<a href="www.yoursite.com/theThingYouWantToDownload">Link name</a>

因此，example.com网站上的文件名。jpg将如下所示

<a href="www.example.com/name.jpg">Image</a>
小开

要链接到该文件，请执行与任何其他页面链接相同的操作:

<a href="...">link text</a>

要强制下载即使它们有嵌入式插件(Windows + QuickTime = ugh)，你可以在htaccess / apache2.conf中使用这个:

AddType application/octet-stream EXTENSION
小开

在支持HTML5的现代浏览器中，可以实现以下功能:

<a href="link/to/your/download/file" download>Download link</a>

你也可以用这个:

<a href="link/to/your/download/file" download="filename">Download link</a>

这将允许您更改实际正在下载的文件的名称。

小开
除了前面提到的HTML5的<a download属性，
浏览器的下载到磁盘行为也可以由以下http响应头触发 
Content-Disposition: attachment; filename=ProposedFileName.txt;

这是HTML5出现之前的做法(现在支持HTML5的浏览器仍然适用)。

小开

这个线程现在可能很古老了，但它在html5中适用于我的本地文件。

pdf文件:

<p><a href="file:///........example.pdf" download target="_blank">test pdf</a></p>

这将在一个新的窗口中打开pdf并允许你下载它(至少在firefox中)。对于任何其他文件，只要使它的文件名。对于图像和音乐，你会希望将它们存储在与你的网站相同的目录中。所以就像

<p><a href="images/logo2.png" download>test pdf</a></p>
小开

下载属性是HTML5中<a>标签的新属性

< p > <a href="http://www.odin.com/form.pdf" download>Download Form</a> < br >或< br > <a href="http://www.odin.com/form.pdf" download="Form">Download Form</a> < / p >

我更喜欢第一个，它在任何扩展方面都是可取的。

小开

我知道我迟到了，但这是我搜索1小时后得到的

 <?php
$file = 'file.pdf';


if (! file) {
die('file not found'); //Or do something
} else {
if(isset($_GET['file'])){
// Set headers
header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename=$file");
header("Content-Type: application/zip");
header("Content-Transfer-Encoding: binary");
// Read the file from disk
readfile($file); }
}


?>

对于可下载链接，我是这样做的

<a href="index.php?file=file.pdf">Download PDF</a>
小开

这里还有一个更微妙的方法。

我想有链接，既允许在浏览器播放和显示，以及一个纯粹的下载。新的下载属性很好，但不能一直工作，因为浏览器播放或显示文件的强制要求仍然很强。

但. .这是基于检查URL的文件名的扩展名!您不希望篡改服务器的扩展映射，因为您希望以两种不同的方式交付相同的文件。因此，对于下载，您可以通过将文件软链接到一个对扩展映射不透明的名称来欺骗它，然后使用下载的重命名功能来修复该名称。

<a target="_blank" download="realname.mp3" href="realname.UNKNOWN">Download it</a>
<a target="_blank" href="realname.mp3">Play it</a>

我希望只是抛出一个虚拟的查询结束或以其他方式混淆扩展将工作，但遗憾的是，它没有。

小开

如果您将文件托管在AWS中，这可能适用于您。代码很容易理解。由于浏览器不支持同源下载链接，解决这个问题的一种方法是将图像URL转换为base64 URL。然后，你就可以正常下载了。

    var canvas = document.createElement("canvas")
var ctx = canvas.getContext('2d')


var img = new Image()
img.src = your_file_url + '?' + new Date().getTime();
img.setAttribute('crossOrigin', '')


var array = your_file_url.src.split("/")
var fileName = array[array.length - 1]


img.onload = function() {
canvas.width = img.naturalWidth
canvas.height = img.naturalHeight
ctx.drawImage(img,
0, 0, img.naturalWidth, img.naturalHeight,
0, 0, canvas.width, canvas.height)


var dataUrl = canvas.toDataURL("image/png", 1)


var a = document.createElement('a')
a.href = dataUrl
a.download = fileName
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
小开

你可以用两种方式使用

<a href="yourfilename" download>Download</a>

it will download file with original name In Old Browsers this option was not available

2日

<a href="yourfilename" download="newfilename">Download</a>

Here You have option to rename your file and download with a different name


提交答案