vue 通过url 文件下载 更改自定义文件名称

文章目录

概要

方法概括:

1. a 标签简单设置 href 方式

2. a 标签使用 blob 数据类型方式

整体代码展示

  <el-link
  :underline="false"
   type="primary"
   style="font-size: 12px; margin-left: 10px"
   @click="download(scope.row)"
   >下载</el-link>

   download(row) {
    这里拼接了下载地址url 传给封装的getBlob 进行Blob 抛下载方法
    let url = row.fileCctpath + row.fileCctkey
    this.getBlob(url).then((blob) => {
    抛送返回结果传给封装的 saveAs 方法进行更改文件名称下载
     blob抛送返回数据  row.fileName 自定义下载名称
    this.saveAs(blob, row.fileName);
    });
    },

   这里使用了两种方法进行抛送下载 任选其一即可 
    返回数据格式都是一致的 size 文件大小 type 文件类型 
     async getBlob(url) {
   第一种 使用了fetch 进行抛送
      const response = await fetch(url, {
        method: "GET",
        credentials: "include",
        // mode: "no-cors", // 这里设置为 no-cors
      });
      if (response.ok) {
        return await response.blob();
      } else {
        throw new Error("Network response was not ok.");
      }
   第二种 使用了 new XMLHttpRequest() 进行抛送
      return new Promise((resolve) => {
       const xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.responseType = "blob";
        xhr.withCredentials = true;
        xhr.onload = () => {
         console.log(xhr, "xhr");
        if (xhr.status === 200) {
           resolve(xhr.response);
          }
       };
      xhr.send();
      });
    },
 
   进行文件下载更换自定义文件名
   saveAs(blob, filename) {
      if (window.navigator.msSaveOrOpenBlob) {
        对于 IE 和 Edge
        navigator.msSaveBlob(blob, filename);
      } else {
        对于其他现代浏览器
        const link = document.createElement("a");
        const body = document.querySelector("body");
        link.href = window.URL.createObjectURL(blob);
        link.download = filename;
        link.style.display = "none";
        body.appendChild(link);
        link.click();
        body.removeChild(link);
        释放内存
        window.URL.revokeObjectURL(link.href);
      }
    },

   

  <el-link
  :underline="false"
   type="primary"
   style="font-size: 12px; margin-left: 10px"
   @click="download(scope.row)"
   >下载</el-link>

   第二种方法直接抛送下载 但是有个缺陷 需要是同源 不支持跨域 需要配置跨域
   download(row) {
    let url = row.fileCctpath + row.fileCctkey
    this.saveAs(blob, row.fileName);
    },

   saveAs(blob,fileName){
   这里可以进行 跨域设置 
   let u =
        "/hanmpsc" +
        blob.substr(
          "你的域名地址".length,
          blob.length - "你的域名地址".length
        );

     let a = document.createElement("a");
      a.href = u;
      a.download = fileName; //文件名
      a.target = "_blank";
      a.click();

   }
   vue.config.js 里进行配置跨域存储桶服务器地址 
     '/hanmpsc': {
        target: 'http://********', // 新存储桶服务器的地址
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          '^/hanmpsc': '', // 去掉路径中的 /srmc
        },
      }



小结

getBlob(url)

  • 功能:该方法用于通过给定的 URL 获取文件的 Blob 对象。
  • 参数
    • url:要请求的文件的 URL。
  • 实现
    • 创建一个新的 Promise,用于异步处理。
    • 使用 XMLHttpRequest 对象发起一个 GET 请求,请求的响应类型设置为 blob
    • 在请求成功(状态码为 200)时,调用 resolve 方法将响应的 Blob 对象返回。

