vue3项目中导出文件自定义路径保存

在Vue3项目中，如果你想让用户可以选择自定义路径保存下载文件，通常会通过`FileSaver.js`库结合浏览器的`navigator.saveBlob`或`URL.createObjectURL`功能实现。以下是一个简单的步骤说明：

1. 首先，你需要安装`file-saver`库，可以使用npm或yarn添加依赖：

   npm install file-saver
   # 或者
   yarn add file-saver

2. 引入这个库到你的组件中，并导入`saveAs`函数：

   import { saveAs } from 'file-saver';

3. 当你需要用户保存文件时，假设有一个`dataUrl`变量存储了文件的Base64数据或者一个`blob`对象：

   const downloadFile = async (urlOrBlob, fileName) => {
     if (typeof urlOrBlob === 'string') {
       // 如果是Base64，需要先转为Blob
       const blob = await convertDataToBlob(urlOrBlob);
     } else {
       // 如果已经是Blob，则直接使用
       blob = urlOrBlob;
     }
     
     try {
       const url = URL.createObjectURL(blob);
       await saveAs(blob, fileName); // 自定义文件名
       URL.revokeObjectURL(url); // 关闭URL
     } catch (error) {
       console.error('Error saving file:', error);
     }
   };
   
   // 使用示例：
   downloadFile(yourBlob, 'yourCustomFileName.pdf');

4. 对于`convertDataToBlob`函数（如果需要），你可以这样做：

   async function convertDataToBlob(dataUrl) {
     const arr = dataUrl.split(',');
     const mime = arr[0].match(/:(.*?);/)[1];
     const bstr = atob(arr[1]);
     let n = bstr.length;
     const u8arr = new Uint8Array(n);
     while (n--) {
       u8arr[n] = bstr.charCodeAt(n);
     }
     return new Blob([u8arr], { type: mime });
   }

5. 提供给用户一个输入框或选择器，允许他们指定保存路径，但这通常是前端展示，实际保存仍然由浏览器控制，因为浏览器的安全策略限制。