【项目实战】location.href 实现文件下载

应用场景

最近在项目中看到一种新的文件下载方式,原理是将[后台地址+接口地址+请求参数]拼接成一个url,直接将下载任务丢给浏览器去执行.但是在需要校验token的项目中,需要后台单独给这个接口放开token校验

location.href 相关内容

window.location.protocol: 返回当前 URL 的协议部分（例如：http: 或 https:）。
window.location.host: 返回当前 URL 的主机名和端口（例如：www.example.com:8080）。
window.location.hostname: 返回当前 URL 的主机名（例如：www.example.com）。
window.location.port: 返回当前 URL 的端口号（例如：8080）。
window.location.pathname: 返回当前 URL 的路径部分（例如：/path/to/page）。
window.location.search: 返回当前 URL 的查询字符串部分（例如：?key=value）。
window.location.hash: 返回当前 URL 的锚点部分（例如：#section1）。

代码

interface StringObject {
    [key: string]: string;
}

const exportFile = async (params: StringObject = {}, url: string = '') => {
    try {
        const newUrl = (params: StringObject): String => {
            const urlParams = new URLSearchParams(params);
            // url是服务器地址+端口
            return `${window.location.protocol + "//"}${url}${'你的接口地址'}${urlParams}`;
        }
        window.location.href = newUrl()
    } catch (error) {
        console.log(error);
    }
};

URLSearchParams 对象

URLSearchParams 是 JavaScript 中用于处理 URL 查询字符串的一个内置对象

1.创建 URLSearchParams 实例

你可以通过传递一个查询字符串或者一个键值对数组来创建 URLSearchParams 实例。

// 使用查询字符串
const params1 = new URLSearchParams('?key1=value1&key2=value2');

// 使用数组
const params2 = new URLSearchParams([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

2.获取参数值

你可以通过 get 方法来获取单个参数的值，或者通过 getAll 方法来获取所有同名参数的值。

const params = new URLSearchParams('?key1=value1&key2=value2&key2=value3');

console.log(params.get('key1')); // 输出: value1
console.log(params.getAll('key2')); // 输出: ['value2', 'value3']

3.设置参数值

你可以使用 set 方法来设置或更新参数的值，使用 append 方法来添加多个同名参数。

const params = new URLSearchParams();

params.set('key1', 'value1');
params.append('key2', 'value2');
params.append('key2', 'value3');

console.log(params.toString()); // 输出: key1=value1&key2=value2&key2=value3

4.删除参数

你可以使用 delete 方法来删除指定名称的参数。

const params = new URLSearchParams('?key1=value1&key2=value2');

params.delete('key1');

console.log(params.toString()); // 输出: key2=value2

5.与 URL 对象配合使用

URLSearchParams 通常与 URL 对象一起使用，以方便地处理 URL 及其查询参数。

const url = new URL('https://example.com/?key1=value1&key2=value2');
const params = url.searchParams;

console.log(params.get('key1')); // 输出: value1

params.set('key1', 'newvalue1');
params.append('key3', 'value3');

console.log(url.href); // 输出: https://example.com/?key2=value2&key1=newvalue1&key3=value3

6.迭代参数

你可以通过 forEach 方法或者 [Symbol.iterator] 来迭代所有的键值对。

const params = new URLSearchParams('?key1=value1&key2=value2');

params.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

// 或者使用 for...of 循环
for (const [key, value] of params) {
  console.log(`${key}: ${value}`);
}

7.将参数转换为对象

有时你需要将 URLSearchParams 转换为普通的 JavaScript 对象。

const params = new URLSearchParams('?key1=value1&key2=value2');
const obj = {};

for (const [key, value] of params) {
  obj[key] = value;
}

console.log(obj); // 输出: { key1: 'value1', key2: 'value2' }

8.处理多个同名参数

当有多个同名参数时，URLSearchParams 可以很好地处理这些情况。

const params = new URLSearchParams('?key=value1&key=value2');

console.log(params.getAll('key')); // 输出: ['value1', 'value2']

9.编码和解码

URLSearchParams 会自动处理参数的编码和解码。

const params = new URLSearchParams();

params.append('name', 'John Doe');
params.append('tag', 'hello world');

console.log(params.toString()); // 输出: name=John+Doe&tag=hello+world