前端实现选择文件夹保存文件

In web applications, including those built with Vue 3, downloading files typically saves them to the user’s default download directory. Due to browser security restrictions, web applications cannot directly specify or control the client’s file system paths. However, with the introduction of the File System Access API, some modern browsers allow web applications to interact more directly with the user’s file system, subject to user permissions.

Here’s how you can leverage the File System Access API in Vue 3 to allow users to select a specific directory to save a file:

Check Browser Compatibility

First, ensure that the user’s browser supports the File System Access API. As of now, this API is supported in Chromium-based browsers like Chrome and Edge.
```
if ('showDirectoryPicker' in window) {
    // The API is supported
} else {
    // Fallback method
}
```

Implementing the Save Functionality

<template>
  <div>
    <button @click="saveFile">Save File to Directory</button>
  </div>
</template>

<script>
export default {
  methods: {
    async saveFile() {
      try {
        // Prompt the user to select a directory
        const dirHandle = await window.showDirectoryPicker();

        // Define the file name
        const fileName = 'example.txt';

        // Create or get a file handle
        const fileHandle = await dirHandle.getFileHandle(fileName, { create: true });

        // Create a writable stream
        const writableStream = await fileHandle.createWritable();

        // Write data to the stream
        await writableStream.write('Hello, this is a sample text file.');

        // Close the stream
        await writableStream.close();

        alert('File saved successfully!');
      } catch (error) {
        console.error('Error saving file:', error);
        alert('Failed to save the file.');
      }
    }
  }
};
</script>

Explanation of the Code
- showDirectoryPicker: This method prompts the user to select a directory and returns a handle to that directory.
- getFileHandle: Obtains a handle to a file within the selected directory. The { create: true } option ensures that the file is created if it doesn’t exist.
- createWritable: Creates a writable stream to the file, allowing you to write data.
- write: Writes data to the file.
- close: Closes the writable stream, ensuring all data is flushed and written.
Notes
- Permissions: The first time the user selects a directory, the browser will ask for permission. Subsequent accesses to the same directory might not prompt again, depending on the browser’s behavior.
- Fallbacks: For browsers that do not support the File System Access API, consider providing a fallback method where the file is downloaded to the default download directory using an <a> tag with the download attribute.

Fallback Download Method

If the browser doesn’t support the File System Access API, you can use the traditional method:

