如何使用JavaScript/Angular/AngularJS将文件下载到指定本地文件夹

Hey there! I get where you're coming from—having downloads default to the system folder can be annoying when you want to organize files directly. Let's walk through what's possible here.

The Short Answer #

Due to browser security restrictions, you can't automatically force a download to a specific local folder without user interaction. The download attribute only lets you set the filename, not the path. But there's a modern API that lets users choose a folder explicitly, which might solve your problem.

Using the File System Access API #

Modern browsers support the File System Access API, which allows users to select a folder (via a native dialog) and then save files directly to it. Here's how you can implement this in AngularJS:

Step 1: Check for API Support #

First, verify the browser supports this feature to avoid errors:

if (!window.showDirectoryPicker) {
  alert("Your browser doesn't support custom folder downloads. Please use Chrome, Edge, or Firefox 111+.");
  return;
}

Step 2: Implement Folder Selection & File Save #

Here's a sample AngularJS controller function that handles the full workflow:

app.controller('PdfDownloadController', function($scope, $http) {
  $scope.downloadPdfToCustomFolder = async function() {
    try {
      // 1. Prompt user to select a target folder
      const folderHandle = await window.showDirectoryPicker();

      // 2. Fetch your PDF file (update the URL to match your API endpoint)
      const pdfResponse = await $http.get('/your-pdf-endpoint', { responseType: 'blob' });
      const pdfBlob = pdfResponse.data;

      // 3. Create a file handle in the selected folder
      const fileHandle = await folderHandle.getFileHandle('my-custom-pdf.pdf', { create: true });

      // 4. Write the PDF blob to the selected folder
      const writableStream = await fileHandle.createWritable();
      await writableStream.write(pdfBlob);
      await writableStream.close();

      alert('PDF saved successfully to your chosen folder!');
    } catch (error) {
      // Handle user cancellation or unexpected errors
      if (error.name !== 'AbortError') {
        console.error('Error saving PDF:', error);
        alert('Failed to save PDF. Please try again.');
      }
    }
  };
});

Step 3: Add a Trigger Button in Your Template #

<button ng-click="downloadPdfToCustomFolder()">Download PDF to Selected Folder</button>

Key Details to Keep in Mind #

• Browser Compatibility: This API works in Chrome, Edge, and Firefox 111+. Safari doesn't support it yet (as of 2024), so you'll need a fallback for Safari users.
• User Consent is Mandatory: The user must explicitly select the folder every time (you can request persistent access, but it's still user-controlled). This is a critical security measure to prevent malicious scripts from accessing local files.
• Fallback for Older Browsers: For unsupported browsers, stick with your existing download attribute implementation and inform users they can manually move the file to their desired folder. If you're dealing with multiple PDFs, you could also zip them together for easier organization.

What About Server-Side Workarounds? #

Even if you handle PDF generation and delivery server-side, you still can't specify a local download folder—this restriction is enforced entirely by the browser. The server can send the file, but the browser controls where it gets saved.

内容的提问来源于stack exchange，提问作者Mahesh Sanjeewa