html 如何制作下载链接？

Posted 2023-04-12

例如<a href="xxx.pdf">下载</a>这么写会在IE中直接打开pdf文件，而不是我想要的弹出下载窗口。怎么做才能让这个链接用鼠标左键点击不直接打开，而是提示下载呢？
别告诉我用鼠标右键点击然后选择目标另存为~那不是我想要的。我要鼠标左键点击这个超链接会弹出下载窗口的方法。最好是不用js的，能在html里直接实现最好。
还有啊，比如一张图片的超链接<a href=xxx.jpg>下载</a>也是这样，我不想要点击这个链接直接在IE里打开看这张图片，我要下载窗口！
我知道如果不安装Adobe Reader的话，点击那个链接会弹出下载窗口。但是我不能要求所有点击它的人都卸载Adobe Reader，而且不安装Adobe Reader的话下载后也无法打开pdf文件吧……所以我想要一个点它一定是弹出下载窗口的方法。

参考技术A 把pdf文件做成压缩文件再提供下载吧追问

没别的方法吗?这个我知道。

追答

或者把文件扩展名改名。再提示一下下载后把扩展名改回去

参考技术B 我也想制作一个，我也在网上找了找，还是没找到，我看别人都可以 参考技术C 我也想知道，但是我也不知道怎么弄

如何制作 HTML 反向链接？

【中文标题】如何制作 HTML 反向链接？

【英文标题】：How to make an HTML back link?

【发布时间】：2012-02-07 12:36:55

【问题描述】：

创建链接到前一个网页的<a> 标记的最简单方法是什么？基本上是一个模拟的后退按钮，但是一个实际的超链接。请仅提供客户端技术。

编辑 寻找能够在悬停时显示您将要单击的页面的 URL 的解决方案，例如普通的静态超链接。我不想让用户在悬停在超链接上时查看history.go(-1)。到目前为止我发现的最好的是：

<script>
  document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>

document.referrer 可靠吗？跨浏览器安全吗？我很乐意接受更好的答案。

【问题讨论】：

JavaScript 是一种客户端技术，一些客户端（比如我）只是选择禁用它（默认情况下）。这就是客户的力量！ :D 但是，是的，HTML 本身无法确定上一页是什么。

【参考方案1】：

还有一种方式：

<a href="javascript:history.back()">Go Back</a>

【讨论】：

按钮：<button type="button" onclick="javascript:history.back()">Back</button>

这种方法的一个缺点是标准浏览器功能，例如“悬停查看 URL”和右键单击 -> 复制链接将被破坏。

我认为更多的是语义。返回“按钮”比返回“链接”更贴切。这两个选项都很棒，而且两个选项都以自己的方式正确。

这应该是这个页面上唯一的答案——所有其他的要么是重复的，要么是不太好的，因此只是简单地掩盖了这个......

【参考方案2】：

这个解决方案的好处是在悬停时显示链接到页面的 URL，就像大多数浏览器默认做的那样，而不是 history.go(-1) 或类似的：

<script>
    document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>

【讨论】：

这也有利于覆盖引用页面打开时链接上带有target="_blank" 属性的情况，而history.go(-1) 没有。

此解决方案丢失了 # 之后的链接部分，'javascript:history.back()' 工作正常。

此解决方案的缺点是您将无法返回超过一页。例子;导航到页面 a、b、c、d - 反复按返回按钮 c、d、c、d、c、d。将此与 .history.back() a,b,c,d 反复按下后退按钮 d,c,b,a

进行比较

我怎样才能做到，如果没有后页，然后重定向到一个固定的urlhistory.back() || "myaction/mycontroller"

@orangesherbert 我已经在一个新答案中解决了这个问题（这也满足“显示 URL”的要求。

【参考方案3】：

此解决方案为您提供两全其美的解决方案

用户可以将鼠标悬停在链接上以查看 URL 用户最终不会得到损坏的后台堆栈

更多细节在下面的代码 cmets 中。

var element = document.getElementById('back-link');

// Provide a standard href to facilitate standard browser features such as 
//  - Hover to see link
//  - Right click and copy link
//  - Right click and open in new tab
element.setAttribute('href', document.referrer);

// We can't let the browser use the above href for navigation. If it does, 
// the browser will think that it is a regular link, and place the current 
// page on the browser history, so that if the user clicks "back" again,
// it'll actually return to this page. We need to perform a native back to
// integrate properly into the browser's history behavior
element.onclick = function() 
  history.back();
  return false;

<a id="back-link">back</a>

【讨论】：

很棒的答案。在自定义绑定的上下文中，我几乎在所有淘汰项目中都使用它。

很好的答案！我必须将return false; 添加到 Chrome 中的 onclick 函数中，以防止其将当前页面添加到浏览器历史记录中。