const blob = new Blob(['Hello, this is a sample text file.'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'example.txt';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);

This will prompt the user to download the file, saving it to their default download directory.

Conclusion

While browser security restrictions limit direct control over where files are saved, the File System Access API provides a way to offer users more flexibility in selecting save locations. Always ensure to handle permissions gracefully and provide fallback methods for broader browser compatibility.

Given that you have a large number of files and also generate Excel (.xlsx) files on the front end, I’ll provide a detailed implementation plan to handle file downloads and saving them to a specified directory using the File System Access API. This approach will include:

Handling Multiple File Downloads
Generating and Saving Excel Files

1. Handling Multiple File Downloads

When you have multiple files that need to be saved to a specific directory, you can loop through each file and save it individually using the File System Access API.

Here’s how you can implement this:

<template>
  <div>
    <button @click="saveFiles">Save Files to Directory</button>
  </div>
</template>

<script>
export default {
  methods: {
    async saveFiles() {
      try {
        // Prompt the user to select a directory
        const dirHandle = await window.showDirectoryPicker();

        // Example file data (replace this with your actual file data)
        const files = [
          { name: 'file1.txt', content: 'Content for file 1' },
          { name: 'file2.txt', content: 'Content for file 2' },
          { name: 'file3.txt', content: 'Content for file 3' }
        ];

        for (const file of files) {
          // Create or get a file handle
          const fileHandle = await dirHandle.getFileHandle(file.name, { create: true });

          // Create a writable stream
          const writableStream = await fileHandle.createWritable();

          // Write data to the stream
          await writableStream.write(file.content);

          // Close the stream
          await writableStream.close();
        }

        alert('All files saved successfully!');
      } catch (error) {
        console.error('Error saving files:', error);
        alert('Failed to save the files.');
      }
    }
  }
};
</script>

2. Generating and Saving Excel Files

To generate Excel files on the front end, you can use libraries like SheetJS (xlsx) to create Excel files and then save them using the File System Access API.

First, install the xlsx package:

npm install xlsx

Then, implement the logic for generating and saving Excel files:

<template>
  <div>
    <button @click="generateAndSaveExcel">Generate and Save Excel</button>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';

export default {
  methods: {
    async generateAndSaveExcel() {
      try {
        // Prompt the user to select a directory
        const dirHandle = await window.showDirectoryPicker();

        // Sample data for Excel
        const data = [
          { name: 'John Doe', age: 30, profession: 'Developer' },
          { name: 'Jane Smith', age: 25, profession: 'Designer' }
        ];

        // Create a new workbook and worksheet
        const worksheet = XLSX.utils.json_to_sheet(data);
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

        // Generate a binary Excel file
        const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

        // Convert the Excel file to a Blob
        const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

        // Define the file name
        const fileName = 'example.xlsx';

        // Create or get a file handle in the selected directory
        const fileHandle = await dirHandle.getFileHandle(fileName, { create: true });

        // Create a writable stream
        const writableStream = await fileHandle.createWritable();

        // Write the Excel Blob to the stream
        await writableStream.write(blob);

        // Close the stream
        await writableStream.close();

        alert('Excel file saved successfully!');
      } catch (error) {
        console.error('Error saving Excel file:', error);
        alert('Failed to save the Excel file.');
      }
    }
  }
};
</script>

3. Combining Multiple File Types

If you need to save multiple types of files (e.g., text files, Excel files) to the same directory, you can combine the above methods into a single function.

Summary

This solution leverages the File System Access API to allow users to select a directory and save multiple files, including dynamically generated Excel files. The approach is flexible and can handle various file types and large quantities of data, provided that user permissions are appropriately managed.

The File System Access API allows users to select a directory to save files, but it does not provide direct access to the file system path due to security reasons. The directory is indeed chosen by the user, and the application cannot automatically generate or set a specific directory path on the user’s file system. Here’s how it works:

How the File System Access API Works:

User-Selected Directory: When the showDirectoryPicker() method is called, the user is prompted to select a directory. The application then gets a handle to that directory, which can be used to create and save files within it.
No Access to File System Path: The API does not expose the actual file system path of the selected directory to the web application. Instead, it provides a handle that can be used to interact with the directory.
No Automatic Directory Creation: The web application cannot automatically create directories on the user’s file system. The directory must be chosen by the user, and any operations like creating files or subdirectories must be done within the context of that user-selected directory.

Example Workflow:

Step 1: The user clicks a button to save files.
Step 2: The application prompts the user to choose a directory.
Step 3: The application saves files in the chosen directory using the directory handle provided by the File System Access API.

Here’s a conceptual example:

async function saveFiles() {
  try {
    // Prompt user to select a directory
    const dirHandle = await window.showDirectoryPicker();

    // Example: Create a subdirectory within the selected directory
    const subDirHandle = await dirHandle.getDirectoryHandle('MySubfolder', { create: true });

    // Save files in the subdirectory
    const fileHandle = await subDirHandle.getFileHandle('example.txt', { create: true });
    const writableStream = await fileHandle.createWritable();
    await writableStream.write('Hello, this is a sample text file.');
    await writableStream.close();

    alert('File saved successfully!');
  } catch (error) {
    console.error('Error saving file:', error);
    alert('Failed to save the file.');
  }
}

Limitations:

No Predefined Paths: You cannot predefine or automatically set the directory where files will be saved. The user must explicitly select it.
No Path Information: The application will not have access to the actual file system path (e.g., C:\Users\YourName\Documents) of the chosen directory.

Why the Restriction?

This restriction is in place to protect user privacy and security, preventing websites from accessing or modifying files and directories on a user’s file system without explicit consent.

Alternative Approach:

If you require specific directory management on the server side, consider handling file generation and saving on the backend, and then providing download links to the user. This way, you have full control over file paths and directory structures on the server, while still giving the user the ability to download files to their desired location.

If your Excel file contains headers or titles in Chinese, you can handle this directly when generating the file using the xlsx library (SheetJS). The process is similar to what we’ve discussed before, but with Chinese characters in the headers.

Here’s how you can do it:

Step-by-Step Implementation

Prepare Your Data with Chinese Headers:
- Define your data as a JSON object where the keys (headers) are in Chinese.
Generate the Excel File:
- Convert the data to a worksheet using XLSX.utils.json_to_sheet.
- Append the worksheet to a new workbook.
- Save the workbook as a file.

Example Code

Here’s an example where the Excel file contains Chinese headers:

<template>
  <div>
    <button @click="generateAndSaveExcel">生成并保存Excel文件</button>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';

export default {
  methods: {
    async generateAndSaveExcel() {
      try {
        // Prompt the user to select a directory
        const dirHandle = await window.showDirectoryPicker();

        // Sample data with Chinese headers
        const data = [
          { 姓名: '张三', 年龄: 30, 职业: '开发人员' },
          { 姓名: '李四', 年龄: 25, 职业: '设计师' }
        ];

        // Create a new worksheet and workbook
        const worksheet = XLSX.utils.json_to_sheet(data);
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

        // Generate a binary Excel file
        const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

        // Convert the Excel file to a Blob
        const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

        // Define the file name
        const fileName = '示例文件.xlsx';

        // Create or get a file handle in the selected directory
        const fileHandle = await dirHandle.getFileHandle(fileName, { create: true });

        // Create a writable stream
        const writableStream = await fileHandle.createWritable();

        // Write the Excel Blob to the stream
        await writableStream.write(blob);

        // Close the stream
        await writableStream.close();

        alert('Excel文件保存成功！');
      } catch (error) {
        console.error('保存Excel文件时出错:', error);
        alert('保存Excel文件失败。');
      }
    }
  }
};
</script>

Explanation:

Chinese Headers: The keys in the data array (姓名, 年龄, 职业) are the headers that will appear in the Excel file.
File Name: The generated Excel file is named 示例文件.xlsx, which is also in Chinese.
Directory Selection: The user is prompted to choose a directory to save the file, as discussed earlier.

Handling Encoding:

The xlsx library handles different encodings well, so you should not encounter issues with Chinese characters in headers or data.

Final Notes:

Ensure that your application environment is set to support UTF-8 encoding, which is standard and typically handles Chinese characters correctly.
If you face issues with character encoding or display, ensure that your system and environment settings are correctly configured for UTF-8.

To handle a scenario where both single-level and multi-level headers exist simultaneously, we can modify the logic to dynamically manage the structure of the headers and the merging process. This approach allows for a mix of single-level headers (which should be merged with the row below) and multi-level headers (which should be merged horizontally if necessary).

Example Implementation

Here’s how you can modify the code to accommodate both single-level and multi-level headers:

Example Code:

<template>
  <div>
    <button @click="generateAndSaveExcel">生成并保存Excel文件</button>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';

export default {
  methods: {
    generateHeaders(data, additionalHeaders) {
      const headers = [[], []]; // Two-level headers
      const merges = [];

      additionalHeaders.forEach((header, index) => {
        if (!header.level2) {
          // Handle single-level header
          headers[0].push(header.level1);
          headers[1].push(''); // Add an empty cell below

          // Merge the single-level header with the row below it
          merges.push({
            s: { r: 0, c: headers[0].length - 1 },
            e: { r: 1, c: headers[0].length - 1 }
          });
        } else {
          // Handle multi-level header
          headers[0].push(header.level1);
          headers[1].push(header.level2);

          // Check if the previous level1 header is the same to merge
          if (index > 0 && additionalHeaders[index - 1].level1 === header.level1) {
            const prevMerge = merges[merges.length - 1];

            // Extend the previous merge if the level1 headers match
            if (prevMerge && prevMerge.s.c === headers[0].length - 2) {
              prevMerge.e.c++;
            }
          } else {
            // Create a new merge range for level1 headers
            merges.push({
              s: { r: 0, c: headers[0].length - 1 },
              e: { r: 0, c: headers[0].length - 1 }
            });
          }
        }
      });

      return { headers, merges };
    },

    async generateAndSaveExcel() {
      try {
        // Complex data set
        const data = [
          { 姓名: '张三', 年龄: 30, 职业: '开发人员', 公司: 'A公司', 工资: 10000, 部门: '研发部' },
          { 姓名: '李四', 年龄: 25, 职业: '设计师', 公司: 'B公司', 工资: 8000, 部门: '设计部' },
          { 姓名: '王五', 年龄: 28, 职业: '产品经理', 公司: 'A公司', 工资: 12000, 部门: '产品部' },
          { 姓名: '赵六', 年龄: 32, 职业: '开发人员', 公司: 'C公司', 工资: 11000, 部门: '研发部' },
          { 姓名: '孙七', 年龄: 29, 职业: '设计师', 公司: 'B公司', 工资: 8500, 部门: '设计部' }
        ];

        // Mixed-level header data
        const additionalHeaders = [
          { level1: '个人信息', level2: '姓名' },
          { level1: '个人信息', level2: '年龄' },
          { level1: '工作信息', level2: '职业' },
          { level1: '工作信息', level2: '公司' },
          { level1: '工资信息' }, // Single-level header, should be merged vertically
          { level1: '部门信息', level2: '部门' }
        ];

        // Generate headers and merges
        const { headers, merges } = this.generateHeaders(data, additionalHeaders);

        // Prepare the data rows
        const dataRows = data.map(item => [
          item.姓名,
          item.年龄,
          item.职业,
          item.公司,
          item.工资,
          item.部门
        ]);

        // Combine headers and data into a worksheet
        const worksheetData = [...headers, ...dataRows];

        // Create the worksheet
        const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);

        // Apply merges to the worksheet
        worksheet['!merges'] = merges;

        // Create a new workbook and append the worksheet
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

        // Generate a binary Excel file
        const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
        const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

        // Prompt the user to select a directory and save the file
        const dirHandle = await window.showDirectoryPicker();
        const fileHandle = await dirHandle.getFileHandle('mixed_level_headers_example.xlsx', { create: true });
        const writableStream = await fileHandle.createWritable();
        await writableStream.write(blob);
        await writableStream.close();

        alert('Excel文件保存成功！');
      } catch (error) {
        console.error('保存Excel文件时出错:', error);
        alert('保存Excel文件失败。');
      }
    }
  }
};
</script>

