我对HTML有一个基本的概念。我想在我的样本网站创建下载链接,但我不知道如何创建它。我如何制作一个下载文件的链接而不是访问它?
当前回答
如果您将文件托管在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)
}
其他回答
这个答案已经过时了。现在我们有了download属性。(另见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>
如果您将文件托管在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="...">link text</a>
要强制下载即使它们有嵌入式插件(Windows + QuickTime = ugh),你可以在htaccess / apache2.conf中使用这个:
AddType application/octet-stream EXTENSION
下载属性是HTML5中<a>标签的新属性
<a href="http://www.odin.com/form.pdf" download>下载表单</a> 或 <a href="http://www.odin.com/form.pdf" download="Form">下载表单</a> .
我更喜欢第一个,它在任何扩展方面都是可取的。
推荐文章
- 是否有一个链接到GitHub下载文件的最新版本的存储库?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击
- Angular 2模板中的标签是什么意思?
- 如何设置身体高度溢出滚动
- 在输入type="number"时禁用webkit的旋转按钮?
- 如何在另一个元素之后添加一个元素?
- 我如何有效地解析HTML与Java?
- “ ”和“”有什么区别?
- 如何使用JavaScript代码获得浏览器宽度?
- 防止滚动条增加到Chrome页面的宽度
- 使用图像而不是单选按钮
- 我可以嵌套一个<按钮>元素内< >使用HTML5?
- 设置TextView文本从html格式的字符串资源在XML
- 为什么我的球(物体)没有缩小/消失?