隐藏 HTML 中的下载链接

Question

我以通过登陆页面从我的网站下载的形式提供 PDF 文档。

我想隐藏地址栏中显示的 URL/链接以及当我将鼠标悬停在网页上的下载按钮上时显示的 URL/链接，以便无法共享该链接。

做到这一点的最佳方法是什么？请仔细解释一下。

谢谢

Answer 1

好吧，你不能用纯 HTML 来做到这一点。您可以使用各种技巧，但它们可能会给用户体验带来问题，您需要使用服务器端语言。

您可以做的是创建一个 php 页面，按照您想要的方式命名它（比方说

download.php

），然后链接到该页面。页面应该是这样的：

// Path to the file
$path = '/home/folder/yourfile.pdf';

// This is based on file type of $path, but not always needed    
$mm_type = "application/octet-stream";

//Set headers
header("Pragma: public");
header("Expires: 0");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-Type: " . $mm_type);
header("Content-Length: " .(string)(filesize($path)) );
header('Content-Disposition: attachment; filename="'.basename($path).'"');
header("Content-Transfer-Encoding: binary\n");

// Outputs the content of the file
readfile($path); 

exit();

这样，您只需链接到您的

download.php

页面，它就会下载/打开 PDF，如下所示：

<a href="http://www.somesite.com/download.php">Download</a>

根据

BenjaminC

建议进行编辑

您的另一个机会是将其连接到数据库。数据库有一个名为

downloads_table

的表，里面有 2 个字段：

1. 秘密：

   char(32)

2. 已下载：

   int(1) dafault 0

然后创建一个

md5

字符串 $秘密 = md5(rand(1000, 9999999));

将其放在

secret

字段内，创建链接：

 <a href="http://www.somesite.com/download.php?s=ahanlskdhf78asdf87absdfas8d7f6">Download</a>

用户收到/看到一个链接，按下后您将编辑上述代码的第一行以检查数据库，如果

downloaded

字段 = 0，则继续下载，否则用户会看到错误页面。 这样只能下载一次。

Answer 2

将其放在网页正文中的某个位置：

并将其放置在网页的某个位置：

<script>
    function download() {
        document.getElementById("download").src = "/path/to/download";
    }
<script>

然后，在按钮的元素上（在 div 的示例中）在标签中执行此操作：

<div onclick="download()"> </div>

但是，如果这是一个链接，您会想要这样做：

<a href="#" onclick="download()"> </a>

元素需要 href 才能正常工作。

Answer 3

（编辑）

如果将来这对任何人都有用，可以在这个小提琴中看到该功能：https://jsfiddle.net/aznjr87g/

它从 google 下载 2.1.3 jquery.min.js。

（编辑完）

这可以使用 Html5 的 Download 属性来实现。

<a href="#" download="path/path/file.dpf">Download PDF</a>

如果您将鼠标悬停在其上，它只会显示 yoursite.com/#

Answer 4

    <div id="downloadButton">Download PDF</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Replace 'YOUR_PDF_URL_HERE' with the actual URL of your PDF file
    var pdfUrl = 'YOUR_PDF_URL_HERE';
    
    // Extract filename from the URL
    var filename = pdfUrl.split('/').pop();
    
    // Update button text to display filename
    document.getElementById('downloadButton').innerText = filename;
    
    // Add event listener to trigger download when button is clicked
    document.getElementById('downloadButton').addEventListener('click', function() {
        window.location.href = pdfUrl;
    });
});
</script>

<style>
#downloadButton {
    /* Add your button styles here */
    cursor: pointer;
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-align: center;
}

#downloadButton:hover {
    background-color: #0056b3;
}
</style>

这是您可以在将鼠标悬停在下载按钮上时隐藏 url 链接的代码，我将此方法应用于我的下载 apk pro 网站及其工作