【参考方案4】：

你可以试试javascript

<A HREF="javascript:history.go(-1)">

参考JavaScript Back Button

编辑

显示推荐网址http://www.javascriptkit.com/javatutors/crossmenu2.shtml

并按如下方式在鼠标悬停中发送元素本身

function showtext(thetext) 
  if (!document.getElementById)
    return
  textcontainerobj = document.getElementById("tabledescription")
  browserdetect = textcontainerobj.filters ? "ie" : typeof textcontainerobj.style.MozOpacity == "string" ? "mozilla" : ""
  instantset(baseopacity)
  document.getElementById("tabledescription").innerHTML = thetext.href
  highlighting = setInterval("gradualfade(textcontainerobj)", 50)

 <a href="http://www.javascriptkit.com" onMouseover="showtext(this)" onMouseout="hidetext()">JavaScript Kit</a>

查看jsfiddle

【讨论】：

你能解释一下最后的编辑吗？我只想要一个正常的链接，就像它在大多数浏览器底部显示的那样。

因为所有浏览器都显示所有你不需要做任何事情，但如果你想在你自己的 div 中显示它，你可以在页面的任何地方指定一个 div tabledescription 以显示链接鼠标悬停在锚标签上

【参考方案5】：

最简单的方法是使用history.go(-1);

试试这个：

<a href="#" onclick="history.go(-1)">Go Back</a>

【参考方案6】：

使用锚标签<a>返回上一页，下面是2个工作方法，其中第一个是更快并且有一个很棒返回上一页的优势。

这两种方法我都试过了。

1)

<a href="#" onclick="location.href = document.referrer; return false;">Go Back</a>

如果您在当前浏览器窗口中单击了一个链接并在新标签中打开了链接，则上述方法 (1) 非常有效。

2)

<a href="javascript:history.back()">Go Back</a>

上述方法（2）只有在您点击了一个链接并且在当前浏览器窗口中在当前选项卡中打开了链接时才能正常工作。

如果您在新标签页中有打开的链接，它将不起作用。如果在网络浏览器的新标签页中打开链接，这里history.back() 将不起作用。

【参考方案7】：

后退链接是将浏览器向后移动一页的链接，就像用户单击了大多数浏览器中可用的后退按钮一样。反向链接使用 JavaScript。如果您的浏览器支持 JavaScript（确实如此）并且如果它支持反向链接所必需的 window.history 对象，它会将浏览器向后移动一页。

简单的方法是

<a href="#" onClick="history.go(-1)">Go Back</a>

或者：

function goBack() 
  window.history.back()

<a href="#" onclick="goBack()" />Go Back</a>

一般来说，后退链接不是必需的……后退按钮通常就足够了，而且通常您也可以简单地链接到您网站中的上一页。但是，有时您可能希望提供指向几个“先前”页面之一的链接，这就是反向链接派上用场的地方。因此，如果您想以更高级的方式进行操作，请参考以下教程：

http://www.htmlcodetutorial.com/linking/linking_famsupp_108.html

【讨论】：

与投票最多的解决方案不同，这会保持用户的滚动位置。

@Ketri 您可以为该声明提供支持吗？它们应该是相同的：w3schools.com/jsref/met_his_back.asp

【参考方案8】：

试试这个

<a href="javascript:history.go(-1)"> Go Back </a>

【参考方案9】：

<a href="#" onclick="history.back();">Back</a>

【参考方案10】：

使用按钮的最佳方式是

<input type= 'button' onclick='javascript:history.back();return false;' value='Back'>

【参考方案11】：

您也可以使用history.back() 和document.write() 仅在确实有可以返回的地方时显示链接：

<script>
  if (history.length > 1) 
    document.write('<a href="javascript:history.back()">Go back</a>');
  
</script>

【讨论】：

document.write 会覆盖页面上的所有内容。为什么你会曾经使用它？

您必须在页面仍在加载时执行此脚本。

【参考方案12】：

history.go(-1) 在第二个域中单击或引用者为空时不起作用。

所以我们必须在到达这个域时存储historyCount，然后返回这一侧的导航次数减1。

// if referrer is different from this site
if (!document.referrer.includes(window.location.host)) 
  // store current history length
  localStorage.setItem('historyLength', `$history.length`);


// Return to stored referrer on logo click
document.querySelector('header .logo').addEventListener('click', 
  () =>
   history.go(Number(localStorage.getItem('historyLength')) - history.length -1)
);

【参考方案13】：

我使用了 window.history 并返回了一个 false 以便浏览器不会导航 href（默认行为）。

<a href="www.web.com" onclick="window.history.go(-1); return false;"> Link </a>