OSS 文件下载-Excel

  • 发起请求网址如果是 www.baidu.com,跨域下载 Google cdn 的资源

Excel 文件

背景:

  • Excel 模板存储在 OSS 上,提供的一个链接,需要支持 用户点击下载

方案:

  • V1
    • 问题:跨域 a标签 download 属性失效
html 复制代码
<a href="https://cdn.google.com/1.xlsx" target="_blank" download="教师信息表模板.xlxs">教师信息表模板</a>
  • V2
    • 使用现有请求库,比如 axios,因为大部分请求库都是基于业务特性进行了封装,包含了 withCredentials:true

    • 在跨域下载的场景,需要配置 withCredentials:false,不携带 cookie

js 复制代码
requestLib.get('https://cdn.google.com/1.xlsx', { 
  withCredentials: false
})

或者 
requestLib.download('https://cdn.google.com/1.xlsx', {
  fileName: '教师信息表模板.xlxs',
  withCredentials: false
})
  • V3
js 复制代码
import { saveAs } from 'save-as'

const xhr = new XMLHttpRequest()
xhr.open('GET', 'https://cdn.google.com/1.xlsx', true)
xhr.responseType = 'blob'
xhr.onload = () => {
  if (xhr.status === 200) {
    saveAs(xhr.response, `${this.arrangeTypeTplName}.xlsx`)
  }
}
xhr.send()

V4:

js 复制代码
saveAs('https://cdn.google.com/1.xlsx',  '教师信息表模板.xlxs')
相关推荐
kyriewen3 小时前
别再每次都 Google 了:我整理了前端日常最常踩的 10 个 Git 坑,附速查表
前端·javascript·git
SmartBoyW4 小时前
深入ECMAScript规范:彻底搞懂JS隐式类型转换与底层ToPrimitive机制
前端·javascript
咪库咪库咪4 小时前
vue3-组件
vue.js
用户852495071844 小时前
解密 JavaScript 中的 this:谁才是真正的调用者?
javascript·面试
10share4 小时前
100行代码 模拟实现Vue 响应式系统
前端·vue.js
Heo4 小时前
Vite进阶用法详解
前端·javascript·面试
铁皮饭盒6 小时前
Next.js 风格路由内置?Bun FileSystemRouter 凭啥这么香
javascript
小林ixn7 小时前
别再背八股了!从 5 个真实场景彻底搞懂 JavaScript 的 this
javascript
东风破_7 小时前
JavaScript 面试常考的字符串算法:从反转字符串到回文判断
前端·javascript
巴勒个啦7 小时前
D3.js 入门实战:用力导向图可视化项目依赖关系
javascript