Flask集成Autoindex：点击图片链接直接下载而非打开的JS实现

Absolutely! You can easily make your image links trigger a download instead of opening the image in the browser using JavaScript, even without editing the Autoindex-generated HTML directly. Here's a targeted solution for your setup:

Step-by-Step Solution #

Add this JavaScript code to your page (you can include it in your Flask base template, or use a userscript tool like Tampermonkey to inject it automatically when visiting the directory page):

// Wait for the page to fully load before modifying elements
document.addEventListener('DOMContentLoaded', function() {
  // Target all links inside the "name" table cells (Autoindex's file links)
  const fileLinks = document.querySelectorAll('td.name a');
  
  // Define which file extensions should trigger a download
  const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp'];
  
  fileLinks.forEach(link => {
    const linkHref = link.getAttribute('href');
    // Check if the link points to an image file
    const isImage = imageExtensions.some(ext => linkHref.toLowerCase().endsWith(ext));
    
    if (isImage) {
      // Add the "download" attribute to force the browser to download the file
      // Using the full href as the value ensures the correct file is downloaded
      link.setAttribute('download', linkHref);
      
      // Optional: If you specifically want to empty the href (as in your example)
      // Uncomment the line below, note this will break right-click "open in new tab" functionality
      // link.setAttribute('href', '');
    }
  });
});

How This Works #

1. DOMContentLoaded Event: Ensures the code runs only after all page elements are loaded, so we don't try to modify links that haven't been rendered yet.
2. Targeted Selection: document.querySelectorAll('td.name a') precisely picks out the file links generated by Autoindex, which are nested inside table cells with the name class.
3. Image Filtering: We check each link's URL against a list of common image extensions to avoid modifying links to non-image files.
4. Download Attribute: Adding the download attribute tells the browser to download the file instead of navigating to it. Using the full URL as the attribute value ensures the correct file is fetched for download.

Optional Adjustment #

If you strictly want to match your example (setting href="" and moving the URL to download), uncomment the optional line in the code. Keep in mind this will disable right-click options like "Open in New Tab" for image links, since the href is empty.

内容的提问来源于stack exchange，提问作者John Doe