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


当前回答

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

pdf文件:

< p > < a href = "文件 :///........ example.pdf“下载目标= "平等" >测试pdf < / > < / p >

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

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

其他回答

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

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

你也可以用这个:

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

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

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

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

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

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

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

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

如果您将文件托管在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)
    }

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

<a href="http://www.odin.com/form.pdf" download>下载表单</a> 或 <a href="http://www.odin.com/form.pdf" download="Form">下载表单</a> .

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

除了前面提到的HTML5的<a download属性之外, 浏览器的下载到磁盘行为也可以由以下HTTP响应头触发:

Content-Disposition: attachment; filename=ProposedFileName.txt;

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