2. upload(url, name)

  • 功能:该方法用于下载指定 URL 的文件,并将其命名为指定的文件名。
  • 参数
    • url:要下载的文件的 URL。
    • name:下载后文件的名称。
  • 实现
    • 调用 getBlob(url) 方法获取 Blob 对象。
    • 创建一个 <a> 标签,用于触发文件下载。
    • 使用 window.URL.createObjectURL(blob) 创建一个指向 Blob 对象的 URL。
    • 设置 <a> 标签的 href 属性为 Blob URL,download 属性为指定的文件名。
    • <a> 标签添加到文档中,并模拟点击以触发下载。
    • 下载完成后,移除 <a> 标签,并使用 window.URL.revokeObjectURL(url) 释放 Blob URL。
  • 这段代码的主要目的是通过 AJAX 请求获取文件,并利用 Blob 对象实现文件的下载功能。用户只需提供文件的 URL 和希望保存的文件名,代码便会自动处理下载过程。
### Vue3 中自定义 App.vue 文件的方法 在 Vue 3 的项目结构中,`App.vue` 是项目的根组件,默认情况下它会被渲染到 DOM 中作为整个应用的入口。如果需要对 `App.vue` 进行自定义设置,可以通过修改其模板、逻辑以及样式来满足特定的需求。 #### 修改默认行为 要实现更灵活的功能,可以利用 Vue 提供的组合式 API 或选项式 API 来扩展功能。例如,在 `App.vue` 中引入外部库并将其挂载为全局变量[^1]: ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); // 将第三方库(如 Vue)设为外部依赖 app.config.globalProperties.$externalLibrary = window.Vue; app.mount('#app'); ``` 这样可以在任何子组件中通过 `this.$externalLibrary` 访问该外部库。 --- #### 定义全局变量与方法 为了实现在多个页面之间共享状态或函数调用,可以直接在 `App.vue` 中定义全局变量和方法,并通过事件总线或其他机制通知其他组件更新[^4]。以下是具体示例: ```html <!-- App.vue --> <template> <div id="app"> <!-- 主页面 A --> <PageA /> <!-- 子页面 B --> <PageB /> </div> </template> <script> import PageA from './components/PageA.vue'; import PageB from './components/PageB.vue'; export default { components: { PageA, PageB, }, data() { return { sharedState: null, // 全局共享的状态 }; }, provide() { return { updateSharedState: this.updateSharedState, // 提供一个用于更新状态的方法 getSharedState: () => this.sharedState, // 获取当前状态 }; }, methods: { updateSharedState(newState) { this.sharedState = newState; }, }, }; </script> ``` 在此基础上,`PageA` 可以触发 `updateSharedState` 更新状态,而 `PageB` 则监听这些变化并动态调整内容。 --- #### 使用插件增强功能 除了直接操作 `App.vue` 外,还可以借助 Vue 插件的方式进一步简化跨组件通信流程[^2]。下面是一个简单的插件示例: ```javascript // myPlugin.js export default { install(app, options) { const eventBus = { events: {}, $on(eventName, callback) { (this.events[eventName] || (this.events[eventName] = [])).push(callback); }, $emit(eventName, ...args) { (this.events[eventName] || []).forEach(cb => cb(...args)); }, $off(eventName) { delete this.events[eventName]; } }; app.config.globalProperties.$bus = eventBus; // 注册全局事件总线 }, }; // main.js import MyPlugin from './myPlugin'; createApp(App).use(MyPlugin).mount('#app'); ``` 之后,任意组件都可以通过 `$bus` 实现解耦的消息传递。 --- #### 配置多环境支持 对于不同运行阶段下的配置管理,推荐使用 `.env.*` 文件配合 Vite 工具完成[^3]。例如: `.env.test` ```plaintext VITE_API_BASE_URL=http://test.example.com/api ``` 然后在代码中读取对应的值: ```javascript console.log(import.meta.env.VITE_API_BASE_URL); // 输出 http://test.example.com/api ``` 这使得开发者能够轻松切换生产/测试模式而不需手动更改硬编码路径。 --- ### 总结 综上所述,无论是通过修改 `main.js` 设置外链资源,还是构建基于提供者模式的数据流控制体系,亦或是集成定制化插件提升模块间协作效率,都能有效达成对标准 `App.vue` 结构的有效改造目标。与此同时,合理运用现代前端框架所提供的强大工具集——比如 Vite 对于多态化的环境适配能力——将进一步优化整体解决方案的质量。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值