Explanation:

Header Structure:
- The code first identifies whether each header entry is single-level or multi-level.
- Single-level headers are merged with the row below, while multi-level headers can be merged horizontally based on the structure provided.
Merging Logic:
- Single-level headers: Merged vertically (spanning two rows).
- Multi-level headers: Merged horizontally if adjacent headers share the same level1 value.
Data Handling:
- The dataRows array corresponds to the columns defined by the combined headers.
- The data structure handles both single and multi-level headers dynamically.

Testing with Complex Data:

The provided example includes a mix of single-level and multi-level headers. When you run this code:

Single-Level Header: The “工资信息” header will be merged vertically across two rows.
Multi-Level Headers: “个人信息” and “工作信息” headers will span two rows, with “姓名”, “年龄”, “职业”, and “公司” as second-level headers under them.

This solution should cover various scenarios and allow for flexible header structures in your Excel files.

1. Handling Multiple File Downloads

2. Generating and Saving Excel Files

3. Combining Multiple File Types

Summary

How the File System Access API Works:

Example Workflow:

Limitations:

Why the Restriction?

Alternative Approach:

Step-by-Step Implementation

Example Code

Explanation:

Handling Encoding:

Final Notes:

Example Implementation

Example Code:

Explanation:

Testing with Complex Data:

FEATURED TAGS

FRIENDS